Vue 3 是一种流行的 JavaScript 框架,用于构建用户界面。它是 Vue.js 框架的第三个主要版本,具有许多新特性和性能改进。下面是 Vue 3 的一些常用语法和概念的详细介绍:
创建 Vue 实例: 在 Vue 3 中,你可以通过创建一个 Vue 实例来初始化你的应用程序。这可以通过createApp
方法来完成。例如:
const app = Vue.createApp({data() {return {message: 'Hello, Vue 3!',};},
});
数据绑定: Vue 3 支持双向数据绑定,你可以使用v-model
指令来将输入元素与数据属性绑定在一起。例如:
<input v-model="message">
指令: Vue 3 提供了一系列指令,用于操作 DOM 元素。常用指令包括v-bind
、v-if
、v-for
、v-on
等。例如:
<div v-if="isVisible">This is visible</div>
<ul><li v-for="item in items">{{ item }}</li>
</ul>
<button v-on:click="doSomething">Click me</button>
组件: Vue 3 支持组件化开发,你可以创建可重用的组件。使用defineComponent
函数创建组件。例如:
const MyComponent = Vue.defineComponent({props: ['title'],template: '<h1>{{ title }}</h1>',
});
计算属性和监听属性: 你可以使用计算属性和监听属性来处理数据。计算属性使用computed
,监听属性使用watch
。例如:
const app = Vue.createApp({data() {return {count: 0,};},computed: {doubled() {return this.count * 2;},},watch: {count(newCount, oldCount) {// Do something when count changes},},
});
事件处理: 你可以使用@
符号来监听 DOM 事件,也可以使用v-on
指令。例如:
<button @click="incrementCount">Increment</button>
条件渲染: Vue 3 支持条件渲染,你可以使用v-if
、v-else-if
和v-else
来根据条件渲染元素。例如:
<p v-if="isTrue">This is true</p>
<p v-else>This is false</p>
循环渲染: 使用v-for
指令,你可以循环渲染数组或对象的内容。例如:
<ul><li v-for="item in items">{{ item }}</li>
</ul>
模板语法: Vue 3 使用模板语法来声明视图。你可以在模板中插入表达式、指令和事件处理程序。例如:
<div><p>{{ message }}</p><button @click="changeMessage">Change Message</button>
</div>
生命周期钩子: Vue 3 提供了一系列生命周期钩子函数,允许你在组件生命周期的不同阶段执行代码。常见的生命周期函数包括created
、mounted
、updated
和destroyed
。
模板引用: 你可以使用ref
来创建对 DOM 元素或组件的引用,以便在组件中访问它们。
<div ref="myElement">This is a div</div>