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) {
    // 路由离开前触发的守卫
}