Vue笔记详解

一、Vue概述

Vue是一款渐进式JavaScript框架，用于构建响应式的用户界面。相较于其他框架，Vue的优点在于其轻量级、易学易用，同时具备灵活可扩展性以及高效性。

Vue框架大致分为3个模块：

1、核心模块: Vue.js提供了核心特性，如响应的数据绑定、表达式处理、组件化等。

2、生态模块：配合Vue.js可以构建丰富多彩的应用，如Vue Router、Vuex、axios、vue-cli等。这些工具是基于Vue.js实现的。

3、周边模块：一些社区提供的Vue.js插件，如vue-resource、vue-validator、vue-lazyload等，用于满足不同的需求，更好的为开发者解决问题。

二、Vue基础语法

1、模板语法

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

2、Vue实例的生命周期

在Vue实例创建和销毁时，会有一系列的钩子函数可供调用，表现形式为对应的名称的函数。常用的有：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

var app = new Vue({
    el: "#app",
    data: {
        message: "Hello world!"
    },
    beforeCreate: function() {
        console.log("before create");
    },
    created: function() {
        console.log("created");
    },
    beforeMount: function() {
        console.log("before mount");
    },
    mounted: function() {
        console.log("mounted");
    },
    beforeUpdate: function() {
        console.log("before update");
    },
    updated: function() {
        console.log("updated");
    },
    beforeDestroy: function() {
        console.log("before destroy");
    },
    destroyed: function() {
        console.log("destroyed");
    }
})

三、Vue指令

1、v-bind指令

v-bind指令能够动态更新HTML标签的属性值，无论是src、href、title、class等等都可以动态修改。

<img v-bind:src="imageSrc" alt="">

2、v-on指令

v-on指令用于绑定事件，能够监听DOM事件，当事件触发时，执行对应的JavaScript代码块。

<button v-on:click="alert('Hello World!')">Click</button>

3、v-for指令

v-for指令用于渲染列表或者数组，根据数据源渲染符合条件的节点。

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

var app = new Vue({
  el: "#app",
  data: {
    list: ['Vue', 'React', 'Angular']
  }
});

四、Vue组件化

Vue组件化能够让我们把一个大的应用拆分成多个小的、独立的组件，大大提高代码的复用性以及可维护性。

1、定义组件

Vue.component('my-component', {
    template: '<div><p>My name is {{ name }}.</p><p>I am {{ age }} years old.</p></div>',
    data: function() {
        return {
             name: 'John',
             age: 28
        }
    }
});

2、使用组件

<my-component></my-component>

五、Vue路由

Vue Router是Vue.js官方的路由管理器，能够实现路由之间的切换，使用history模式或hash模式来实现URL的管理。

1、路由配置

var router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/about', component: About },
    { path: '*', redirect: '/home' }
  ]
})

2、路由导航

<router-link to="/home">Home</router-link>

六、Vue状态管理

Vue提供了Vuex作为官方的状态管理器，能够更好地管理和协调大型项目中的状态。

1、store实例

import Vuex from 'vuex'

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
});

2、使用store

<div>
  {{ this.$store.state.count }}
  <button @click="$store.commit('increment')">Add</button>
  <button @click="$store.dispatch('incrementAsync')">Add Async</button>
  {{ this.$store.getters.doubleCount }}
</div>

七、Vue插件

Vue插件是可重用的Vue.js程序块，提供了可插拔的Vue功能，比如数据处理、数据保护、样式处理、路由、界面交互等。

1、安装插件

npm install vue-router --save

2、使用插件

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: []
})

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

总结

在Vue开发中，基础语法、组件化、路由和状态管理是必须要掌握的，而插件和生命周期等则更能够为Vue开发带来便捷和灵活性。当然，除了学习Vue的各项功能特性，更重要的是能够将其融入实际项目中，为用户提供一个更好的产品体验。