vue知识总结

允我心安 提交于 2019-12-11 18:42:27

总结

搭建项目

第一类是脚手架搭建

  • 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.root.bus.emit(‘自定义事件’, 传递的参数)
  • 使用 监听事件时 this.root.bus.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) {
    // 路由离开前触发的守卫
}
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!