Vue 2.0 基礎

知識點

特點
實體
基本語法
生命周期
路由管理Vue-Router
狀態管理Vuex
Http請求庫Axios

特點

1.是一個MVVM框架

由MVC架構衍生，分為View(視圖層)、ViewModel(資料視圖層)、Model(資料層)，MVVM 最標志性的特性就是資料系結，實作資料驅動視圖，視圖同步資料，

2.資料也是單向的，稱之為單向資料流

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

3.不兼容ie8及其以下瀏覽器

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

實體

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

選項 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>

基本語法

常用指令

v-html

渲染HTML

v-if

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

v-show

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

v-model

雙向資料系結，一般用于表單，默認系結value屬性

v-bind

簡寫 :class

用于動態屬性系結

v-on

簡寫 @click

用于事件系結

v-for

遍歷語法，支持陣列、物件及字串

生命周期

beforeCreated

創建Vue物件

created

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

beforeMounted

el和data初始化

mounted

掛載el和data，此時可以呼叫http請求

beforeUpdated

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

updated

更新修改后的虛擬DOM到頁面，此時應避免改動操作，以免造成無限回圈更新

beforeDestory

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

destoryed

頁面銷毀，此時Vue實體已被洗掉，所有操作均無效

路由管理Vue-Router

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

路由配置

// 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>

路由跳轉

申明式路由

<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轉碼，以免顯示亂碼，

路由守衛

導航守衛｜Vue-Router官方檔案

全域守衛

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

全域前置守衛（常用）

// 用戶未能驗證身份時重定向到 /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官方檔案

未完待續...

本文來自博客園，作者：吳知木，轉載請注明原文鏈接：https://www.cnblogs.com/zh1q1/p/15293290.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/300622.html

標籤：其他

上一篇：jsPlumb開發流程設計器

下一篇：jQuery-01