vue基础知识 部分 日常更新

• 生命周期

官方文档: https://cn.vuejs.org/v2/guide/instance.html
1. 创建前/后
beforeCreate：在beforeCreate生命周期执行时，data和methods中的数据还未初始化，所以此时不能使用data中的数据和methods中的方法
create：data 和 methods初始化完毕，此时可以使用methods 中的方法和data 中的数据 beforeMount：template模版已经编译好，但还未挂载到页面，此时页面还是上一个状态 mounted：此时Vue实例初始化完成了，DOM挂载完毕，可以直接操作dom或者使用第三发dom库
2. 挂载前/后
beforeMount
mounted
3. 更新前/后
beforeUpdate： 此时data已更新，但还未同步页面
updated：data和页面都已经更新完成
4. 销毁前/后
beforeDestory：Vue实例进入销毁阶段，但所有的 data 和 methods ，指令， 过滤器等都处于可用状态
destroyed： 此时组件已经被销毁，data，methods等都不可用

不要在选项 property 或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 this，this 会作为变量一直向上级词法作用域查找，直至找到为止，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

• vue常用操作

  1. 常用指令

     v- 前缀作为一种视觉提示，用来识别模板中 Vue 特定的 attribute。

     1. v-if 判断条件是否满足，决定元素是否生成或者销毁

     2. v-for 循环生成当前元素

     3. v-show 判断条件是否满足，决定元素是否显示隐藏

     4. v-bind 缩写 ':' 响应式地更新 HTML属性

     5. v-on 缩写 '@'

     6. v-model 动态绑定数据

     7. v-html 在当前元素内解析渲染html代码

     8. v-text 将当前元素的内容替换为指定的文本内容

     9. v-once 渲染一次，后续数据变动与当前元素无关

     10. v-cloak 和CSS规则如 [v-cloak] { display: none } 一起用，可以隐藏未编译的 Mustache 标签直到实例准备完毕

  2. 常用修饰符

     1. 事件修饰符

        1. .stop 阻止事件冒泡
        2. .prevent 阻止事件默认行为
        3. .self 事件绑定的元素本身触发时才触发回调
        4. .once 事件只能触发一次，第二次就不会触发了
        5. .native 将一个vue组件变成一个普通的html，使其可以监听click等原生事件

        ok
        
        

     2. 表单修饰符

        1. .lazy 在输入框输入完内容，光标离开时才更新视图
        2. .trim 过滤首尾空格
        3. .number 如果先输入数字，那它就会限制你输入的只能是数字;如果先输入字符串，那就相当于没有加.number

     3. 键盘修饰符(在v-on上添加)

        1. .enter => // enter键
        2. .tab => // tab键
        3. .delete (捕获“删除”和“退格”按键) => // 删除键
        4. .esc => // 取消键
        5. .space => // 空格键
        6. .up => // 上
        7. .down => // 下
        8. .left => // 左
        9. .right => // 右

        可以自定义按键别名

        // 可以使用 `v-on:keyup.f1`
        Vue.config.keyCodes.f1 = 112
        
        

        系统辅助按键，仅在以下修饰符对应的按键被按下时，才会触发鼠标或键盘事件监听器

        1. .ctrl
        2. .alt
        3. .shift
        4. .meta(菜单键)
        5. .exact 没有任何系统修饰符按下的时候触发

        
        
        
        
        做一些操作
        
        

     4. 鼠标修饰符

        1. .left
        2. .right
        3. .middle

• 按需加载组件

  1. 使用() ⇒ import()

  2. 使用resolve => require(['./ComponentA'], resolve)

• 组件通信

  1. 父子组件通信

     1. 父往子传值， 使用props

        //父 a.vue
        
        
        //子 b.vue
        export default{
            ...
            props:{
                test:{type: String, default: 'abc'}
            }
            ...
        }
        

     2. 父调用子方法

        //父 a.vue
        
        export default{
            ...
            methods:{
                show(){
                    this.$refs.bRef.show();
                },
            }
            ...
        }
        
        //子 b.vue
        export default{
            ...
            methods:{
                show(){
                    ...
                },
            }
            ...
        }
        

     3. 子往父传值

        //父 a.vue
        
        export default{
            ...
            data(){
                return {
                    message: '',
                },
            }
            ...
        }
        
        //子 b.vue
        
        export default{
            ...
            props:{
                test:{type: String, default: 'abc'},
            },
            data:{
                message:'',
            },
            methods:{
                change(){
                    this.$emit('update:test', message);
                },
            }
            ...
        }
        

     4. 子调用父方法

        //父 a.vue
        
        export default{
            ...
            methods:{
                show(a){
                    ...
                },
            }
            ...
        }
        
        //子 b.vue
        export default{
            ...
            methods:{
                show(){
                    this.$emit('show','123');
                },
            }
            ...
        }