1️⃣ 插值

可以将 Vue 中的数据填在插值表达式中

  1. 除了填写 data 中的数据之外，还可以直接填写数据值（ 数字、字符串、布尔值、表达式、undefined、null、数组、对象 ）

注意，只要插值表达式中使用了数据，必须在 data 中声明过，否则会报错

<template>
  <div id="app">
    <div>{{ msg }}</div>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      msg: "数据",
    };
  },
};
</script>

1️⃣ 指令

指令 ( Directives ) 是带有 v- 前缀的特殊 attribute ( 属性 )。指令 attribute 的值预期是单个 JavaScript 表达式 ( v-for 是例外情况 )。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

<!-- HTML -->
<body>
  <div id="app">
    <!-- v-if 指令 -->
    <h1 v-if="show">当指令 v-if 的值为真时渲染 h1 标签</h1>
  </div>
</body>
// JS/VUE
const vm = new Vue({
  el: '#app',
  data: { show: true }
})

2️⃣ 参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如： v-on 指令，它用于监听 DOM 事件，v-bind 主要用于属性绑定。

  1. 在这里参数是监听的事件名。

<!--  HTML  -->
<body>
  <div id="app">
    <a v-on:click="doSomething">点击</a>
  </div>
</body>
//  JS/VUE 
const vm = new Vue({
  el: '#app',
  methods: {
    doSomething() {
      console.log('被点击了');
    }
  }
})

2️⃣ 动态参数

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数

动态参数预期会求出一个字符串，异常情况下值为 null。
动态参数可以是一个表达式

<!--  HTML  -->
<body>
  <div id="app">
    <a v-on:[eventName]="doSomething">点击</a>
</div>
</body>
//  JS/VUE 
const vm = new Vue({
  el: '#app',
  data: {
    eventName: 'click'
  },
  methods: {
    doSomething() {
      console.log('被点击了');
    }
  }
})

2️⃣ 修饰符

修饰符 (modifier) 是以半角句号** . **指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault() 阻止默认事件的发生

<!--  HTML  -->
<body>
  <div id="app">
    <form v-on:submit.prevent="onSubmit">...</form>
  </div>
</body>

1️⃣ 缩写

v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时，v- 前缀很有帮助，然而，对于一些频繁用到的指令来说，就会感到使用繁琐。同时，在构建由 Vue 管理所有模板的单页面应用程序 ( SPA - single page application ) 时，v- 前缀也变得没那么重要了。因此，Vue 为 v-bind 和 v-on 这两个最常用的指令，提供了特定简写：

2️⃣ v-bind 缩写

<body>
  <div id="app">
    <!-- 完整语法 -->
    <a v-bind:href="url">...</a>
    <!-- 缩写 -->
    <a :href="url">...</a>
    <!-- 动态参数的缩写 (2.6.0+) -->
    <a :[key]="url"> ... </a>
  </div>
</body>

2️⃣ v-on 缩写

<!--  HTML  -->
<body>
  <div id="app">
    <!-- 完整语法 -->
    <a v-on:click="doSomething">...</a>
    <!-- 缩写 -->
    <a @click="doSomething">...</a>
    <!-- 动态参数的缩写 (2.6.0+) -->
    <a @[event]="doSomething"> ... </a>
  </div>
</body>

📔 Vue

模板语法