vue学习-02-插值使用

插值：
1、v-text
2、v-html
3、v-once
4、v-pre
5、v-cloak

v-text

和{{}}一样可以渲染数据。区别：

var app = new Vue({
			el:'#app',
			data:{
				v_once: 'v-once',
				v_html: 'v-html: <a href="http://www.baidu.com">百度</a>',
				v_text: 'v-text: v_text',
				v_pre: 'v_pre',
				v_cloak: 'v_cloak',
				name: "张三"
			}
		});

	<!-- v-text:与{{}}效果相同 .不过在这里会覆盖掉aaa的值-->
	<h2 v-text="v_text">v-text: aaaa</h2>
	<h2>{{v_text}}: aaaa</h2>

最终结果：
v-text: v_text
v-text: v_text：aaaa

v-html

	v_html: 'v-html: <a href="http://www.baidu.com">百度</a>',

	<!-- v-html:解析html标签进行展示 -->
	<h2 v-html="v_html">v-html: {{v_html}}</h2>

结果：
v-html：百度

v-once

	v_once: 'v-once',

	<!-- v-once:数据只会渲染一次 -->
	<h2 v-once>v-once: {{v_once}}</h2>

v_once只会渲染一次，即使v_once发生变化也只会显示第一次渲染的值

v-pre

	v_pre: 'v_pre',

	<!-- v-pre:不进行表达式解析-->
	<h2 v-pre="v_pre">v-pre: {{v_pre}}</h2>

{{}}不会起作用，就本身的字符串。结果：
v-pre: {{v_pre}}

v-cloak

	v_cloak: 'v_cloak',

	<!-- 当网速较慢，Vue.js 文件还没有加载完时，在页面会
		显示{{v_cloak}}的字样，直到Vue创建实例、编译模版时，DOM才
		会被替换，{{}}才会被渲染，所以这个过程屏幕是有闪动的，
		需要配合CSS可以解决这个问题。就不会在网页中出现{{}}插值字符串
		，只有当被渲染后才会显示-->
		<h2 v-cloak>v-cloak: {{v_cloak}}</h2>
		<!-- 当插值被渲染后会自动移除掉v-cloak属性 -->
		<style type="text/css">
			[v-cloak] {
				display: none
			}
		</style>

这样就避免了在网页中显示{{v_cloak}}字符串的问题