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的各項功能特性，更重要的是能夠將其融入實際項目中，為用戶提供一個更好的產品體驗。