04第3章Vue.js内置指令第1节基本指令

第3章：Vue.js内置指令《Vue应用程序开发》

010203005Part13.1基本指令Part23.2v-bind指令Part33.3v-model指令Part43.4章节案例目录CONTENTS第3章Vue.js的内置指令什么是指令呢？在前面章节中我们用到的v-model就是一个指令。Vue.js的指令是以“v-”开头的HTML特性，它们作用于HTML元素。指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML标签属性。内置指令包括哪些指令呢？v-bind、v-model也是内置指令，用法复杂一些，单独讲解。3.1基本指令3.1.1v-text和v-html指令v-text主要用来更新textContent，将实例中的数据当成纯文本输出，可以等同于JavaScript的text属性。v-html会将实例中的数据当成HTML标签解析后输出，它等同于JavaScript的innerHtml属性。3.1基本指令<divid="app"><pv-text="html"></p><pv-html="html"></p></div><scriptsrc="vue.js"></script><script>Vue.createApp({data(){return{html:"<inputtype='date'>"}}}).mount('#app')</script>3.1.1v-text和v-html指令3.1基本指令3.1.2v-cloak指令v-cloak指令是用来保持在元素上直到关联实例结束时进行编译。在页面加载时会闪烁，先显示:{{message}}，然后才会编译为：helloworld!在页面加载慢的时候闪烁情况会尤为明显。V-cloak指令不需要表达式，经常和CSS的“display：none；”配合使用。 [v-cloak]{ display:none; }3.1基本指令v-once指令在日常开发中用的很多，只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。v-once指令也不需要表达式。3.1.3v-once指令<divid="app"><pv-once>原始值：{{msg}}</p><p>后面的：{{msg}}</p><inputtype="text"v-model="msg"/></div><scriptsrc="vue.js"></script><script>Vue.createApp({data(){return{msg:"今天天气很好！"}}}).mount('#app')</script>3.1基本指令v-if可以实现条件渲染，Vue会根据表达式的值的真假条件来渲染元素。<av-if="ok">yes</a>如果属性值ok为true，则显示。否则，不会渲染这个元素。v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。3.1.4v-if、v-else和v-show指令<divid="app"><pv-if="status===1">当status是1时显示该行</p><pv-else-if="status===2">当status是2时显示该行</p><pv-else>否则显示该行</p></div><scriptsrc="vue.js"></script><script>Vue.createApp({data(){return{status:1}}}).mount('#app')</script>3.1基本指令v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回truthy值的时候被渲染。v-show不管条件是否成立，都会渲染html。检查页面元素发现：v-if是注释，v-show是设置CSS样式display的值为none。3.1.4v-if、v-else和v-show指令3.1基本指令v-on指令是来绑定事件监听器的，类似原生JavaScript的onclick的用法。这样我们就可以做一些交互了。v-on:click可以简写成@click，以后都会使用这种简写方法，不再另行说明。v-on可以绑定很多javascript事件。3.1.5v-on指令3.1基本指令Vue支持以下修饰符<!--阻止单击事件冒泡--><av-on:click.stop="doThis"></a><!--提交事件不再重载页面--><formv-on:submit.prevent="onSubmit"></form><!--修饰符可以串联--><av-on:click.stop.prevent="doThat"></a><!--只有修饰符--><formv-on:submit.prevent></form><!--添加事件侦听器时使用事件捕获模式--><divv-on:click.capture="doThis">...</div><!--只当事件在该元素本身（比如不是子元素）触发时触发回调--><divv-on:click.self="doThat">...</div><!--点击事件将只会触发一次--><av-on:click.once="doThis"></a>v-for指令用于遍历数组和对象，以及迭代整数，其表达式需要结合in来使用,代码如下。3.1.6v-for指令3.1基本指令<divid="app"><ul><liv-for="clothinclothes">{{}}:${{cloth.price}}</li></ul></div><scriptsrc="vue.js"></script><script>Vue.createApp({data(){return{clothes:[{name:'衬衫',price:'180',},{name:'外套',price:'200',},{name:'裤子',price:'380'}]}}}).mount('#app');</script>在v-for表达式中，clothes是数组，cloth是当前数组元素的别名，循环生成的每个<li>标签内部都能访问到与之对应的当前cloth数据。v-for表达式支持将一个可选参数作为当前项的索引，代码如下。3.1基本指令<divid="app"><ul><liv-for="(cloth,index)inclothes">{{index}}-{{}}:${{cloth.price}}</li></ul></div><scriptsrc="vue.js"></script><script>Vue.createApp({data(){return{clothes:[{name:'衬衫',price:'180',},{name:'外套',price:'200',},{name:'裤子',price:'380',}]}}}).mount('#app')</script>v-for指令除了可以遍历数组，还可以遍历对象的属性，代码如下。3.1基本指令<divid="app"><ul><liv-for="valueinuser">{{value}}</li></ul></div><scriptsrc="vue.js"></script><script>Vue.createApp({data(){return{user:{firstName:'John',lastName:'Doe',age:30}}}}).mount('#app')</script>v-for指令遍历对象属性时，有两个可选参数，分别是key和index，代码如下。3.1基本指令<divid="app"><ul><liv-for="(value,key,index)inuser">{{index}}-{{key}}:{{value}}</li></ul></div><scriptsrc="vue.js"></script><script>Vue.createApp({data(){return{user:{firstName:'John',lastName:'Doe',age:30}}}}).mount('#app')</script>Vue包含一组观察数组的变异方法，所以它们也将会触