Vue.js教程

时间 2020-12-27 标签 vue vue教程

最近一段时间学习了一下主流框架Vue.js，并用Vue.js的框架vux开发手机端项目，整体开发还是比较顺利，效率还是挺高的。说说使用Vue.js的感受，学习起来比较快，需要记的很少，Vux提供的组件很全，可以完成大部分的业务，自己需要单独写的代码很少。在项目开发的过程中，遇到的问题都能在网上找到解决方案。学习Vue.js的时候一定要放空自己，千万不要用JQuery那一套思路来学习。下面PHP程序员雷雪松结合自己实际使用情况总结一下Vue相关知识点分享给大家。

1、Vue属性和方法
Vue.nextTick :在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

 
        1 
       
2 
       
3 
       
4 
       
5 
       
6 
       
       // 修改数据 
       
vm. 
       msg  
       =  
       'Hello' 
       
       // DOM 还没有更新 
       
Vue. 
       nextTick 
       ( 
       function  
       ( 
       )  
       { 
       
       // DOM 更新了 
       
       } 
       )

Vue.set :设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。

2、Vue实例属性和方法
vm.$nextTick:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

 
        1 
       
2 
       
3 
       
4 
       
5 
       
       this.$nextTick 
       ( 
       function  
       ( 
       )  
       { 
       
       // DOM 现在更新了 
       
       // `this` 绑定到当前实例 
       
       this. 
       doSomethingElse 
       ( 
       ) 
       
       } 
       )

vm.$set :这是全局 Vue.set 的别名。

3、Vue实例生命周期

一般用的最多的就是mouted这个时候可以请求接口，获取页面所需数据。

4、Vue常用指令
v-for:基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression ，为当前遍历的元素提供别名。
v-if:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是，将提出它的内容作为条件块。
v-else-if:前一兄弟元素必须有 v-if 或 v-else-if。
v-else:前一兄弟元素必须有 v-if 或 v-else-if。
v-show:根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。

5、Vue事件
a、常用指令
v-on

 
        1 
       
2 
       
3 
       
4 
       
5 
       
       <!-- 完整语法  
       --> 
       
       <a v 
       -bind 
       :href 
       = 
       "http://www.leixuesong.cn" 
       >... 
       </a 
       > 
       
       <!-- 缩写  
       --> 
       
       <a  
       :href 
       = 
       "http://www.leixuesong.cn" 
       >... 
       </a 
       >

v-bind

 
        1 
       
2 
       
3 
       
4 
       
5 
       
       <!-- 完整语法  
       --> 
       
       <a v 
       -on 
       :click 
       = 
       "doSomething" 
       >... 
       </a 
       > 
       
       <!-- 缩写  
       --> 
       
       <a  
       @click 
       = 
       "doSomething" 
       >... 
       </a 
       >

b、指令参数
.stop: 阻止单击事件继续传播
.prevent:提交事件不再重载页面
.capture :即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self:只当在 event.target 是当前元素自身时触发处理函数
.once:点击事件将只会触发一次

 
        1 
       
2 
       
3 
       
4 
       
5 
       
6 
       
7 
       
8 
       
9 
       
10 
       
11 
       
12 
       
13 
       
14 
       
15 
       
16 
       
17 
       
18 
       
19 
       
20 
       
21 
       
22 
       
       <!-- 阻止单击事件继续传播  
       --> 
       
       <a v 
       -on 
       :click. 
       stop 
       = 
       "doThis" 
       ></a 
       > 
       
       <!-- 提交事件不再重载页面  
       --> 
       
       <form v 
       -on 
       :submit. 
       prevent 
       = 
       "onSubmit" 
       ></form 
       > 
       
       <!-- 修饰符可以串联  
       --> 
       
       <a v 
       -on 
       :click. 
       stop. 
       prevent 
       = 
       "doThat" 
       ></a 
       > 
       
       <!-- 只有修饰符  
       --> 
       
       <form v 
       -on 
       :submit. 
       prevent 
       ></form 
       > 
       
       <!-- 添加事件监听器时使用事件捕获模式  
       --> 
       
       <!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理  
       --> 
       
       <div v 
       -on 
       :click. 
       capture 
       = 
       "doThis" 
       >... 
       </div 
       > 
       
       <!-- 只当在 event. 
       target 是当前元素自身时触发处理函数  
       --> 
       
       <!-- 即事件不是从内部元素触发的  
       --> 
       
       <div v 
       -on 
       :click. 
       self 
       = 
       "doThat" 
       >... 
       </div 
       > 
       
       <!-- 点击事件将只会触发一次  
       --> 
       
       <a v 
       -on 
       :click. 
       once 
       = 
       "doThis" 
       ></a 
       >

按键别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift

.meta

来源：PHP程序员雷雪松的博客 - Vue.js教程