Vue 模板语法

Vue.js 的模板语法允许你声明式地将 DOM 绑定到 Vue 实例的数据上。所有 Vue 模板都是声明性的，这使得它们易于编写和理解。下面是 Vue 模板语法的一些基本特性：

插值表达式({{ }})

插值语法使用双大括号 {{ }} 将数据绑定到 HTML 中。文本内容会被 Vue 实例的数据替换。

<div id="app">
  <p>{{ message }}</p>
</div>

在上面的例子中，{{ message }} 将会被 Vue 实例中 message 数据的值替换。

指令 (v-):

指令带有特殊前缀 v-，用于在元素上应用特定的行为。Vue 提供了一些内置指令，如 v-bind、v-model、v-on 等。

• v-bind：动态地绑定一个或多个属性。

<div v-bind:class="{ active: isActive }"></div>

这里的 class 根据 isActive 的值来决定是否添加 active 类。

• v-if 和 v-else：条件性地渲染元素。

<div v-if="isVisible">
  Visible Content
</div>
<div v-else>
  Not Visible
</div>

• v-for：基于源数据多次渲染元素或模板块。

<ul>
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</ul>

• v-on 或 @：绑定事件监听器，以响应用户操作。

<button @click="handleClick">Click me</button>

• v-model：在表单元素上创建双向数据绑定。

<input v-model="message">

计算属性和监听器

Vue.js 允许你在模板中使用计算属性和侦听器：

• 计算属性：通过计算属性可以在模板中放置简单的 JavaScript 表达式，Vue 会根据依赖进行缓存。

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

• 侦听器 (watch): 用于在数据变化时执行异步操作

watch: {
  message(newValue, oldValue) {
    console.log('message changed:', newValue, oldValue);
  }
}

生命周期钩子

Vue 实例有一些生命周期钩子，可以在实例化过程中添加自定义逻辑。常用的有 created、mounted、updated 和 destroyed。

new Vue({
  el: '#app',
  data: {
    message: 'Hello, Vue!'
  },
  created() {
    console.log('Vue instance created');
  },
  mounted() {
    console.log('Vue instance mounted');
  },
  updated() {
    console.log('Vue instance updated');
  },
  destroyed() {
    console.log('Vue instance destroyed');
  }
});

Vue 的模板语法非常灵活，支持 JavaScript 的表达式、指令、条件和循环等特性，使得构建动态和响应式的用户界面变得简单而强大。