Vue指令

指令带有前缀 v- 开头，以表示它们是 Vue 提供的特殊属性。

v-text和v-html

作用是设置标签的文本内容 默认写法会替换全部内容，使用差值表达式可以替换指定内容，内部支持写表达式

需要注意v-text会被当做文本处理，而v-html则是当作html结构被解析。

 

v-on

作用是为元素绑定事件，事件名不需要写 on 指令可以简写为@ 绑定的方法定义在 methods 属性中,可以传入自定义参数

methods:{
test(a,b){
alert(a);
}
}

v-model

作用是便捷的设置和获取表单元素的值，绑定的数据会和表单元素值相关联，绑定的数据表单元素的值双向数据绑定。

			
			
			
			
{{account}}

		

 

当我们在文本框输入值的时候会同步到下面的div中，而当点击测试按钮时，test()中的值会同步到文本框和div中实现双向绑定。

v-show和v-if

v-show:作用是根据真假切换元素的显示状态原理是修改元素的 display,实现显示隐藏指令后面的内容，最终都会解析为布尔值 值为 true 元素显示，值为 false 元素隐藏

v-if:作用是根据表达式的真假切换元素的显示状态,本质是通过操纵 dom 元素来切换,显示状态表达式的值为 true，元素存在于 dom 中，为 false，从 dom 中移除

			
			
aaa
			
bbb
			
bbbbbb
  
		

v-bind

作用是为元素绑定属性,完整写法是 v-bind：属性。简写的话可以直接省略 v-bind，只保留：属性名

data:{
imgSrc:'img/3.jpg' imgTitle:"这是一张图片"
}

v-for

作用是根据数据生成列表结构，数组经常和 v-for 结合，使用语法是（item，index）in 数据，可以实现动态生成表单

			

				

					
name
					
age
				
				

					
{{user.name}}
					
{{user.age}}