模板语法

插值

普通文本：

数据绑定最常见的形式就是使用 {{ }} 双大括号语法，也被称为：Mustache 语法。

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  data() {
    return {
      msg: "Hello, Vue！"
    };
  }
}
</script>

{{ msg }} 中的 msg 对应的就是 data（数据对象） 中的 msg 属性。

当数据对象中的属性发生改变时，插值处的内容都会更新。

原生HTML：

{{ }} 会将数据解析为普通文本，而非 HTML 代码。如果需要渲染 HTML 结构，可以使用 v-html 指令。

<template>
  <div v-html="tag"></div>
</template>

<script>
export default {
  data() {
    return {
      tag: `<span style="color: red;">Hello，Vue！</span>`
    };
  }
}
</script>

v-html 指令会将数据作为 HTML 解析并渲染到页面中。

标签属性(Attribute)：

{{ }} 或是 v-html 插入的都是标签的内容，想要插入标签的属性可以通过 v-bind 指令。

<template>
  <div v-bind:class="className"></div>
</template>

<script>
export default {
  data() {
    return {
      className: "box"
    };
  }
};
</script>

v-bind 指令也可以简写为 :，例如：

<div :class="className"></div>

使用 JavaScript 表达式：

Vue 对于所有的数据绑定，都提供了 JavaScript 表达式支持。

{{ "Hello，Vue！" }}  

{{ count + 1 }}  

{{ isOK ? "yes" : "no" }}  
  
{{ ["Hello", "Vue！"].join("，") }}  

这些表达式会被 Vue 成功解析，每个数据绑定只能包含单个表达式。

在 JavaScript 中，表达式是由操作数和运算符组成的代码片段，它可以被求值为一个值。

表达式中包含字面量、变量、函数调用、运算符。

---

指令

在 Vue 中，指令（Directive） 是一个特殊的属性，它以 v- 前缀开头，用于在模板中将数据绑定到 HTML 元素上。

Vue 中常用到的指令包括：

• v-bind：
  • 用于将数据绑定到 HTML 元素的属性上，例如 v-bind:href 可以将数据绑定到 href 属性上。
  • 可以简写成 : 。

  <template>
   <a :href="toUrl">百度</a>
  </template>
      
  <script>
  export default {
   data() {
     return {
       toUrl: "http://www.xxx.com"
     };
   }
  };
  </script>
  

• v-model：
  • 用于实现双向数据绑定，将表单元素的值与 Vue 实例中的数据进行绑定，并在表单元素值改变时自动更新数据。

  <template>
   <div>
     <input type="text" v-model="value">
     <div>值：{{ value }}</div>
   </div>
  </template>
      
  <script>
  export default {
   data() {
     return {
       value: ""
     };
   }
  };
  </script>
  

• v-if和v-show：
  • 条件判断，用于控制 HTML 元素的显示和隐藏。
  • v-if 控制元素是否在页面中是否生成标签元素，而 v-show 则是通过 display 控制元素是否显示。

  <template>
   <div>
     <div v-if="true">v-if</div
     <div v-show="true">v-show</div>
   </div>
  </template>
  

• v-for：
  • 用于遍历渲染 HTML 元素。

  <template>
   <div>
     <div v-for="(item, index) in ['1', '2', '3']">{{ item }}</div>
   </div>
  </template>
  

• v-on：
  • 用于监听事件，例如：v-on:click，绑定一个点击事件的监听器。
  • v-on 可以简写为 @，例如：v-on:click 则可以简写为 @click

  <template>
   <div>
     <button @click="() => {}">点击</button>
   </div>
  </template>
  

动态指令参数：

指令参数就是指令 : 后面的内容，例如：v-bind:href ，这个 href 就是指令参数。

如何设置动态指令参数，例如：v-bind:[变量名]="属性值" 的形式。

<template>
  <div v-bind:[attribute]="JSON.stringify(data)"></div>
</template>

<script>
export default {
  data() {
    return {
      attribute: "data-info",
      data: {
        name: "张三",
        age: 18
      },
    };
  },
};
</script>

这里只对 v-bind 做了演示，其他指令一样可以设置动态指令参数，主要是看 Vue 有那些指令是可以设置参数的。