Vue3 模板语法学习笔记

双大括号语法

Vue3 中双大括号语法可以用于渲染模板中的数据。例如：

htmlCopy Code
<div>{{ message }}</div>

其中 message 是 Vue 实例中定义的数据对象。

v-bind 指令

v-bind 指令可以将一个或多个属性绑定到表达式上，实现动态属性绑定。例如：

htmlCopy Code
<img v-bind:src="imageSrc">

其中 imageSrc 是 Vue 实例中定义的数据对象。

v-if 指令

v-if 指令可以根据表达式的值条件性地渲染元素。例如：

htmlCopy Code
<div v-if="showMessage">{{ message }}</div>

其中 showMessage 是 Vue 实例中定义的布尔值。

v-for 指令

v-for 指令可以根据数组或对象的数据循环渲染元素。例如：

htmlCopy Code
<ul>
  <li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>

其中 list 是 Vue 实例中定义的数组。

v-on 指令

v-on 指令可以绑定事件监听器到元素上。例如：

htmlCopy Code
<button v-on:click="clickHandler">Click me!</button>

其中 clickHandler 是 Vue 实例中定义的函数。

实例

htmlCopy Code
<template>
  <div>
    <img v-bind:src="imageSrc" alt="vue logo">
    <p v-if="message">Message: {{ message }}</p>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
    <button v-on:click="clickHandler">Click me!</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: "https://vuejs.org/images/logo.png",
      message: "",
      list: ["item 1", "item 2", "item 3"]
    };
  },
  methods: {
    clickHandler() {
      this.message = "Hello, Vue3!";
    }
  }
};
</script>

以上就是 Vue3 模板语法学习笔记的简要介绍。希望对您有所帮助！