【Vue】Re02 指令：第一部分
一、v-once指令
用于固定一次性赋值，后续Vue实例的赋值更改将不再对v-once指令的元素有效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- 列表显示 --> <div id="vue-application"> <h3>Vue v-once指令</h3> <p>没有加入v-once属性，可以随意更改 -> {{variable}} </p> <p v-once>加入了v-once属性，不可以随意更改 -> {{variable}} </p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> let v = new Vue({ el : '#vue-application', data : { variable : '这是测试v-once的变量' } }); </script> </body> </html>
二、v-html指令
用于将属性数据中的文本字符可以被浏览器解析到HTML代码
说简单点，可以被转义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="vue-application"> <h3>Vue v-html指令</h3> <p>没有加入v-html指令，不会被浏览器解析 -> {{variable}} </p> <p >加入了v-html指令，会被浏览器解析 -> <span v-html="variable"></span> </p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> let v = new Vue({ el : '#vue-application', data : { variable : '<h2>这是测试v-once的变量</h2>' } }); </script> </body> </html>
三、v-text指令
仅用于输出显示纯文本内容，HTML代码将不会被转义处理
一般怎么使用，因为我们还希望动态的来处理，而v-text只能一次性处理
所以一般采取mustache语法结合其他固定文本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="vue-application"> <h3>Vue v-html指令</h3> <p>原始mustache语法等同于v-text -> {{variable}} </p> <p>加入了v-text指令，不会会被浏览器解析 -> <span v-text="variable"></span> </p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> let v = new Vue({ el : '#vue-application', data : { variable : '<h2>这是测试v-once的变量</h2>' } }); </script> </body> </html>
四、v-pre指令
用于越过mustache语法不注入属性数据，仅显示元素原本的文本内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./../dependencies/vue-min.js"></script> </head> <body> <!-- 跳过该元素和子元素的Vue编译 --> <div id="vue-application"> <h3>Vue v-html指令</h3> <p>无pre编译渲染 {{varA}}<span>{{varB}}</span></p> <p v-pre >有pre编译渲染 {{varA}}<span>{{varB}}</span></p> </div> <script type="text/javascript"> let v = new Vue({ el : '#vue-application', data : { varA : '变量A', varB : '变量B', } }); </script> </body> </html>
五、v-cloak指令
cloak意思斗篷，遮挡之意，在Vue应用中是
解决浏览器响应过慢，vue来不及渲染出现mustache的标记【插值闪烁的问题】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./../dependencies/vue-min.js"></script> <style type="text/css"> /* 解决浏览器响应过慢，vue来不及渲染出现mustache的标记 */ [v-cloak] { display: none; } </style> </head> <body> </body> </html>
六、v-bind指令
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="vue-app"> <h3>动态v-bind测试</h3> <p> <a v-bind:href="newLink">v-bind 链接测试</a> </p> <p> <a :href="newLink">v-bind 链接缩写语法测试</a> </p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> let vm = new Vue({ el : '#vue-app', data : { newLink : 'https://www.baidu.com' }, filters : { customFilter(v) { if ( 10 <= v && v <= 100) { return '非法的值' } return v; } } }); </script> </body> </html>
动态绑定class属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .act { color: red; } .line { font-size: 50px; } </style> </head> <body> <div id="app"> <p :class="sss">DynamicBinding1</p> <!-- v-bind 动态绑定的方式 <tag :class="{ 类名1 : boolean, 类名2 : boolean }">文本值</tag> --> <p :class="{act : true, line : false}">DynamicBinding2</p> <!-- 利用data选项属性可以进行动态渲染 --> <p :class="{act : activateAct, line : activateLine}">DynamicBinding3</p> <!-- 还可以将已有的class属性进行合并处理 --> <p class="aaa" :class="{act : activateAct, line : activateLine}">DynamicBinding4</p> <!-- 如果太长不便于阅读，可以使用函数进行设置 要注意assignmentCssClass是需要添加括号表示一个函数，且无参注入 --> <p class="aaa" :class="assignmentCssClass()">DynamicBinding5</p> <!-- 使用数组语法进行渲染处理 --> <p class="aaa" :class="assignmentCssClassByList()">DynamicBinding6</p> <!-- 使用数组语法进行渲染处理,结合methods赋值 --> <p> <button @click="changeCssClass">点击取消样式绑定</button></p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> const vm = new Vue({ el : '#app', data : { sss : 'act', // 用于设置h3标签的class属性，act和line的布尔属性 activateAct: true, activateLine : true }, methods : { changeCssClass : function () { this.activateAct = !this.activateAct; this.activateLine = !this.activateLine; }, assignmentCssClass : function () { return { // 交给函数进行赋值处理 act : this.activateAct, line : this.activateLine } }, assignmentCssClassByList : function () { return [ 'bbb', 'ccc', 'ddd', 'eee', this.activateAct, this.activateLine ] } } }); </script> </body> </html>
动态绑定css样式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!-- v-bind 动态绑定css语法 <tag :style="{ 样式名称 : 值 }" ></tag> --> <h3 :style="{ fontSize : '28px', color : 'red' }">{{message}}</h3> <!-- 动态化 --> <h3 :style="{ fontSize : pixel }">{{message}}</h3> <!-- 或者是经过拼接处理 --> <h3 :style="{ fontSize : pixelNum + 'px' }">{{message}}</h3> <!-- 使用数组结合对象进行处理 --> <h3 :style="[styleObj01, styleObj02]">{{message}}</h3> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> const vm = new Vue({ el : '#app', data : { message : 'dynamic-css', pixel : '20px', pixelNum : 100, styleObj01 : { background : 'yellow', color : 'green' }, styleObj02 : { fontSize : '28px', } } }); </script> </body> </html>
结合v-for指令结合的案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .color { color : red; } </style> </head> <body> <div id="app"> <!-- 实现点击任意一个列表项进行样式更改--> <ul> <li v-for="(item, index) in list" :class="{color : current == index}" @click="changeColor(index)">{{index}} {{item}}</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script type="text/javascript"> const vm = new Vue({ el : '#app', data : { current : -1, // 默认位置为0，所以不能取值0而是-1 list : [ '列表项1', '列表项2', '列表项3', '列表项4', '列表项5', ], }, methods : { changeColor : function (i) { this.current = i; } } }); </script> </body> </html>
