vue指令:v-once,v-pre,v-html,v-text

1.v-once
告诉浏览器,只渲染该元素或组件一次.之后不会跟着数据的变化而发生改变.

<div id="app">
	<h2 v-once>{{info}}</h2>
	<h2>{{info}}</h2>v-pre
</div>
<script src="../js/vue.js"></script>
<script>
	let app = new Vue({
		el:'#app',
		data:{
			info:'learnVue'	
		}
	});
<script>

首次打开页面,显示效果如下.

当在控制台将app.info的值改为study时,第一个h2的值没有发生改变,第二个h2的值发生了改变,效果如下.

2.v-pre
当元素里有v-pre,那么该元素及其子元素会跳过编译过程,其中的内容不会被解析.
Mustache 标签不会被解析,会以纯文本形式展示.

<div id="app" v-pre>
	{{info}}
	<p>{{name}}</p>
</div>
<script src="../js/vue.js"></script>
<script>
	let app = new Vue({
		el:'#app',
		data:{
			info:'learnVue',
			name:'lisa'
		}
	});
</script>

效果图如下:

3.v-html
会对数据进行解析.将html标签解析后,输出真正的html.如果数据本身是html格式,用这个指令.

<div id="app" v-html="url"></div>
<script src="../js/vue.js"></script>
<script>
	let app = new Vue({
		el:'#app',
		data:{
			url:'<a href="https://www.baidu.com/">百度一下</a>'
		}
	});
</script>

效果图:

4.v-text
将数据显示在页面中,与Mustache{{}}类似

<div id="app" v-text="info"></div>
<script src="../js/vue.js"></script>
<script>
	let app = new Vue({
		el:'#app',
		data:{
			info:"learnVue"
		}
	});
</script>

效果图如下:

但是,v-text一般不用,不够灵活.会覆盖元素里原有内容.
eg:

<div id="app" v-text="info">helloWorld</div>

上面代码最终还是会显示"learnVue", helloWorld被覆盖掉.