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

Vue.js框架应用Vue.js指令目

录Vue.js指令概述Vue.js指令详解表单输入绑定目

录Vue.js指令概述Vue.js指令详解表单输入绑定Vue.js指令概述

一、Vue.js的指令是带有

v-前缀的特殊属性，它们作用于HTML元素上。<h1v-bind:title=”mytitle”></h1>Vue.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()">...</span>Vue.js指令详解三、v-on指令前面我们绑定了元素的内容和属性，在前端开发中另外一个非常重要的特性就是交互。当我们需要和用户进行各种各样的交互时，就必须监听用户发生的事件，比如单击、拖拽、键盘事件等。在Vue.js中监听事件使用v-on指令。<!--方法处理函数--><buttonv-on:click="doThis"></button><button@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="isShow">Vue.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="isShow">Vue.jsisawesome!</h1>它们都是根据一个条件决定是否显示元素2.v-show和v-if的区别v-show的元素会始终被渲染并保留在DOM中，v-show只是切换了该元素的css属性的display。v-if是“真实的”按条件渲染，因为它确保了在切换时，条件区块内的事件监听器和子组件都会被销毁与重建。v-if也是惰性的，如果在初次渲染时条件值为false条件区块不会被渲染，只有当条件首次变为true时它才被渲染。此外，v-show不支持在<template>元素上使用，也不能和v-else搭配使用。总的来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换元素使用v-show较好，如果运行时条件很少改变则使用v-if更合适。目

录Vue.js指令概述Vue.js指令详解表单输入绑定表单输入绑定一、v-model指令在前端处理表单时，我们常常需要将表单输入框的内容同步给Vue中相应的变量。Vue提供了v-model指令可以帮助我们简化操作，更容易地实现双向数据绑定。示例代码如下：<inputv-model="text">除了文本框，v-model还可以用于各种不同类型的输入，如<textarea>、<select>元素等。它会根据所应用的元素自动使用对应的DOM属性和事件组合。注意，v-model会忽略任何表单元素上初始的value、checked或selected属性值。它会将当前绑定的Vue数据视为数据的唯一来源，所以应该在Vue实例的data选项来声明这些初始值。表单输入绑定二、v-model的修饰符1.lazy默认情况下，v-model会在每次input事件后更新数据，这样频繁更新是没有必要的。通过添加lazy修饰符可以将这种方式转变为在每次change事件后才更新数据。示例代码如下：<inputv-model.lazy="msg"/>2.number用户在表单控件中输入的数据默认是字符串类型，如果想自动将这个值转换为数字类型，可以