Vue.js学习分享（2）

Vue.js学习分享（2）

1.v-if指令

用途：控制元素的显示与否
例如：<p v-if="true">{{ message }}<\p>
v-if等于true显示，等于false则不显示。
属性：display：none/block

2.v-show指令

用途：控制元素的显示与否
例如：<p v-show="true">{{ message }}<\p>
v-show等于true，则结果显示，反之，则不显示。

3.v-if指令和v-show指令的区别

（1）v-show是控制CSS的display的值为none/block；
（2）v-if是控制元素的存在与否，如果是true元素添加到页面，为false直接从页面删除。

4.v-if指令和v-show指令如何选择

如果页面的某个元素频繁的切换，我们就使用v-show指令；如果页面的某个元素只需要显示或隐藏一次，我们就使用v-if指令。

5.v-else指令

用途：控制元素的显示与否
v-else指令通常和v-if指令搭配使用
例如：<p v-if="true">{{ message }}<\p>
<p v-else="false">{{ message }}<\p>
与if…else…逻辑相似，v-if等于true则显示，v-else不显示；反之，v-else显示。

6.v-pre指令

用途：跳过这个元素和它的子元素的编译过程，不会解析Vue.js语法，原封不动的输出。

7.v-model指令

用途：负责收集页面的数据
例如：<input type="text" placeholder="请输入用户名" v-model="username">

8.双向数据绑定

双向数据绑定即指两个方向的变化，
①模型变量→视图，叫做方向一
②视图→模型变量，叫做方向二
①＋② = 双向数据绑定

9.双向数据绑定的底层实现（原理）

主要思想：做数据拦截（数据劫持）
①ec5里面的的实现
object.defineProperty( )api可以拦截对象的属性get和set操作
②ec6里面的实现
Proxy这个API也可以拦截对象属性的get和set操作

10.v-bind指令

用途：给元素设置属性
例如：<img v-bind:src="vueLogo" alt=" ">
也可简写为：<img :src="vueLogo" alt=" ">
表示给src属性进行值的设定，因为我们直接用这段代码来满足我们的需求是做不到的<img src="vueLogo" alt=" ">，这时我们就需要将scr的值（也就是vueLogo）进行值的设定来满足我们的需求。

11.v-on指令

用途：事件的绑定
例如：<button v-on:click="clickHandler">点击</button>
也可简写为：<button @click="clickHandler">点击</button>
我们点击按钮就会调用我们在methods里写的clickHandler方法，来实现我们的操作。