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

第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.6v-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事件修饰