自己对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

指令

• v-show v-if
• 区别 v-if是删除和新增dom控制的显示隐藏 v-show是使用css样式控制的显示隐藏
• v-html v-text
• v-text 会把变量中的标签当成字符串渲染 v-html 会解析标签 页面上不显示
• v-model 作用： 数据双向绑定 原理： Object.defineProperty({set: ‘’,get: ‘’})
• this.变量 = ‘值’ 得时候 会调用 set方法设置数据
• 在dom中渲染该变量的时候会调用get方法
• v-for 作用 循环
• v-for 循环数组的时候 有两个变量 第一个是 数组项 第二个是索引值
• v-for 循环对象的时候 有三个变量 第一个是value 第二个key 第三个索引值
• v-bind 绑定数据 绑定一个属性 属性的值可以是一个变量 v-bind可以缩写成一个：

<div v-bind:自定义属性（也可以是标签自带的属性）="{{变量}}"></div>
<div :自定义属性（也可以是标签自带的属性）="{{变量}}"></div>

• v-on 绑定事件 可以缩写成@ 事件可以添加修饰符 例如 v-on:click.stop v-on:submit.prevent 还可以混用 v-on:submit.stop.prevent
• 还可以监听键盘按键 v-on:click.enter 意思就是用户点击enter事件时会触发函数

<div v-on:click="函数名称"></div>
<div @click="函数名称"></div>

• v-once 只渲染一次
• v-pre
• v-cloak

插槽

具名插槽

• 组件中定义的插槽

<div>
<slot></slot>
<slot name="a"></slot>
<slot name="b"></slot>
</div>

• 使用组件的地方

<div>
    <组建名>
    <!--  这个内容会替换没有名字的插槽 -->
    abc
    <template v-slot="a">
    <!-- template中的内容会把a插槽替换掉 -->
        <div>这个是a插槽的内容</div> 
    </template>
    <template v-slot="b">
    <!-- template中的内容会把b插槽替换掉 -->
        <div>这个是b插槽的内容</div> 
    </template>
    </组建名>
</div>

<script>
import 组建名 from "组件地址"
export default {
    components: {
        组建名
    }
}
</script>

作用域插槽

<div>
<slot a="a" b="b" :c="变量"></slot>
</div>

• 使用组件的地方

<div>
    <组建名>
    <!--  利用作用域插槽可以拿到插槽中绑定的值 或者变量 绑定的属性可以是自定属性 -->

    <template v-slot="{a, b ,c}"> 
    </template>
    </组建名>
</div>

<script>
import 组建名 from "组件地址"
export default {
    components: {
        组建名
    }
}
</script>

组建之间传值

父组件向子组件传值

• 在父组件中通过自定义属性绑定要传递的变量
• 在子组件文件中通过props接收 props的值
• props的值可以是一个数组 props: [‘自定义属性’]
• props 的值还可以是一个对象 props: {
  自定义属性： {
  type: 数据类型
  required: ‘是否必传’,
  default: 默认值
  }

}

子组件向父组件传值

• 在子组件中映射一个自定义事件
• 例如

<button @click="func"></button>

methods: {
    func() {
        this.$emit('自定义事件名'，要传递的参数)
    }
}

• 使用 在父组件的子组件注册命中 直接@自定义的事件名 可以触发对应事件的函数

<组件名 @自定义事件名="函数"></组件名>

非父子组建传值

• 可是使用bus总线
• bus总线其实是一个vue的实例化对象
• 1）可以在main.js 中写 var bus = new Vue() 可以放在根组件的data中
• 使用 传递事件时 this.$root.bus.$emit(‘自定义事件’, 传递的参数)
• 使用 监听事件时 this.$root.bus.$on(‘自定义事件’, function(传递过来的数据)
• 2）创建一个 bus.js 文件 在文件中 var bus = new Vue() export default bus
• 在main.js中引入 import bus from ‘bus.js’
• vue.propotype.bus = bus
• 使用 this.bus.$emit(‘自定义事件’, 传递的参数)
• 使用 监听事件时 this.bus.$on(‘自定义事件’, function(传递过来的数据)

生命周期

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

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

来源：CSDN

作者：wang_jiejie_

链接：https://blog.csdn.net/wang_jiejie_/article/details/103477272