《Vue.js 前端开发技术与实践》课件-第4章 Vue指令

第4章Vue指令在Vue中，以v-开头的属性称之为指令，被称为指令的新属性来扩展HTML，指令是对DOM的增强，用来操作DOM。4.1数据绑定指令4.1.1文本节点绑定指令在HTML结构中，文本节点是显示页面的文字内容，动态变化的文本数据可以用v-text、v-html指令来渲染。“Mustache”语法“{{

}}”的文本插值，在此一起介绍。1、“Mustache”语法“{{

}}”文本插值语法：<标签>{{数据对象属性}}</标签>2、v-text指令：绑定的数据也当成纯文本输出，使用v-text指令的语法：<标签v-html="数据对象属性"></标签>3、v-html指令:绑定的数据可以包含html标签，并且将以html标记的方式渲染出来。<标签v-html="数据对象属性"></标签>。解决插值表达式闪烁的问题，可以使用v-cloak指令，结合display样式来解决，先把Mustache模板表达式隐藏，直到获得数据才显示。v-cloak指令4.1.2属性节点绑定v-bind指令给属性绑定动态数所据。语法：<标签v-bind:属性名="表达式">或简写成<标签:属性名="表达式">4.1.3样式绑定（1）绑定class语法如下：<标签v-bind:class=”{class样式1：数据对象属性1,class样式2：数据对象属性2,……}”>上面的语法表示class样式1、class样式2等能否绑定取决于数据对象属性值的真假。（2）绑定style语法如下：<标签v-bind:style=”{样式属性：数据对象属性|样式属性值,……}”>4.1.4条件渲染（1）v-if指令和v-show指令v-if和v-show都能实现控制元素的显示隐臧。v-if指令使用语法：v-if="表达式",表达式的值是布尔值。v-if指令用于条件性地渲染一块内容（一个或多个元素）。这块内容只会在指令的表达式返回true值的时候被渲染显示，为false时元素删除转为注释。v-show指令使用语法：v-show="表达式",表达式的值是布尔值。根据表达式值的true/false来显示或隐藏元素。4.1.5列表渲染（1）v-for指令基于一个数组来渲染一个列表语法：<标签v-for=”iteminitems”>，其中items是源数据数组，item参数是被迭代的数组元素的别名，v-for还支持一个可选的第二个参数，语法<标签v-for="(item,index)initems">，第二个参数index即当前项的索引。（2）v-for指令基于一个对象来渲染一个列表语法：<标签v-for=”valueinobject”>，其中object是源数据对象，value参数是被迭代的对象中的属性值（键值）的别名。v-for还支持一个可选的第二个参数，语法<标签v-for="(value,name)inobject">，第二个参数name是对象中的属性名（键名）。v-for还可以用第三个参数index作为索引。语法<标签v-for="(value,name,index)inobject">。（3）v-for指令基于一个数据来渲染一个列表语法：<标签v-for=”countin数值”>，count值从1开始。4.1.6

v-pre指令和v-once指令v-pre指令不编译mustache模板表达式，可以用来显示原始Mustache标签。v-once指令只渲染元素和组件一次，这可以用于优化更新性能。4.2数据双向绑定在Web应用中，经常会使用表单向服务端提交一些数据，在Vue.js中可以使用v-model指令同步用户输入的数据到Vue实例data属性中。v-model指令在表单<input>、<textarea>等元素上创建双向数据绑定。语法：v-model=’数据对象属性’双向绑定修饰符（1）.lazyv-model.lazy只有在回车或者在输入框onblur（失去焦点）时，数据进行同步。（2）.numberv-model.number只能输入数字。3）.trimv-model.trim去除前后空格。4.3事件绑定采用v-on指令来绑定。无须在JavaScript中手动绑定事件。4.3.1监听事件语法格式有如下两种方式。（1）直接把JavaScript代码写在v-on指令中<标签v-on:事件名=‘JavaScript代码’>（2）v-on指令可以接收需要JavaScript函数的调用，分为无参数调用函数和有参数调用函数。无参：<标签v-on:事件名=‘函数名称’>，有参：<标签v-on:事件名=‘函数名称(参数)’>“v-on:事件名”也可简写成“@事件名”。4.3.2事件修饰符4.3.2事件修饰符（1）.stop修饰符阻止事件冒泡在绑定事件的后面加修饰符.stop，即可阻止事件冒泡。<div

@click.stop="func1($event)">（2）.capture修饰符所修饰的事件流为捕获事件流DOM事件流分为冒泡事件流和捕获事件流，默认是冒泡，.capture所修饰的事件流为捕获事件流。

<div

@click.capture="box"

:style="{border:'solid

2px

red'}">（3）.self修饰符只接收自触发事件.self所修饰的事件，只有在绑定该事件元素触发事件时，才会触发事件处理函数，该事件不被冒泡或捕获触发。（4）.prevent修饰符阻止默认事件在绑定事件的后面加修饰符.prevent，即可阻止默认事件。

<a

href=""

@click.prevent="func">不能访问百度</a>（5）.once修饰符所修饰的事件只生效一次（6）键盘事件修饰符按键修饰符可