Vue.js前端开发框架应用（微课版） 课件 第三章 Vue.js指令.pptx

Vue.js框架应用Vue.js指令Vue.js指令概述目录Vue.js指令详解表单输入绑定Vue.js指令概述目录Vue.js指令详解表单输入绑定Vue.js指令概述一、Vue.js的指令是带有v-前缀的特殊属性，它们作用于HTML元素上。h1v-bind:title=”mytitle”/h1Vue.js前端框架包含了一系列的内置指令。将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为。我们也可以将指令看作是特殊的HTML标签属性。二、一个完整的指令语法formv-on:submit.prevent=onSubmit.../form其中“v-on”是指令名称，“submit”是参数，“prevent”是修饰符，“onSubmit”是值。Vue.js指令概述目录Vue.js指令详解表单输入绑定Vue.js指令详解一、Vue.js基本内置指令v-once指令：使用v-once指令的目的是只渲染元素一次，即使之后该元素中使用的数据有更新，它都不会被渲染，即这个元素中的数据都被当作静态内容跳过。这个指令用于优化更新性能。v-text指令：主要用来更新元素文本内容，将实例中的数据作为纯文本输出，等同于DOM中的innerText属性。v-html指令：会将实例中的数据当作HTML标签解析后输出，等同于DOM中的innerHTML属性。v-pre指令：在一个元素内使用v-pre指令，则该元素的所有Vue.js模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。v-cloak：指令用于显示当数据未解析完成时页面元素渲染的样式。v-memo：指令的值是一个数组，它可以包含多个数据。这个指令会缓存使用它的元素模板的子树。当模板中的数据更新时，它会将数组里包含的数据的每个值作比较，如果每个值都没有变化，即当前值与最后一次的渲染相同，那么整个子树的更新将被跳过。Vue.js指令详解二、v-bind指令前面讲的一些指令主要是将值插入到模板内容中，但是除了内容需要动态来决定外，某些属性我们也希望动态来绑定。比如动态绑定a元素的href属性，动态绑定img元素的src属性。双大括号不能在html属性中使用，想要响应式地绑定一个属性，应该使用v-bind指令。v-bind指令的参数是要绑定的html属性名称，值是绑定的数据名或者表达式，也可以是一个函数。!--绑定src属性--imgv-bind:src=imageSrc/img:src=imageSrc/!—绑定值是一个表达式--div:id=`list-${id}`/div!—绑定值是一个调用函数-span:title=getTitle().../spanVue.js指令详解三、v-on指令前面我们绑定了元素的内容和属性，在前端开发中另外一个非常重要的特性就是交互。当我们需要和用户进行各种各样的交互时，就必须监听用户发生的事件，比如单击、拖拽、键盘事件等。在Vue.js中监听事件使用v-on指令。!--方法处理函数--buttonv-on:click=doThis/buttonbutton@click=doThis/button在后面一章我们将详细讲解事件监听的方法。Vue.js指令详解四、v-for指令v-for指令用来遍历数组、对象，它类似于for循环可以遍历一组数据，并且基于这些原始数据将多次渲染元素或模板。v-for的基本格式:v-for=“itemin数据”item是我们给遍历对象的每项元素起的一个别名，这个别名可以自定义；数据通常是来自data或者prop，也可以是其他方式。Vue.js指令详解五、v-if指令v-if指令可以实现条件渲染，Vue.js会根据表达式的值的真假来渲染元素。h1v-if=isShowVue.jsisawesome!/h1上面的代码中，h1元素只有在指令的表达式返回真值时才被渲染。也可以使用v-else指令为v-if添加一个“else区块”。一个v-else元素必须跟在一个v-if或者v-else-if元素后面，否则它将不会被识别。Vue.js指令详解六、v-show指令1.v-show指令和v-if指令的用法基本上是一样的。Vue.js会根据表达式的值的真假来渲染元素。h1v-show=isShowVue.jsisawesome!/h1它们都是根据一个条件决定是否显示元素2.v-show和v-if的区别v-show的元素会始终被渲染并保留在DOM中，v-show只是切换了该元素的css属性的display。v-if是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。v-if也是惰性的，