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

爱被打了一巴掌 2022-01-12 12:29 221阅读 0赞

**文本**

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

<span>Message: {
       { msg }}</span>

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

<div id="app10">
    			<span v-once>这个将不会改变: {
       { message }}</span>
    			<br>
    			<span>这个将不会改变: {
       { message }}</span>
    		</div>
    		
    		<script>
    			var data={
    				message:'test'
    				}
    			var vm=new Vue({
    				el:"#app10",
    				data:data
    			
    			})
    			if(vm.$data===data){
    			data.message="2"	
    			}		
    			console.log(data.message)
    		  </script>

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

**原始 HTML**

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

<div id="app10">
    			<span v-once>这个将不会改变: {
       { message }}</span>
    			<br>
    			<span v-html="message"></span>
    		</div>
    		
    		<script>
    			var data={
    				message:"<span style='color:red'>This should be red </span>"
    				}
    			var vm=new Vue({
    				el:"#app10",
    				data:data
    			
    			})

执行结果是  
这个将不会改变:

< span style=‘color:red’>This should be red < /span>

This should be red

这个 span 的内容将会被替换成为属性值 rawHtml，直接作为 HTML——会忽略解析属性值中的数据绑定。注意，你不能使用 v-html 来复合局部模板，因为 Vue 不是基于字符串的模板引擎。反之，对于用户界面 (UI)，组件更适合作为可重用和可组合的基本单位。

注意:

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值

**特性**

Mustache 语法不能作用在 HTML 特性上，遇到这种情况应该使用 v-bind 指令：

上面的意思就是只能数据赋值,不能属性赋值,如果要属性赋值,则需要通过v-bind绑定.如果该属性是布尔类型的,并且值不是true(null,undefined,false),则该属性就会被删除,也就是根本就不渲染该属性了:

<div id="app10">
    			<button v-bind:disabled="message">Button</button>
    		</div>
    		
    		<script>
    			var data={
    				message:true
    				}
    			var vm=new Vue({
    				el:"#app10",
    				data:data
    			
    			})	
    		  </script>

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

**js表达式支持**

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

{
       { number + 1 }}
    
    {
       { ok ? 'YES' : 'NO' }}
    
    {
       { message.split('').reverse().join('') }}
    
    <div v-bind:id="'list-' + id"></div>

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

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

{
       { var a = 1 }}
    
    
    {
       { if (ok) { return message } }}

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