Vue3 详细模板语法及实例_vue3.0模版

一、Vue3 的模板语法主要包括以下几个部分：

1. 插值表达式：使用 {{}} 进行数据的展示。
2. 指令：以 v- 开头，用于对元素进行操作。
3. 计算属性：使用 computed 函数定义，可以缓存结果，只有当依赖的属性发生变化时才会重新计算。
4. 侦听器：使用 watch 选项定义，可以监听某个数据的变化，并在变化时执行回调函数。
5. 条件渲染：使用 v-if、v-else-if、v-else 进行条件判断。
6. 列表渲染：使用 v-for 遍历数组或对象。
7. 事件绑定：使用 v-on 或简写为 @ 绑定事件。
8. 表单输入绑定：使用 v-model 实现双向数据绑定。
9. Class 与 Style 绑定：使用 :class 和 :style 绑定类名和样式。
10. v-bind：用于绑定属性。
11. v-on：用于监听事件。
12. v-once：只渲染一次。
13. v-pre：跳过编译过程，直接显示原始内容。
14. v-text：将纯文本渲染为 HTML。
15. v-html：将 HTML 字符串渲染为元素。
16. v-cloak：在编译过程中隐藏元素，直到编译完成。
17. v-show：根据条件显示或隐藏元素。
18. v-if、v-else-if、v-else：根据条件渲染元素。
19. v-for：遍历数组或对象，生成元素。
20. v-on：监听事件，触发回调函数。
21. v-bind：绑定属性，动态更新属性值。
22. v-model：实现双向数据绑定。
23. v-slot：自定义插槽。
24. v-directive：自定义指令。

下面是一个简单的 Vue3 模板语法实例：

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
    <button @click="handleClick">点击我</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">{{ item }}</li>
    </ul>
    <input type="text" v-model="inputValue" />
    <p>{{ inputValue }}</p>
    <div v-if="isShow">显示内容</div>
    <div v-else>隐藏内容</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "Vue3 模板语法",
      content: "这是一个简单的 Vue3 模板语法实例",
      items: ["苹果", "香蕉", "橙子"],
      inputValue: "",
      isShow: true,
    };
  },
  methods: {
    handleClick() {
      alert("按钮被点击了");
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

二、Vue3 模板语法主要包括以下几个部分：

1. 插值表达式（Interpolation）
2. 指令（Directive）
3. 计算属性（Computed Property）
4. 方法（Method）
5. 事件监听（Event Listener）
6. 条件渲染（Conditional Rendering）
7. 列表渲染（List Rendering）
8. 表单输入绑定（Form Input Binding）
9. 组件实例化（Component Instancing）

下面是每个语法单独生成实例的教程：

1. 插值表达式（Interpolation）

插值表达式用于在模板中显示数据。基本语法如下：

<div>{{ message }}</div>

export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
1
2
3
4
5
6
7
8
9

2. 指令（Directive）

指令是带有 v- 前缀的特殊属性，用于在模板中添加行为。例如，v-if、v-else、v-for 等。

<!-- v-if -->
<div v-if="show">Hello, Vue!</div>

<!-- v-else -->
<div v-else>Hello, World!</div>

<!-- v-for -->
<div v-for="(item, index) in items" :key="index">{{ item }}</div>

export default {
  data() {
    return {
      show: true,
      items: ['apple', 'banana', 'orange']
    };
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3. 计算属性（Computed Property）

计算属性是基于它们的依赖进行缓存的。基本语法如下：

<div>{{ fullName }}</div>

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

4. 方法（Method）

方法可以在模板中调用。基本语法如下：

<button @click="sayHello">点击我</button>

export default {
  methods: {
    sayHello() {
      alert('Hello, Vue!');
    }
  }
};
1
2
3
4
5
6
7
8
9

5. 事件监听（Event Listener）

事件监听用于在模板中监听元素上的事件。基本语法如下：

<button @click="handleClick">点击我</button>

export default {
  methods: {
    handleClick() {
      alert('按钮被点击了');
    }
  }
};
1
2
3
4
5
6
7
8
9

6. 条件渲染（Conditional Rendering）

条件渲染用于根据条件显示或隐藏元素。基本语法如下：

<div v-if="isShow">显示内容</div>
<div v-else>隐藏内容</div>

export default {
  data() {
    return {
      isShow: true
    };
  }
};
1
2
3
4
5
6
7
8
9
10

7. 列表渲染（List Rendering）

列表渲染用于遍历数组并创建元素。基本语法如下：

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

export default {
  data() {
    return {
      items: ['apple', 'banana', 'orange']
    };
  }
};
1
2
3
4
5
6
7
8
9
10
11

8. 表单输入绑定（Form Input Binding）

表单输入绑定用于将表单元素的值与组件的数据进行双向绑定。基本语法如下：

<input v-model="message" placeholder="请输入消息">

export default {
  data() {
    return {
      message: ''
    };
  }
};
1
2
3
4
5
6
7
8
9

9. 组件实例化（Component Instancing）

组件实例化用于在模板中引入其他组件。基本语法如下：

<my-component></my-component>

import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
};
1
2
3
4
5
6
7
8
9