Vue 模板语法-插值

Vue 的模板语法非常灵活，其中最基础也是最常用的语法就是插值。在 Vue 的模板中可以使用 {{ expression }} 来插入动态数据，这个表达式会被编译成一个 JavaScript 函数，用于动态更新视图。
插值语法可以用于文本节点、属性和指令的值中。下面分别介绍一下插值语法在这三个场景中的用法。

插值语法在文本节点中
在文本节点中使用插值语法非常简单，只需要将需要动态更新的数据包裹在 {{ }} 中即可。例如：

<div>{{ message }}div>

在 Vue 实例中，定义一个 message 属性：

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  }
})

当 Vue 实例中的 message 属性值发生变化时，插值表达式会自动更新视图。
2. 插值语法在属性中
在属性中使用插值语法也很容易，只需要将需要动态更新的数据包裹在 {{ }} 中，然后将整个表达式作为属性的值即可。例如：

<img :src="imageUrl">

在 Vue 实例中定义一个 imageUrl 属性：

new Vue({
  el: '#app',
  data: {
    imageUrl: 'https://example.com/image.jpg'
  }
})

当 Vue 实例中的 imageUrl 属性值发生变化时，src 属性的值也会自动更新。
3. 插值语法在指令中
在指令中使用插值语法和在属性中使用类似，将要动态更新的数据包裹在 {{ }} 中，然后将整个表达式作为指令的值。例如：

<a :href="linkUrl">{{ linkText }}a>

在 Vue 实例中定义一个 linkUrl 和 linkText 属性：

new Vue({
  el: '#app',
  data: {
    linkUrl: 'https://example.com',
    linkText: 'Click me!'
  }
})

当 Vue 实例中的 linkUrl 或 linkText 属性值发生变化时，href 和文本内容也会自动更新。
需要注意的是，在插值语法中，只能使用最基础的 JavaScript 表达式，不能使用语句或控制流语句，例如 if、for 等等。如果需要使用更复杂的逻辑，可以使用计算属性或方法来实现。
总之，Vue 的插值语法非常便捷和灵活，可以在模板中轻松实现数据和视图的绑定。