Vue中所有的v-指令

• 主要作用是设置标签内的文本为message

• 一般来说会用message取代标签内的所有内容

• 可以用{{message}}插值表达式代替v-text

注：message可以是文本，变量，表达式

代码演示

<div id='app'> 	<h2 v-text = 'message'></h2> 	<h3>{{message}}</h3> </div> 

• 主要作用是设置标签内的HTML结构，类似于JS中的 innerHTML

• v-html会把字符串解析为HTML代码（区别于v-text的文本）

• 解析文本内容使用v-text,需要解析HTML结构使用v-HTML

代码演示

<div id='app'> 	<p v-html = 'message'></p> </div>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <script> 	var app = new Vue({     	el: "#app",      	data:{ 			message:"<strong> 这个就是v-html</strong>" 		} 	}) </script> 

• 类似于逻辑结构，根据条件判断选择性的渲染DOM结构

• 表达式为true则渲染该节点的DOM结构，反之则反之

• 频繁切换可以用v-show，减小切换损耗

代码演示

<div id = "app">     <p v-if="isShow">我是一个p标签</p>     <p v-else-if="表达式">我是一个p标签</p>     <p v-else">我是一个p标签</p> </div> 

• 根据表达式的布尔值，通过style切换元素的display属性进行显示与隐藏

• 表达式为true则显示该节点，反之则反之

• 数据改变之后，对应元素的显示状态会同步更新

代码演示

<div id = "app">     <img src="地址" v-show="isShow">     <img src="地址" v-show="age>=18"> </div> 

• 根据传入的数据生成对应的列表结构，数组经常和v-for结合使用

• 语法是v-for="(item,index) in List" 或 v-for=“item in List”,其中item代表每一项，index代表索引

• 数组长度的更新会同步到页面上，是响应式的

代码演示

<div id="app"> 	<ul>     	<li v-for="item in arr">元素：{{item}}</li>     	<h2 v-for="(item,index) in student">{{index}}.{{item.name}}</h2> 	</ul> </div> 

• 为元素绑定事件，可以用简写为@，事件绑定的方法写成函数调用的形式，可传入自定义参数及事件修饰符

• 绑定的方法写在methods属性中，方法内部可以通过this关键字访问data中的数据

• 事件的后面跟上修饰符，可以对事件进行限制，事件修饰符有多种，.enter 可以限制触发的按键为回车

代码演示

<div id = "app">     <input type="button" @click="doIt('nb',666)"     <input type="text" @keyup.enter="sayHi"; </div>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <script> 	var app = new Vue({    	 	el: "#app",     	methods:{ 			doIt:function(p1,p2){} 			sayHi:function(){} 		} 	}) </script> 

• 获取和设置表单元素的值（双向数据绑定）

• 绑定的数据会和表单元素值相关联

• 绑定的数据对应表单元素的值

代码演示

<div id = "app">     <input type="text" v-model="message"> </div>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <script> 	var app = new Vue({     	el: "#app",      	data:{ 			message:"这就是input标签的value值" 		} 	}) </script> 

• 设置元素的属性（比如：src,title,class），

• 完整格式为：v-bind:属性名 = 表达式，简写的话可以直接省略v-bind，只保留 :属性名

• 需要动态的增删class建议使用对象的方式

代码演示

<div id = "app">     <img v-bind:src="imgSrc">  //正常格式     <img :src="imgSrc"> //简写格式     <img :src="imgSrc" :class="{active:isActive}"> //对象的方式增删class </div>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <script> 	var app = new Vue({     	el: "#app",      	data:{ 			imgSrc:图片地址, 			isActive:false 		}	 	}) </script> 

• 可以解决加载Vue页面时，页面的闪烁问题

• 在使用插值表达式时，在页面没有及时地返回数据时，页面会闪烁"{{message}}"

• 需要在全局样式下添加如下样式，需要在HTML节点上添加 v-cloak 属性

CSS代码演示

[v-cloak]{ 	display:none; } 

HTML代码演示

<div id="app" v-cloak>   {{message}} </div> 

• 可以跳过Vue的编译，直接显示原始值，

• 如下代码会直接显示"{{messag}}"

代码演示

<div v-pre>{{message}}</div> 

• 只在第一次渲染时执行，在之后的执行中都会被当作静态内容，跳过之后所有的渲染过程

• 如下代码，开始显示1，点击后显示2，再次点击不会改变前端页面数值

代码演示

<div id = "app"> 	<h1>{{cnt}}</h1>     <button @click='cnt++'>点我cnt+1</button> </div>  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  <script> 	var app = new Vue({     	el: "#app",      	data:{ 			cnt=1 		}	 	}) </script>