模板语法

React 使用的 jsx，所以对应的代码都是编写的类似于 js 的一种语法, 之后通过 Babel 将 jsx 编译成 React.createElement 函数调用

Vue 也支持 jsx 的开发模式

  • 但是大多数情况下，使用基于 HTML 的模板语法
  • 在模板中，允许开发者以声明式的方式将 DOM 和底层组件实例的数据绑定在一起
  • 在底层的实现中， Vue 将模板编译成虚拟 DOM 渲染函数

Mustache

胡子, 又称双大括号语法, 或者插值语法

如果我们希望把数据显示到模板（template）中，使用最多的语法是 “Mustache” 语法 (双大括号) 的文本插值

  • data 返回的对象是有添加到 Vue 的响应式系统中
  • 当 data 中的数据发生改变时，对应的内容也会发生更新
  • Mustache 中不仅仅可以是 data 中的属性，也可以是一个 JavaScript 的表达式

演示:

<div id="app">

  <!-- 1.基本使用 -->
  <h2>{{ message }}</h2>
  <h2>当前计数: {{ counter }} </h2>

  <!-- 2.表达式 -->
  <h2>计数双倍: {{ counter * 2 }}</h2>
  <h2>展示的信息: {{ info.split(" ") }}</h2>

  <!-- 3.三元运算符 -->
  <h2>{{ age >= 18? "成年人": "未成年人" }}</h2>

  <!-- 4.调用methods中函数 -->
  <h2>{{ formatDate(time) }}</h2>

  <!-- 5.注意: 这里不能定义语句 -->
  <!-- 也不能是if语句，可以转成三元运算符 -->
  <!-- <h2>{{ const name = "Hello" }}</h2> -->

</div>

v-once 指令

用于指定元素或者组件只渲染一次

  • 当数据发生变化时，元素或者组件以及其所有的子元素将视为静态内容并且跳过
  • 该指令可以用于性能优化
  • 如果是子节点，也是只会渲染一次
<body>
  <div id="app">

    <!-- 指令: v-once -->
    <h2 v-once>
      {{ message }}
      <span>数字: {{counter}}</span>
    </h2>

    <h1>{{message}}</h1>

    <button @click="changeMessage">改变message</button>
  </div>
  
  <script src="../lib/vue.js"></script>
  <script>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          message: "Hello World",
          counter: 100
        }
      },

      methods: {
        changeMessage: function() {
          this.message = "Hello Vue"
          this.counter += 100
          console.log(this.message, this.counter)
        }
      }
    })

    // 2.挂载app
    app.mount("#app")
  </script>
</body>

点击前：

点击后：

v-text

用于更新元素的 textContent, 推荐 mustache 更加灵活

<div id="app">
  <h2 v-text="message"></h2>
  <!-- 等价于下面，推荐 mustache 更灵活 -->
  <h2>{{message}}</h2>
</div>

v-html

默认情况下，如果我们展示的内容本身是 html 的，那么 vue 并不会对其进行特殊的解析

  • 如果我们希望这个内容被 Vue 可以解析出来，那么可以使用 v-html 来展示

v-pre

用于跳过元素和它的子元素的编译过程，显示原始的 Mustache 标签

  • 跳过不需要编译的节点，加快编译的速度

v-cloak

cloak, 斗篷, 起到遮挡作用

这个指令保持在元素上直到关联组件实例结束编译

  • 和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到组件实例准备完毕