Vue语法简介（入门推荐）

1.Mustache（双大括号）:

2.v-once：该指令后面不需要跟任何表达式（v-for后面接表达式）,该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。

3.v-html：v-html会将数据当html标签解析后输出。

4.v-text：

等效于

{{message}}

，但相比于Mustache，它不够灵活。

5.v-pre：如

{{message}}

，标签显示结果就是它标签本身的内容，即{{message}}。

6.v-cloak：解决屏幕闪动的好方法。

7.v-bind：基本属性绑定和动态绑定（对象或数组），将对应的图片或地址等数据放入data中，使用v-bind将数据引用到对应的标签中，如，其中data数据如下：

v-bind语法糖（简写方式）：可写为。

8.计算属性：其本质就是属性，包含setter和getter，下面是两种操作实例：

标签的内容：

对应vue代码：

一般为只读属性，所以可以省略set，写成如下形式：

9.v-on（缩写：@）：绑定事件监听器。一些处理事件的修饰符（可混合使用）：

（1）.stop阻止冒泡事件的发生

（2）.prevent阻止默认事件的发生，如不用.prevent,下面标签的submit指令会调用方法后直接提交服务器 ，即控制台显示的数据会闪过

（3）.{keycode|keyAlias}特定键盘键触发回调

（4）.once只触发一次回调

10.v-show:判断属性。

与v-if区别：v-if在条件为false时，包含v-if指令的元素不会出现在dom中；v-show在条件为false时，只是给元素添加一个行内样式：display:none，元素仍然在dom里面；

注意：当需要在显示与隐藏之间切换频率较高的时候，应该使用v-show（性能更高），当次数较少时通常使用v-if。

11.v-for:循环遍历操作。语法：

（1）遍历数组：v-for="(m,index) in movies"  //m是新定义的变量名称，index是对应数组的下标，movies是已有的数组名。Index可省略。

（2）遍历对象：

{{item}}

  //如果只获取一个值，那么取得的值是value，key可以省略。

12.v-model：实现双向绑定（等同于v-on和v-bind一起使用，实现实时显示）。

双向绑定的使用案例：

		


	

			
			
			

			
文本框输入内容：{{message}}
			


	

			
				
					男
				
				
					女
				
				
你选择的性别是：{{sex}}
			

	

			
				同意协议  
				next
				

				
你已经同意相关协议

			
			


	

			
				羽毛球
				篮球
				足球
				乒乓球
				
你的爱好是：{{hobbies}}
			
			

	

			
				西瓜
				橘子
				香蕉
				哈密瓜
			
			
你选择的水果是：{{fruit}}

	

			
				ctrl+单击可复选
				刘德华
				梁朝伟
				黎明
				库里
			
			
你选择的明星是：{{stars}}

			
			
				{{item}}
			

	

			
			

				
				
{{message}}
			
			
			

				
				
{{numberBind}}-{{typeof numberBind}}
			
			
			

				
				
你输入的名字是：{{name}}