Vue基础之Vue的模板语法

数据绑定

01 数据绑定最常见的形式就是使用插值表达式（两个大括号!）【也就是小胡子语法！mustache】

 
	
	
	

		
{{message}}
	
	
	

02 通过便用v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留这会影响到该节点上的其它数据绑定：

 	
		

			
{{message}}
		
		
	

如何输出原始的HTML

v-html

 
		

			未加v-html属性！
			

				
{{message}}
			
			加上v-html属性！
			

							

						
		
		
	

使用Vue的语法为HTML绑定属性！

v-bind

		

			
			

				v-bind:某一个标签具有的属性="某一个变量的值"
				栗子：
				v-bind:class"dynamicId" 就是为当前的标签绑定一个class属性！
			
		
		
		
	

在模板语法中使用JavaScript表达式

01 变量的算术运算！

		

			
{{number1 + 10}} 结果为11
			
{{ ok ? 'YES' : 'NO' }} 
			
三元表达式的判断! ok 是一个变量  类型是 布尔类型！要在data里面进行定义!
			

			
进行复杂的函数运算！
b
			在Vue的表达式中可以完全支持JavaScript的表达式!
			{{ message.split('').reverse().join('') }}

			

		
		

	

指令

指令（Directives）是带有v-前缀的特殊特性。指令特性的值预期是单个JavaScript表达式 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM

指令的参数!

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute：

指令的修饰符！

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

	
	
	
	
现在你看到我了
	
	...
	

		

			click me