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

1.v-text

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

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

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

		123{{msge}}

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

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

2.v-html

var app2=new Vue({
			el: '#app2',
			data:{
				html:'Hello Wrold'
			}
		})

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

3.v-model

		
		
{{msg}}

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

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

4.v-bind

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

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

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