【Vue】Vue.js中常见的几种语法

在 Vue.js 中，主要的语法可以分为以下几种：

插值语法 (Interpolation)

使用双大括号 {{ }} 进行文本插值。

示例：

{{ message }}

指令语法 (Directives)

指令是特殊的标记，用于告诉Vue框架如何操作DOM。Vue提供了多种内置指令，包括：

• v-bind：用于动态地绑定一个或多个属性，或一个组件prop到表达式。

  示例：<a v-bind:href="url">Link</a> 
  
  或简写为 <a :href="url">Link</a>

• v-model：用于在表单输入和应用状态之间创建双向数据绑定。

  示例：<input v-model="message">

• v-on：用于监听DOM事件。

  示例：<button v-on:click="doSomething">Click me</button> 
  
  或简写为 <button @click="doSomething">Click me</button>

• v-if：用于条件性地渲染元素。

  示例：<p v-if="seen">Now you see me</p>

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

  示例：<li v-for="item in items" :key="item.id">{{ item.name }}</li>

• v-slot：用于定义作用域插槽。
• v-text：更新元素的文本内容，忽略元素的子节点。
• v-html：更新元素的HTML内容。
• v-show：根据条件渲染元素，但与v-if不同，v-show始终渲染元素，只是简单地切换CSS的display属性。

  示例：<p v-show="ok">This will be shown or hidden</p>

• v-cloak：保持在元素上直到关联的Vue实例被挂载。

计算属性和侦听器

计算属性（computed）：用于定义基于其他数据计算得出的属性。

示例：

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

侦听器（watch）：用于观察数据变化并执行相应的操作。

示例：

watch: {
  message(newVal, oldVal) {
    console.log('message changed from', oldVal, 'to', newVal);
  }
}

组件语法

用于定义和使用组件。

示例：

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

生命周期钩子：

用于在组件的不同生命周期阶段执行代码。

示例：

created() {
  console.log('Component created');
}

---

---

---