Vue-指令 v-text v-html v-model v-bind

1.v-text

<div id="app">
		<span v-text="msg"></span>
</div>

var app=new Vue({
			el: "#app",
			data:{
				msg: 'Hello Wrold',
			}
		})

最后不要忘了前面加上脚步引入

<script src="http://webapp.didistatic.com/static/webapp/shield/z/vue/vue/1.0.24/vue.min.js"></script>

v-text指令可以更新元素的文本内容（textContent），即会覆盖元素内原本的文本内容。看下面例子：

<div id="app">
		<span v-text="msg">123{{msge}}</span>
</div>

var app=new Vue({
			el: "#app",
			data:{
				msg: 'Hello Wrold',
				msgs: "welcome"
			}
		})

结果还是不变，元素内文本内容被指令内容覆盖了。

2.v-html

<div id="app2">
		<div v-html="html"></div>
</div>

var app2=new Vue({
			el: '#app2',
			data:{
				html:'<span class="cont">Hello Wrold</span>'
			}
		})

v-html指令可以更新元素的文档结构（innerHTML）,但是不支持数据绑定。

3.v-model

<div id="app3">
		<input type="text" v-model="msg" name="">
		<p>{{msg}}</p>
</div>

 var app3=new Vue({
        	el: '#app3',
        	data:{
        		msg: '请输入。。。'
        	}
        })

v-model指令用于在表单控件元素上面创建双向数据绑定，即当输入框内容改变时，下面p标签内容也随之改变。

4.v-bind

<div id="app4">
		<div v-bind:class="[classA,{classB: b,classC: c}]"></div>
</div>

 var app4=new Vue({
        	el:'#app4',
        	data:{
        		classA:'classA',
        		b:true,
        		c:false
        	}
        })

v-bind指令用于响应更新HTML特性，建一个或多个属性（attribute）,或者一个组件prop动态绑定到表达式。v-bind也可以省略如下：

<img v-bind:src="imgsrc">
<img :src="imgsrc">

在绑定class或style时，支持其他类型的值，如数组或对象。