VUE之属性、条件、渲染、事件指令及修饰符

VUE之属性、条件、渲染、事件指令及修饰符

（1）v-bind属性指令

1、v-bind动态属性
语法格式1：单个语法格式 v-bind:attributeName=variable
具体写法如下图所示

语法格式2：对象语法格式
v-bind=“{attributeName1:variable1,attributeName2:variable2,……}”
具体写法如下图所示

语法格式3：数组语法格式”绑定类名”
v-bind:attributeName=“[variable1,variable2,……]”
具体写法如下图所示

（2）v-if条件指令

v-if指条件性渲染，为true时渲染DOM，否则不进行渲染
案例如图所示

数据驱动DOM是Vue.js的核心理念，所以尽量避免直接操作DOM，只需要维护关注数据即可，DOM的事Vue会进行处理。

v-show条件指令

v-show也是指条件性渲染，用法与v-if类似
具体案例如图所示

vue中显隐方法常用两种，v-show和v-if，但这两种是有区别的

以上就是v-show与v-if的区别了，一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-on

（1）v-on用于绑定事件监听器，实现一些交互功能。
语法：v-on:事件类型=”方法名”

（2）表达式除了方法名，也可以是内联语句，语法：v-on:事件类型=”内联语句”

建议将事件处理放到methods里声明一个方法，提高可读性与维护性。

（3）以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
①.stop：阻止事件的传递，即阻止事件向上冒泡。

②.prevent：阻止对象的默认行为。.prevent会调用 event.preventDefault() 即取消事件的默认动作。

3、.capture：使用事件捕获机制

4、.self当事件在该元素自身触发时执行相应的事件处理程序，在该元素的子元素上不触发。

因为父级点击事件被修饰符绑定，只有在直接点击到父元素 div ，事件才会被触发。
即使点击了它的子元素触发了子元素的事件，按照事件冒泡原理，父元素的事件应当被触发，但是因为事件的触发源并不是事件绑定的元素本身，所以父元素事件不会被触发。

5、.once：绑定的事件只能触发一次。

6、keyup.keyCode键值修饰符，用来监听键盘事件。可以通过按键名称来监听，也可以自定义按键名称（键盘修饰符及自定义键盘修饰符）

v-on修饰符小结

（1）.stop冒泡事件修饰符，阻止事件向上冒泡
（2）.prevent默认事件修饰符，阻止对象的默认行为
（3）.capture捕获事件修饰符，使用事件捕获机制
（4）.self自身事件修饰符，只当事件是从事件绑定的元素本身触发时才触发回调
（5）.once一次性事件修饰符，绑定的事件只能触发一次
（6）keyup.keyCode键值事件修饰符，用来监听键盘事件（键盘修饰符以及自定义键盘修饰符）

代理方法调用：
Vue.js将methods里的方法也代理了， 所以可以像访问Vue数据一样来调用方法。

如有问题，请联系小编