Vue常用知识点整理

1. Vue实例

Vue实例是Vue的基本模块，用它来创建Vue应用。一个Vue应用可以有多个Vue实例。

创建Vue实例的语法如下：

var vm = new Vue({
  // 选项
})

其中，vm 是Vue实例，选项包括 el， data， template 等等。

2. 数据绑定

Vue实现了双向数据绑定，当数据改变时，视图也会随之改变，反之亦然。

2.1 插值

Vue通过插值将数据绑定到视图中。插值使用双大括号 {{}}，例如：

<h1>{{ message }}</h1>

以上代码中，message 是一个变量，数据会自动同步到视图中。

2.2 绑定属性

Vue中使用 v-bind 指令将数据绑定到HTML标签属性中。例如：

<img v-bind:src="imgUrl">

其中，imgUrl 是一个变量，可以动态改变。

3. 组件

Vue的组件化开发使得应用更具有模块化和组合性。

3.1 定义组件

创建一个Vue组件，首先要定义组件。可以使用 Vue.component 方法进行定义：

Vue.component('my-component', {
  // 组件代码
})

以上代码定义了一个名为 my-component 的Vue组件。

3.2 使用组件

定义了一个Vue组件后，就可以在Vue应用中使用它。可以使用自定义标签来引入组件：

<my-component></my-component>

4. 生命周期钩子函数

Vue组件有一个完整的生命周期，组件从实例化到销毁都会经过一系列的过程。我们可以通过钩子函数来在组件的生命周期中执行一些自定义的代码。

以下是Vue组件生命周期函数的顺序：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

例如，在 mounted 钩子函数中可以访问组件DOM元素：

Vue.component('my-component', {
  mounted: function () {
    console.log(this.$el);
  }
})

示例说明

示例一：数据绑定

假设存在一个页面，需要实现一个简单的备忘录功能。使用Vue实现数据绑定，可以动态显示用户输入的备忘录条目，并支持删除某一条记录。

<div id="app">
  <input v-model="newItem" />
  <button v-on:click="addNew">添加</button>
  <ul>
    <li v-for="(item, index) in itemList">
      {{ item }}
      <button v-on:click="deleteItem(index)">删除</button>
    </li>
  </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    newItem: '',
    itemList: [],
  },
  methods: {
    addNew: function() {
      if (this.newItem.trim() !== '') {
        this.itemList.push(this.newItem.trim());
        this.newItem = '';
      }
    },
    deleteItem: function(index) {
      this.itemList.splice(index, 1);
    }
  },
})

以上代码实现了一个简单的备忘录页面，包括输入框、添加按钮、备忘录条目列表和删除按钮。用户输入内容后点击添加按钮，Vue会动态渲染新的备忘录条目。用户可以通过删除按钮删除不需要的条目。

示例二：生命周期钩子函数

现在需要在Vue组件中使用第三方JavaScript库，并在组件挂载到DOM后初始化该库。可以在 mounted 钩子函数中执行初始化代码。

Vue.component('my-component', {
  mounted: function () {
    //初始化第三方JavaScript库
    ThirdPartyLibrary.init(this.$el);
  }
})

在以上代码中，ThirdPartyLibrary 是要使用的JavaScript库的名称， init 方法是库中的初始化方法。this.$el 是Vue组件的DOM元素，用于初始化库。