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