vue的基础知识

Vue.js 是一个构建数据驱动的 web 界面的渐进式框架。它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

1. Vue 实例

Vue 实例是 Vue 应用的根，它包含了应用的所有数据和功能。每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。这个实例将作为起点，管理应用的数据、生命周期、事件监听等。

创建 Vue 实例时，需要传入一个选项对象，这个对象可以包含数据（data）、方法（methods）、生命周期钩子（lifecycle hooks）、计算属性（computed）等多种选项。

javascript 复制代码

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 指令来渲染一个列表。

html 复制代码

<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 能够追踪每个属性的变化，并在数据变化时触发视图更新。这种响应式系统使得数据驱动视图成为可能。

javascript 复制代码

new Vue({  
  data: {  
    a: 1  
  }  
});  
// 当你修改 `a` 的值时，视图会自动更新。

4. 组件

组件是 Vue 中可复用的 Vue 实例，带有一个名字：一个全局可注册的或局部可注册的名字。在 Vue 中，组件是可复用的 Vue 实例，带有一个名字：一个全局可注册的或局部可注册的。组件可以接收数据、事件和方法作为参数，使得代码更加模块化和可维护。

javascript 复制代码

Vue.component('my-component', {  
  // 选项  
});

javascript 复制代码

const MyComponent = {  
  // 选项  
};  
  
new Vue({  
  el: '#app',  
  components: {  
    'my-component': MyComponent  
  }  
});

5. 生命周期钩子

Vue 实例在其生命周期中会经历一系列初始化过程，如创建、挂载、更新、销毁等。在这些过程中，Vue 提供了一些生命周期钩子函数，允许开发者在特定阶段添加自己的代码逻辑。

javascript 复制代码

new Vue({  
  data: {  
    a: 1  
  },  
  created: function () {  
    // 实例已经被创建  
  },  
  mounted: function () {  
    // 实例已经被挂载到 DOM 上  
  }  
});

6. 指令

Vue 提供了很多内置指令，用于在模板中执行特殊的行为。指令以 v- 开头，用于绑定元素属性、监听事件、控制元素显示与隐藏等。

html 复制代码

<div v-bind:class="{ active: isActive }"></div>  
<button v-on:click="doThis"></button>  
<div v-show="isVisible"></div>

7. 计算属性和侦听器

计算属性是基于它们的依赖进行缓存的。只有在相关依赖发生改变时它们才会重新求值。这使得计算属性非常适合在模板中频繁使用的复杂表达式。

javascript 复制代码

new Vue({  
  el: '#app',  
  data: {  
    firstName: 'John',  
    lastName: 'Doe'  
  },  
  computed: {  
    fullName: function () {  
      return this.firstName + ' ' + this.lastName;  
    }