Vue.js教程
最近一段时间学习了一下主流框架Vue.js，并用Vue.js的框架vux开发手机端项目，整体开发还是比较顺利，效率还是挺高的。说说使用Vue.js的感受，学习起来比较快，需要记的很少，Vux提供的组件很全，可以完成大部分的业务，自己需要单独写的代码很少。在项目开发的过程中，遇到的问题都能在网上找到解决方案。学习Vue.js的时候一定要放空自己，千万不要用JQuery那一套思路来学习。下面雷雪松结合自己实际使用情况总结一下Vue相关知识点分享给大家。
1、Vue属性和方法
Vue.nextTick :在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
[cc lang=”javascript” escaped=”true”]// 修改数据
vm.msg = ‘Hello’
// DOM 还没有更新
Vue.nextTick(function () {
// DOM 更新了
})[/cc]
Vue.set :设置对象的属性。如果对象是响应式的，确保属性被创建后也是响应式的，同时触发视图更新。这个方法主要用于避开 Vue 不能检测属性被添加的限制。
2、Vue实例属性和方法
vm.$nextTick:将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。
[cc lang=”javascript” escaped=”true”]this.$nextTick(function () {
// DOM 现在更新了
// `this` 绑定到当前实例
this.doSomethingElse()
})[/cc]
vm.$set :这是全局 Vue.set 的别名。
3、Vue实例生命周期
created和mounted都能拿到实例对象的属性和方法。created是在组件实例一旦创建完成的时候立刻调用，这时候页面dom节点并未生成，mounted是在页面dom节点渲染完毕之后就立刻执行的。一般用的在created这个时候可以请求接口获取页面所需数据，放在mounted请求有可能导致页面闪动（页面dom结构已经生成）。
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
[cc lang=”javascript” escaped=”true”]<!– 完整语法 –>
<a v-bind:href=”https://www.xuesongboke.cn”>…</a>
<!– 缩写 –>
<a :href=”https://www.xuesongboke.cn”>…</a>[/cc]
v-bind
[cc lang=”javascript” escaped=”true”]<!– 完整语法 –>
<a v-on:click=”doSomething”>…</a>
<!– 缩写 –>
<a @click=”doSomething”>…</a>[/cc]
b、指令参数
.stop: 阻止单击事件继续传播
.prevent:提交事件不再重载页面
.capture :即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
.self:只当在 event.target 是当前元素自身时触发处理函数
.once:点击事件将只会触发一次
[cc lang=”javascript” escaped=”true”]<!– 阻止单击事件继续传播 –>
<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>[/cc]
按键别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
来源：Vue.js教程