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 判断条件是否满足，决定元素是否生成或者销毁
```
<div v-if="true"></div>
<div v-else></div>
```
  2. v-for 循环生成当前元素
```
<div v-for="(x, i) of [1,2,3]" :key="i"></div>
```
  3. v-show 判断条件是否满足，决定元素是否显示隐藏
```
<div v-show="true"></div>
```
  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等原生事件
```
<Tag @click.native="handleClick">ok</Tag>
```
  2. 表单修饰符
    1. .lazy 在输入框输入完内容，光标离开时才更新视图
    2. .trim 过滤首尾空格
    3. .number 如果先输入数字，那它就会限制你输入的只能是数字;如果先输入字符串，那就相当于没有加.number
```
<input type="text" v-model.trim="value">
```
  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 没有任何系统修饰符按下的时候触发
```

<input @keyup.alt.67="clear">


<div @click.ctrl="doSomething">做一些操作</div>
```
  4. 鼠标修饰符
    1. .left
    2. .right
    3. .middle

按需加载组件

使用() ⇒ import()

<template>
    <div>
       <ComponentA />
       <ComponentB />
    </div>
</template>
<script>
const ComponentA = () => import('./ComponentA')
const ComponentB = () => import('./ComponentB')
export default {
    // ...
    components: {
    ComponentA, 
    ComponentB 
    },
    // ...
}
</script>

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

<template>
    <div>
       <ComponentA />
    </div>
</template>
<script>
const ComponentA = resolve => require(['./ComponentA'], resolve)
export default {
    // ...
    components: {
    ComponentA
    },
    // ...
}
</script>

组件通信

父子组件通信

父往子传值，使用props

//父 a.vue
<b :test="'ab'"></b>

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

父调用子方法

//父 a.vue
<template>
    <b ref="bRef"></b>
</template>
export default{
    ...
    methods:{
        show(){
            this.$refs.bRef.show();
        },
    }
    ...
}

//子 b.vue
export default{
    ...
    methods:{
        show(){
            ...
        },
    }
    ...
}

子往父传值

//父 a.vue
<template>
    <b :test.sync="message"></b>
</template>
export default{
    ...
    data(){
        return {
            message: '',
        },
    }
    ...
}

//子 b.vue
<template>
    <input v-model="message" :keyup='change'></b>
</template>
export default{
    ...
    props:{
        test:{type: String, default: 'abc'},
    },
    data:{
        message:'',
    },
    methods:{
        change(){
            this.$emit('update:test', message);
        },
    }
    ...
}

子调用父方法

//父 a.vue
<template>
    <b @show='show'></b>
</template>
export default{
    ...
    methods:{
        show(a){
            ...
        },
    }
    ...
}

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

vue基础知识 部分 日常更新

生命周期

vue常用操作

按需加载组件

组件通信

vue基础知识部分日常更新