Vue 2.0 基礎詳細

Posted on by

1、特點

是一個MVVM框架

由MVC架構衍生，分為View(視圖層)、ViewModel(數據視圖層)、Model(數據層)，MVVM 最標志性的特性就是 數據綁定，實現數據驅動視圖，視圖同步數據。

數據也是單向的，稱之為單向數據流

數據總是從父組件傳遞到子組件中，子組件無權(不建議)直接修改父組件中的數據。

不兼容ie8及其以下瀏覽器

響應式原理式利用瞭es5的Object.defineProperty，而該API不支持IE8

2、實例

// Vue單頁面實例
<template>
    標簽...
</template>
<script>
    export default {
      data () {},
      methods: {},
      computed: {},
      watch: {}
    }
</script>
<style>
    樣式...
</style>

3、選項 Options

data

函數，用於定義頁面的數據

data() {
    return {
        count: 2
        copyCount: 1
    }
}

// 使用
this.count // 2

computed

對象，計算屬性，用於簡化復雜邏輯處理

// 計算屬性不接受參數，會緩存依賴數據，必須要有return
computed：{
    doubleCount: function () {
      return this.count *= 2
    },
}

// 使用
this.doubleCount // 4

methods

對象，用於定義頁面的函數

methods: {
    cLog(msg) {
        console.log(msg)
    }
}

// 使用
this.cLog('調用瞭函數') // 控制臺輸出：調用瞭函數

watch

對象，屬性偵聽，用來監聽某數據的改變並做出對應操作

watch: {
    count(value, [oldValue]) {
        // value：改變後的值 
        this.copyCount = value + 1
    }
}

// 當count發生改變時自動觸發
this.count = 2
this.copyCount // 3

components

對象，註冊組件到頁面

import UploadImg from 'xxxx'

components: { UploadImg }

// template
<upload-img>

4、基本語法

常用指令

v-html：渲染HTML

v-if：判斷語法，控制顯示/隱藏，通過是否渲染DOM來控制

v-show：控制顯示/隱藏，與v-if類似，但v-show是通過display屬性控制

v-model：雙向數據綁定，一般用於表單，默認綁定value屬性

v-bind：

  • 簡寫 :class
  • 用於動態屬性綁定

v-on：

  • 簡寫 @click
  • 用於事件綁定

v-for：遍歷語法，支持數組、對象及字符串

5、生命周期

beforeCreated：創建Vue對象

created：data初始化，此時可以對實例做些預操作

beforeMounted：el和data初始化

mounted：掛載el和data，此時可以調用http請求

beforeUpdated：更新DOM前，此時可以進一步地更改狀態，不會觸發重渲染過程

updated：更新修改後的虛擬DOM到頁面，此時應避免改動操作，以免造成無限循環更新

beforeDestory：頁面銷毀前，此時可以做一些重置操作，比如清除定時器 和 dom事件等

destoryed：頁面銷毀，此時Vue實例已被刪除，所有操作均無效

6、路由管理Vue-Router

官方的路由管理器。它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。

6.1 路由配置

// NPM下載
npm install vue-router
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

// 定義頁面路由（路徑、組件）
export default new Router({
    { path: '/foo', component: () => import('/pages/foo') }, // 路由組件懶加載
    { path: '/bar', component: '/pages/bar'}
})
// main.js
import router from './router.js'
new Vue({
  el: '#app',
  router, // 掛載路由到Vue實例
  render: h => h(App)
})

// page.vue
<!-- 要重點區分開兩者的關系 -->
this.$router // 訪問路由器，內置push、replace的路由方法
this.$route // 訪問當前路由，內置path、query等路由屬性
// app.vue
<!-- 路由匹配到的組件將渲染在這裡 -->
<router-view></router-view>

6.2 路由跳轉

申明式路由

<router-link :to="...">
<router-link :to="..." replace>

編程式路由

this.$router.push({ path: 'register', query: { plan: 'private' }})
this.$router.replace(...)   // 與push區別在不插入history記錄
this.$router.go( [Number] n )   // 在 history 記錄中向前或者後退多少步

