vue - 插值操作（mustache语法及常用指令）

mustache语法

mustache语法又叫双大括号语法，用于在页面中插入数据

data(){
	message:'mustache!',
	firstName: 'one',
    lastName: 'two',
    counter: 100
}

<h2>{{message}}</h2>

也可以拼装

<h2>{{message}} , hello</h2>

也可以些简单的表达式

<h2>{{firstName + lastName}}</h2>
<h2>{{firstName + ' ' + lastName}}</h2>
<h2>{{firstName}} {{lastName}}</h2>
<h2>{{counter * 2}}</h2>

v-once指令

vue是响应式的，页面的值可以根据控制室的值来改变
但是在某些时候，我们可能不需要这种改变，这时我们就可以使用v-once

1. v-once指令后面不需要跟任何表达式
2. v-once指令表示元素和组件只渲染一次，不会跟随控制室里数据的改变而改变

data : {
        message : '你好呀'
      }

<div id="app">
    <h2>{{message}}</h2>
    <h2 v-once>{{message}}</h2>
  </div>

在控制台修改信息

v-html指令

1. v-html指令往往后面会将data中的数据名作为string类型跟上
2. v-html指令会将数据中的html代码解析出来并进行渲染

在某些情况下，我们从服务器本身请求过来的就是html代码
例如：

data : {
        url : '<a href=www.baidu.com>百度一下</a>'
      }

如果我们直接输出，会输出html代码格式

<h2>{{url}}</h2>

如果想要解析代码并在页面上渲染，可以使用v-html指令

<h2 v-html='url'></h2>

v-text指令

v-text指令和mustache语法的用法比较相似，都是将数据在页面中显示出来
v-text通常接受一个string类型

data : {
        message : '你好啊'
      }

// mustache语法
<h2>{{message}}</h2>
// v-text指令
<h2 v-text='message'> </h2>

v-text指令缺点：不灵活，v-text中的内容会将标签中原本的内容覆盖掉

<h2 v-text='message'>vue</h2>

v-pre指令

v-pre指令会跳过这个元素和它子元素的编译过程，用于显示原本的mustache语法

data: {
        message: '你好啊！'
      }

<div id="app">
    <h2>{{message}}</h2>
    <div v-pre>{{message}}
      <div>{{message}}</div>
    </div>
  </div>

v-cloak指令

在某些情况下，浏览器可能会直接显示出未编译的mustache标签，这时可以使用v-cloak指令，在数据没渲染出来时，使页面保持空白

setTimeout(function () {
      const app = new Vue({
        el: "#app",
        data: {
          message: '你好啊！'
        }
      })
    }, 1000)

<div id="app" v-cloak>
	<h2>{{message}}</h2>
</div>