本教程为入门教程，如有错误，请各位前端大佬指出。
1.为什么使用vue
- 业务越来越复杂，更多操作在前段进行。
- 渐进式
- 不需要操作dom
- 双向绑定
- 环境构建方便
- 组件开发
- 社区活跃
2.vue入口
main.js为主入口
1. import Vue from 'vue' 2. import App from './App' 3. import router from './router' 4. 5. Vue.config.productionTip = false 6. 7. /* eslint-disable no-new */ 8. new Vue({ 9. el: '#app', 10. router, 11. components: { App }, //指定进入app.vue 12. template: '<App/>' 13. }) 14. 复制代码
3.基本指令
1.{{}}与v-html
用于打印与输出。
1. <template> 2. <div> 3. <!-- 表达式 --> 4. <p>{{1+1>1 ? '是':'否'}}</p> 5. {{msg}} 6. <div v-html = "msg"></div> 7. </div> 8. </template> 9. 10. <script> 11. export default { 12. name: 'HelloWorld', 13. el: '#app', 14. 15. data () { 16. return { 17. msg:'<h1>我是消息</h1>' 18. } 19. } 20. } 21. </script> 22. 复制代码
2.v-bind
v-bind就是用于绑定数据和元素属性的。
1. <template> 2. <div v-bind:class = "active" v-bind:id=id> 3. {{msg}} 4. </div> 5. </template> 6. 7. <script> 8. export default { 9. name: 'HelloWorld', 10. el: '#app', 11. data () { 12. return { 13. msg:'<h1>我是消息</h1>', 14. active:"active", 15. id:19 16. } 17. } 18. } 19. </script> 20. 复制代码
3.class与style
class的绑定方式。
1. <template> 2. <div> 3. <p v-bind:class="{ active: isActive }" v-bind:id=id>aaa</p> 4. <p v-bind:class="{ active: 10>1?true:false,test:true }" >bbb</p> 5. <p v-bind:class='[msg]' >ccc</p> 6. <p v-bind:class="[{active :0 > 1},'test']" >ddd</p> 7. <ul> 8. <li v-bind:class ="[{active :index/2==0},'test']" v-for = "(item,index) in names"> 9. {{item.name}} 10. </li> 11. </ul> 12. <p v-bind:style="{color: activeColor, fontSize: fontSize + 'px' }">eee</p> 13. </div> 14. </template> 15. 16. <script> 17. export default { 18. name: 'HelloWorld', 19. el: '#app', 20. data () { 21. return { 22. msg:'<h1>我是消息</h1>', 23. isActive:false, 24. names:[{ 25. name:"aaa" 26. },{ 27. name:"bbb" 28. },{ 29. name:"ccc" 30. }], 31. activeColor: 'red', 32. fontSize: 30 33. } 34. } 35. } 36. </script> 37. 复制代码
4.观察指令method和computed
method和computed区别：
我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 msg还没有发生改变，多次访问 showMessage计算属性会立即返回之前的计算结果，而不必再次执行函数。
函数执行需要 数据属性里面的 message 值作为参数。
● 如果使用 methods 执行函数，vue 每次都要重新执行一次函数，不管msg的值是否有变化；
● 如果使用computed 执行函数，只有当msg这个最初的数据发生变化时，函数才会被执行。（依赖-监测数据变化）
1. <template> 2. <div id="example"> 3. {{ msg.split('').reverse().join('') }} 4. {{ showMessage}} 5. </div> 6. </template> 7. 8. <script> 9. export default { 10. name: 'HelloWorld', 11. el: '#app', 12. data () { 13. return { 14. msg:'我是消息' 15. } 16. }, 17. computed: { 18. showMessage(){ 19. return this.msg.split('').reverse().join('') 20. } 21. } 22. } 23. </script> 24. 复制代码
5.条件渲染
v-if,v-else顾名思义，判断是否可以显示。
1. <template> 2. <div > 3. <p v-if="sign">1111</p> 4. <p v-else>2222</p> 5. </div> 6. </template> 7. 8. <script> 9. export default { 10. name: 'HelloWorld', 11. el: '#app', 12. data () { 13. return { 14. sign:true, 15. msg:'<h1>我是消息</h1>', 16. active:"active", 17. id:19 18. } 19. } 20. } 21. </script> 22. 复制代码
- v-if：每次都会重新删除或创建元素，具有较高的切换性能消耗；
- v-show：每次切换元素的 display：none 样式，具有较高的初始渲染消耗。
- v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
1. <template> 2. <div > 3. <p v-show="sign">1111</p> 4. </div> 5. </template> 6. 7. <script> 8. export default { 9. name: 'HelloWorld', 10. el: '#app', 11. data () { 12. return { 13. sign:true, 14. msg:'<h1>我是消息</h1>', 15. active:"active", 16. id:19 17. } 18. } 19. } 20. </script> 21. 复制代码
6.列表输出
v-for用于循环列表。
1. <template> 2. <div > 3. <ul> 4. <li v-bind:key ="index" v-for = "(item,key,index) in names"> 5. {{item.age}}-{{item.name}}-{{index}}||{{item}}||{{key}} 6. </li> 7. </ul> 8. </div> 9. </template> 10. 11. <script> 12. export default { 13. name: 'HelloWorld', 14. el: '#app', 15. data () { 16. return { 17. sign:true, 18. msg:'<h1>我是消息</h1>', 19. names:[{ 20. name:"aaa", 21. age:19, 22. sex:"1" 23. },{ 24. name:"bbb", 25. age:20, 26. sex:"1" 27. },{ 28. name:"ccc", 29. age:21, 30. sex:"1" 31. }] 32. } 33. } 34. } 35. </script> 36. 复制代码
7.数组更新
注意：filter()、concat() 和 slice()不发生更新。
1. <template> 2. <div > 3. <ul> 4. <li v-bind:key ="index" v-for = "item in names"> 5. {{item.name}} 6. </li> 7. </ul> 8. <button v-on:click = "clickbutton" name = "button" type = "button">按钮</button> 9. </div> 10. </template> 11. 12. <script> 13. export default { 14. name: 'HelloWorld', 15. el: '#app', 16. data () { 17. return { 18. sign:true, 19. msg:'<h1>我是消息</h1>', 20. names:[{ 21. name:"aaa" 22. },{ 23. name:"bbb" 24. },{ 25. name:"ccc" 26. }] 27. } 28. }, 29. methods: { 30. clickbutton(event){ 31. this.names.push({name:"ddd"}) 32. } 33. }, 34. } 35. </script> 36. 复制代码
8.事件处理
v-on：当执行xx动作时执行xx函数。
1. <template> 2. <div> 3. <button v-on:click = "count +=1" type = "button" name = "button">按钮</button> 4. <p>{{count}}</p> 5. <button v-on:click = "clickhandle" type = "button" name = "button">按钮2</button> 6. <p>{{demoshow}}</p> 7. <button v-on:click = "chance" type = "button" name = "button">按钮3</button> 8. <button v-on:click.once = "senddate('你好',$event)" type = "button" name = "button">按钮4</button> 9. </div> 10. </template> 11. 12. <script> 13. export default { 14. name: 'HelloWorld', 15. el: '#app', 16. data () { 17. return { 18. count:1, 19. demoshow:"帅小伙" 20. } 21. }, 22. methods: { 23. clickhandle(event){ 24. console.log("触发") 25. }, 26. chance(event){ 27. this.demoshow = "我不是帅小伙" 28. }, 29. senddate(data,event){ 30. console.log(data,event) 31. } 32. } 33. } 34. </script> 35. 复制代码
9.事件修饰
1. <!-- 阻止单击事件继续传播 --> 2. <a v-on:click.stop="doThis"></a> 3. 4. <!-- 提交事件不再重载页面 --> 5. <form v-on:submit.prevent="onSubmit"></form> 6. 7. <!-- 修饰符可以串联 --> 8. <a v-on:click.stop.prevent="doThat"></a> 9. 10. <!-- 只有修饰符 --> 11. <form v-on:submit.prevent></form> 12. 13. <!-- 添加事件监听器时使用事件捕获模式 --> 14. <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --> 15. <div v-on:click.capture="doThis">...</div> 16. 17. <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> 18. <!-- 即事件不是从内部元素触发的 --> 19. <div v-on:click.self="doThat">...</div> 20. 复制代码
10.键盘事件
1. <template> 2. <div> 3. <input v-on:keyup.enter = "showlog" name = "button">输入框</button> 4. </div> 5. </template> 6. <script> 7. export default { 8. name: 'HelloWorld', 9. el: '#app', 10. data () { 11. return { 12. count:1 13. } 14. }, 15. methods: { 16. showlog(event){ 17. console.log(event) 18. } 19. } 20. } 21. </script> 22. 复制代码
其余键盘操作介绍：
1. .enter 2. .tab 3. .delete (捕获“删除”和“退格”键) 4. .esc 5. .space 6. .up 7. .down 8. .left 9. .right 10. .ctrl 11. .alt 12. .shift 13. .meta 14. 等 请参考文档 15. 复制代码
11.表单输入
双向数据绑定指令lazy，number，trim。
1. <template> 2. <div> 3. <input v-model.lazy="message" placeholder="edit me"> 4. <p>Message is: {{ message }}</p> 5. <button v-on:click = "getMsg" type = "button" name = "button">按钮</button> 6. </div> 7. </template> 8. <script> 9. export default { 10. name: 'HelloWorld', 11. el: '#app', 12. data () { 13. return { 14. message:"这是一个消息" 15. } 16. }, 17. methods: { 18. getMsg(event){ 19. console.log(this.message) 20. } 21. } 22. } 23. </script> 24. 复制代码
1. .lazy 2. 在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步： 3. <!-- 在“change”时而非“input”时更新 --> 4. <input v-model.lazy="msg" > 5. 6. .number 7. 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符： 8. <input v-model.number="age" type="number"> 9. 这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。 10. 11. 12. .trim 13. 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符： 14. <input v-model.trim="msg">