// 路由傳參攜帶中文時建議先使用encodeURLComponent轉碼，以免顯示亂碼。

6.3 路由守衛

全局守衛

對配置的所有路由均生效，但優先級低與內部路由。

全局前置守衛（常用）

// 用戶未能驗證身份時重定向到 /login
router.beforeEach((to, from, next) => {
  // to 即將要進入的路由對象，from 來源路由，next 鉤子函數，是否放行
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

全局解析守衛（瞭解）

router.beforeResolve((to, from, next) => {
  // ...
})

全局後置鉤子（瞭解）

router.afterEach((to, from) => {
  // 該路由守衛不接受 next 鉤子函數
  // ...
})

路由獨享守衛（瞭解）

該守衛僅對配置的路由生效，這些守衛與全局前置守衛的方法參數是一樣的。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

組件內部守衛（瞭解）

可以在路由組件內直接定義以下路由導航守衛，僅對當前組件生效。

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

組件內的守衛 ｜ Vue-Router官方文檔

7、狀態管理器Vuex

7.1 配置

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
...

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules
})
// main.js
import store from './store'

Vue.prototype.$store = store

8、五大核心屬性

state

數據源，不要直接修改state狀態

// store.js
const state = {
    name: 'zzz'
}

<!--page.vue-->
// 1.直接調用
this.$store.state.name // 'zzz'
// 2.輔助函數映射
computed: {
    ...mapState(['name'])
}
this.name // 'zzz'

mutations

改變state狀態的唯一途徑

const mutations = {
    updateName(state, newName) {
        state.name = newName
    }
}

<!--page.vue-->
// 1.直接調用
this.$store.commit(updateName, 'zzh') // state.name: 'zzh'
// 2.輔助函數映射
methods: {
    ...mapMutations(['updateName'])
}
this.updateName('zzh') // state.name: 'zzh'

actions

存放異步操作，異步觸發mutation改變state

const actions = {
    asyncUpdateName(context) {
        // 異步操作，例如發起http請求去獲取更新後的name，假設name=xxx
        ...
        context.commit('updateName', res.name) // state.name: 'xxx'
    }
}

<!--page.vue-->
// 1.直接調用
this.$store.dispatch(asyncUpdateName)
// 2.輔助函數映射
methods: {
    ...mapActions(['asyncUpdateName'])
}
this.asyncUpdateName()

getters

數據源處理，類似計算屬性

const getter = {
    formatName(state) {
        return state.name + '2021'
    }
}

<!--page.vue-->
// 1.直接調用
this.$store.getter.formatName() // 'xxx2021'
// 2.輔助函數映射
computed: {
    ...mapGetters(['formatName'])
}
this.formatName() //  // 'xxx2021'

modules

模塊化，讓每個模塊單獨管理一套自己的state、mutations、actions和getters。

// 模塊內部
this.$store.state.name  // 內部訪問無須使用命名空間
// 模塊外部
this.$store.state.login.name  // login是模塊命名空間
...
其他屬性類似

modules｜Vuex官方文檔

9、Http請求庫Axios

基於 promise 封裝的Http請求庫，官方推薦

<!-- api.js -->
import axios from 'axios'

// 創建並配置實例
axios.create({
    baseURL: 'http://www.baidu.com',    // 請求基準地址
    timeout: 1000   // 請求超時時間
    ...
})

// 請求攔截器
axios.interceptors.request.use(request => {
    request.headers['Content-Type'] = 'application/json'
    ...
})
// 響應攔截器
axios.interceptors.response.use(response => {
    ...
    return response.data
})
// 配置請求
export default {
    getId: () => axios.get('/getId'),
    getNameById: id => axios.post('/getNameById', id)
}

<!-- main.js -->
import api from './api.js'

Vue.prototype.$api = api
<!-- page.vue -->
this.$api.getId().then(res => {
    ...
}).catch()

到此這篇關於Vue 2.0 基礎詳細的文章就介紹到這瞭,更多相關Vue 2.0 基礎內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：