Vue学习--模板语法-插值

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。

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

	
		
		
	
	
	
		

			{{msg}}
		
	
	

展示，后边赋值chage并未渲染到模板页

 

原始HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

	
		
		
	
	
	
			

				
				
Using mustaches: {{ rawHtml }}
				
				
Using v-html directive: 
			
		
		
	

显示结果页面

Attribute(属性)

Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：
格式：
v-bind:属性=“变量”

	
		
		
	
	
		
			

				

					test...
				
			
		
		
		

	

 显示结果页面

使用JavaScript 表达式

Vue.js 都提供了完全的 JavaScript 表达式支持。

	
		
		
	
	
		
			

				
				
{{number + 1}}
				
				
{{ ok ? 'YES' : 'NO' }}
				
				
{{ message.split('').reverse().join('') }}
			
		
		

	

 显示页面