Vue.js教程

WEB前端

最近一段时间学习了一下主流框架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="https://www.leixuesong.cn">...</a>

<!-- 缩写 -->
<a :href="https://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

来源:Vue.js教程