1. v-text = ‘message’

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

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

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

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

代码演示

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

2. v-html = ‘message’

• 主要作用是设置标签内的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>

3. v-if & v-else-if & v-else

• 类似于逻辑结构，根据条件判断选择性的渲染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>

4. v-show

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

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

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

代码演示

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

5. v-for

• 根据传入的数据生成对应的列表结构，数组经常和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>

6. v-on

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

• 绑定的方法写在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>

7. v-model

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

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

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

代码演示

<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>

8. v-bind

• 设置元素的属性（比如：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>

9. v-cloak

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

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

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

CSS代码演示

[v-cloak]{
	display:none;
}

HTML代码演示

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

10. v-pre

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

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

代码演示

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

11. v-once

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

• 如下代码，开始显示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>