8.插值---(vue入门 文档学习记录)

文本

数据绑定最经常用的就是"Mustache"语法(两个大括号)的文本插值,注意这里特别标明只是文本插值,如果是html格式也会只显示文本.

Message: {{ msg }}

该语法中{{message}}的message值是响应式的,不管什么时候改变页面都会重新渲染,我们可以只渲染一次,也就是使其不进行重新渲染(但是值是变了的),可以通过v-once 标签实现.

			这个将不会改变: {{ message }}
			

			这个将不会改变: {{ message }}
		
		
		

我们可以看到 显示的是: “这个将不会改变: test,这个将不会该表: 2”,但是控制台打印的是2.
说明这个标签只是使该标签只进行一次渲染,并不是值没有变.与Object.freeze()方法有本质区别.

原始 HTML

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

			这个将不会改变: {{ message }}
			

			
		
		
		

注意:
布尔类型中除了false,null,undefined 表示否,其他包括’‘都表示true,也就是说上面的代码中message的值就算是’’,也会被认为是true

js表达式支持

迄今为止，在我们的模板中，我们一直都只绑定简单的属性键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
例如:

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

那么问题来了,上述最后一句是怎样用的?TODO

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

{{ var a = 1 }}


{{ if (ok) { return message } }}

模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。