vue中知識點詳細總結

總結

搭建項目

第一類是腳手架搭建

• vue-cli腳手架的環境 node vue-cli
• 下載nodejs安裝到本地 全局安裝vue-cli
• cli安裝命令 npm install -g @vue/cli
• 創建項目 vue create 項目名稱
• 可以選擇兩種方式
• 第一中默認方式（不推薦）
• 第二種 自定義方法
• 選擇history模式（大部分情況選擇no）
• 其他自定義選項使用 上下鍵選擇 空格鍵可以選中或取消選中
• vue-cli2 的項目搭建命令
• cli 安裝命令 npm install vue-cli -g
• 創建項目的命令 vue init webpack 項目名稱

第二種 webpack搭建項目

• 兩個重要的依賴
• 第一個 vue-loader
• 第二個 vue-template-compiler

生命週期

• berforeCreate() 這個是dom創建之前觸發的函數 這時候還沒有data和methods 所以無法調用data中的數據和methods裏面的方法
• created() dom創建的函數 裏面不能直接獲取dom 如果要在created()中獲取dom 需要使用this.$nextTick() $nextTick是在dom更新完成後調用的方法 他是基於promise的一個方法 會有延遲

• beforeMounte() dom 創建完成 但是還未渲染
• mounted() dom渲染完畢 在這個裏面不需要任何方法 可以直接使用js方法獲取dom
• beforeUpdate() 數據更新之前觸發的函數
• updated() 數據更新的時候觸發的函數
• activated() keep-alive組件激活的時候觸發的函數

<keep-alive>
<router-view></router-view>
</keep-alive>

• deactivated() keep-alive組建停用時觸發的函數
• beforeDestory() 頁面銷燬之前觸發的函數 （新頁面的created要比老頁面的beforeDestory()先觸發）
• destoryed() 頁面銷燬觸發的函數

樣式 有沒有scoped屬性的區別

• 有scoped屬性樣式在別的組件中不生效
• 沒有scoped屬性 樣式相當於全局樣式

watch 監聽

• 監聽路由

watch: {
    '$route': function(to, from) {
        // to 是要進入的頁面的路由對象
        // from 是要離開的頁面的路由對象
    },
    '$route.path': function(to, from) {
        // to 是要進入的頁面的路由對象
        // from 是要離開的頁面的路由對象
    }
}

• 監聽數據

data() {
    return {
        count: 0,
        obj: {
            age: 0,
            name: ''
        }
    }
},
watch: {
    count(newVal, oldVal) { // 監聽數據變化

    },
    'obj.age': function(newVal, oldVal) { // 監聽對象中的某個鍵值得變化

    }
}

計算屬性

• computed()

<div>{{num}}</div>

computed：{
 num: function() { // 計算屬性開始時只計算一次 只有當裏面的依賴數據發生變化的時候纔會再次執行
//  比如該函數中的count發生變化的時候纔會觸發 
     this.count++
     var numVal = this.count
     return numVal
 }
}

 

路由

配置路由對象

• 在對應的js文件中引入vue-router

import vueRouter from 'vue-router'
import component1 from '組件文件地址'
const routes = [
    {
        path: '',
        name: '',
        component: component1
    }
    {
        path: '',
        name: '',
        component: import (要懶加載的組件文件地址)
    }
]
var router = new vueRouter({
    routes,
    scrollBehavior (to, from, savedPosition) {
        // return 期望滾動到哪個的位置
    }
})

• 動態路由 是在路由對象的path的地址中拼接一個 /index/:參數名稱
• 獲取動態路由的參數 this.$route.params 可以找到動態路由的參數

聲明式路由

• 直接在頁面裏面使用

router-link

• 必傳屬性 to屬性 to屬性的值可以是一個地址(字符串) 也就是路由對象配置的path
• to的值還可以是一個對象
• params 參數只有使用路由對象的name屬性跳轉時才能使用

<router-link :to="{path: '組件路由地址', query:{鍵值對}}"></router-link>
<router-link :to="{name: '組件路由對象的name', query:{鍵值對}}"></router-link>
<router-link :to="{name: '組件路由對象的name', params:{鍵值對}}"></router-link>

編程式路由

this.$router.push({
    path: '路由對象的path',
    query: {
        鍵值對
    }
})
this.$router.push({
    name: '路由對象的name',
    query: {
        鍵值對
    }
})
this.$router.push({
    name: '路由對象的name',
    params: {
        鍵值對
    }
})

路由守衛 路由攔截

全局路由守衛

//  全局前置守衛
beforeEach(function(to, from, next){ // 每次路由跳轉之前都會觸發
    // to 是要進入的頁面的路由對象
    // from 是要離開的頁面的路由對象
    // 只有執行了next()函數 路由攔截纔會繼續往下走
    //  next的參數可以是一個路由對象 也可以是一個地址如果給next傳了地址參數 他會跳轉到對應的地址頁面
    next()
})
//  全局的後置守衛
afterEach(function(to,from) { // 這時候頁面已經進入 所以不用next()

})

路由獨享守衛

{
    path: '/',
    component: component,
    beforeEnter(to, from, next) { // 進入地址爲path 的值得路由的時候纔會觸發的守衛

    }
}

組件內的守衛

//  組件內的前置守衛
beforeRouteEnter(to, from, next) {
    // 注意在該路由守衛中 this的指向不是當前的vue實例化對象
    next(arg => {
        // 這個參數就是vue的實例化對象
    })
}
beforeRouteUpdate(to, from, next) {
    // 在當前路由改變，但是該組件被複用時調用
    // 可以訪問組件實例 `this`
}
beforeRouteLeave(to, from, next) {
    // 路由離開前觸發的守衛
}