Vue.js教程

雷雪松

已于 2023-02-01 17:07:26 修改

阅读量1.1k

点赞数 3

分类专栏： JS开发文章标签： vue vue教程

于 2018-05-04 11:41:17 首次发布

原文链接：https://www.leixuesong.com/3196

版权

JS开发专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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



<div v-on:click.self="doThat">...</div>


<a v-on:click.once="doThis"></a>