Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
1. Vue 实例
Vue 实例是 Vue 应用的根，它包含了应用的所有数据和功能。每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。这个实例将作为起点，管理应用的数据、生命周期、事件监听等。
创建 Vue 实例时，需要传入一个选项对象，这个对象可以包含数据（data）、方法（methods）、生命周期钩子（lifecycle hooks）、计算属性（computed）等多种选项。
const app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } });
2. 模板语法
Vue 使用基于 HTML 的模板语法，允许开发者声明式地将渲染的逻辑绑定到 DOM 上。模板中的特殊语法将被 Vue 的编译器处理，并生成最终的渲染函数。
- 插值：使用双大括号
{{ }}来输出数据对象的属性值。 - 指令：如
v-bind用于绑定属性或元素的 class/style，v-on用于监听 DOM 事件，并触发一些 JavaScript 代码。 - 条件渲染：使用
v-if、v-else-if、v-else来根据条件渲染不同的内容。 - 列表渲染：使用
v-for指令来渲染一个列表。
<div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">Reverse Message</button> <div v-if="isShown">Now you see me</div> <ul> <li v-for="item in items" :key="item.id">{{ item.text }}</li> </ul> </div>
3. 响应式数据
Vue 的响应式数据是其核心特性之一。当 Vue 实例创建时，它会将 data 对象的属性转换为 getter/setter，使得 Vue 能够追踪每个属性的变化，并在数据变化时触发视图更新。这种响应式系统使得数据驱动视图成为可能。
new Vue({ data: { a: 1 } }); // 当你修改 `a` 的值时，视图会自动更新。
4. 组件
组件是 Vue 中可复用的 Vue 实例，带有一个名字：一个全局可注册的或局部可注册的名字。在 Vue 中，组件是可复用的 Vue 实例，带有一个名字：一个全局可注册的或局部可注册的。组件可以接收数据、事件和方法作为参数，使得代码更加模块化和可维护。
Vue.component('my-component', { // 选项 });
const MyComponent = { // 选项 }; new Vue({ el: '#app', components: { 'my-component': MyComponent } });
5. 生命周期钩子
Vue 实例在其生命周期中会经历一系列初始化过程，如创建、挂载、更新、销毁等。在这些过程中，Vue 提供了一些生命周期钩子函数，允许开发者在特定阶段添加自己的代码逻辑。
new Vue({ data: { a: 1 }, created: function () { // 实例已经被创建 }, mounted: function () { // 实例已经被挂载到 DOM 上 } });
6. 指令
Vue 提供了很多内置指令，用于在模板中执行特殊的行为。指令以 v- 开头，用于绑定元素属性、监听事件、控制元素显示与隐藏等。
<div v-bind:class="{ active: isActive }"></div> <button v-on:click="doThis"></button> <div v-show="isVisible"></div>
7. 计算属性和侦听器
计算属性是基于它们的依赖进行缓存的。只有在相关依赖发生改变时它们才会重新求值。这使得计算属性非常适合在模板中频繁使用的复杂表达式。
new Vue({ el: '#app', data: { firstName: 'John', lastName: 'Doe' }, computed: { fullName: function () { return this.firstName + ' ' + this.lastName; }
