2.Vue的模板语法(插值操作)-简单易懂

1.插值操作

1.1 Mustache语法

Mustache语法就是双大括号{{message}},数据是响应式的，但并非双向绑定。

基本使用

<div id="app">
  {{message}}
  <!--  mustache语法中，不仅仅可以直接写变量，也可以写简单的表达式-->
  <h2>{{lastName+firstName}}</h2>
  <h2>{{lastName+' '+firstName}}</h2>
  <h2>{{lastName}} {{firstName}}</h2>
  <h2>{{counter * 2}}</h2>
  <!--  对标签不进行转义-->
  <h2>{{one}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好",
      lastName: 'xiao',
      firstName: 'jiejie',
      counter: 100,
      one: '<h2>你好这个美丽的世界</h2>'
    }
  });
</script>

v-once

• 该指令后面不需要跟任何的表达式（如v-for后面需要跟有表达式）
• 该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。

代码演示

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

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好"
    }
  });
 </script>

v-html

• 该指令后面会更上一个String类型，为data中的参数名字
• 会将参数的HTML解析出来并且进行渲染

代码展示

<div id="app">
  <h2>{{url}}</h2>
  <h2 v-html="url"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好",
      url: "<a href='http://www.baidu.com'>百度一下</a>"
    }
  });
</script>

v-text

• v-text作用和Mustache比较相似：都适用于将数据显示在界面中
• v-text通常情况下，接受一个String类型参数
• 不灵活，不推荐使用

代码展示

<div id="app">
  <h2>{{message}}</h2>
  <!--  会将,世界覆盖-->
  <h2 v-text="message">,世界</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好"
    }
  });
</script>

v-pre

v-pre用于跳过这个元素和他子元素的编译过程，不解析Mustache，用于显示原本的Mustache语法。

代码展示

<div id="app">
  <h2>{{message}}</h2>
  <!--  不解析mustache语法-->
  <h2 v-pre>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: "你好"
    }
  });
</script>

v-cloak

在vue解析之前，div中会有v-cloak属性，该元素会不显示，在解析之后，v-cloak会在div属性中消失，元素显示

代码展示

<style>
  [v-cloak] {
    display: none;
  }
</style>
<div id="app" v-cloak>
  <h2>{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  //在vue解析之前，div中会有v-cloak属性
  //在解析之后，v-cloak会在div属性中删除
  setTimeout(function () {
    const app = new Vue({
      el: '#app',
      data: {
        message: "你好"
      }
    });
  }, 1000)
</script>

END

下一章：绑定属性和计算属性