2-2 2.1.2常用的Vue指令ppt课件 Vue.js基础与应用开发实战（微课版）.pptx

2-2 2.1.2 常用的Vue指令教学课件 Vue.js基础与应用开发实战（微课版）2.1.2 常用的Vue指令先分析以下示例代码，认识几个Vue的指令。【示例】：demo020101.html代码如下：message message 第一次绑定的值：message var vm=new Vue(el:#app,data:message:图书详情,info:请登录 )对应的HTML代码被渲染为：图书详情 message 图书详情 第一次绑定的值：图书详情 请登录 请登录 1v-text用于更新元素的文本内容，如果要更新部分的文本内容，需要使用双大括号（）方式插值。例如：msg 2v-html用于更新元素的innerHTML。注意：文本内容按普通HTM插入，而不会作为Vue模板进行编译。如果试图使用v-html组合模板，可以重新考虑是否通过使用组件来替代。在网站上动态渲染任意HTML是非常危险的，因为容易导致XSS（Cross Site Scripting，跨站脚本）攻击。只在可信内容上使用v-html，不能用在用户提交的内容上。3v-show根据表达式之真假值，切换元素的显示或隐藏CSS属性。当条件变化时该指令触发过渡效果。4v-on用于绑定事件监听器，事件类型由参数指定，表达式可以是一个方法的名称或一个内联语句，如果没有修饰符也可以省略。v-on用在普通元素上时，只能监听原生DOM事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。在监听原生DOM事件时，方法以事件为唯一的参数。如果使用内联语句，语句可以访问一个$event property：v-on:click=handle(ok,$event)。从Vue2.4.0开始，v-on同样支持不带参数绑定一个事件/监听器键值对的对象。注意当使用对象语法时，是不支持任何修饰器的。5v-bind用于动态地绑定一个或多个属性，或一个组件prop到表达式。v-bind是单向数据绑定，而不是双向数据绑定，即不能实现视图驱动数据变化。在绑定class或style属性时，支持其它类型的值，例如数组或对象。在绑定prop时，prop必须在子组件中声明，可以使用修饰符指定不同的绑定类型。没有参数时，可以绑定到一个包含键值对的对象。注意此时class和style绑定不支持数组和对象。6v-model用于在表单的、元素上或者组件components上创建双向数据绑定，双向数据绑定是数据驱动视图的结果。它会根据控件类型自动选取正确的方法来更新元素。v-model本质上不过是语法糖，它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。该指令可以使用以下修饰符：.lazy：取代input监听change事件。.number：输入字符串转为有效的数字。.trim：输入首尾空格过滤。7v-slot用于提供具名插槽或需要接收prop的插槽，缩写为#。可选参数为：插槽名，默认值是default。8v-pre如果要跳过一个元素和它的子元素的编译过程，只用来显示原始大括号及标识符，则可以使用v-pre指令。跳过大量没有指令的节点会加快编译，可以减少编译时间。该指令不需要表达式。9v-cloak这个指令保持在元素上直到关联实例结束编译，和CSS规则如v-cloak display:none 一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。10v-once该指令表示只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这个指令可以用于优化更新性能，不需要表达式。This will never change:msg comment msg i11v-if根据表达式的值有条件地渲染元素，在切换时元素及它的数据绑定/组件被销毁并重建。如果元素是，将它的内容作为条件块。当条件变化时该指令触发过渡效果。当v-for和v-if一起使用时，v-for的优先级比v-if更高。12v-else为v-if或者v-else-if添加“else 块”，该指令的前一兄弟元素必须有v-if或v-else-if，该指令不需要表达式。例如：0.5 Now you see me Now you dont13v-else-if表示v-if的“else if 块”，该指仅的前一兄弟元素必须有v-if或v-else-if。可以链式调用。例如：ABC Not A/B/C14v-for该指令基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名，形式如下所示。item.text 另外也可以为数组索引指定别名，或者用于对象的键，形式如下所示。14v-forv-for的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，需要用特殊属性key来提供一个排序提示，如下所示：item.text 从2.6版开始，v-for也可以在实现了可迭代协议的值上使用，包括原生的Map和Set。不过应该注意的是Vue 2.x目前并不支持可响应的Map和Set值，所以无法自动探测变更。当和v-for和v-if一起使用时，v-for的优先级比v-if更高。快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！