VueJS学习笔记

写在前面

原本是打算写一个VueJS学习笔记专栏，用于记录vue学习过程中的一些感想，但后来想想，如此做实在是太麻烦，并且每篇文章的篇幅也会比较短，所以现在考虑直接在这一篇博文中进行总结。将学习过程中的感谢或者踩得一些坑直接记录在此一篇文章中，尽量做到每个点都短小精悍。该篇博文并非最终稿，内容会随着文章的更新不断丰富。

官方中文文档：

Guide：https://cn.vuejs.org/v2/guide/
API：https://cn.vuejs.org/v2/api/
Style Guide：https://cn.vuejs.org/v2/style-guide/
Examples：https://cn.vuejs.org/v2/examples/

下面大部分内容都可以从官方文档中找到。这篇总结，仅将我个人认为有必要记录的进行汇总，以方便后续查找和回顾。

正文

在选项属性或者回调方法使用箭头函数会导致在方法内使用this获取不到vue实例

错误示范

1 2	created: () => console.log(this.a) vm.$watch('a', newValue => this.myMethod())

事件总线机制下，监听总线事件的回调方法要使用箭头函数，否则this指代总线实例。

mounted(){ // 挂载后执行
  EventBus.$on('event-name',data => { // 这里要用箭头函数，否则this指代EventBus
	this.data = data;
  })
}

v-bind、v-on、v-slot指令使用动态指令参数（2.6.0+）

1
2
3

<a :[attr]="value">...</a>
<a @[event]="value">...</a>
<template #[solt]>...</template>

attr、event和solt会作为一个javascript表达式进行求值

在DOM中使用模板时，避免使用大写字符来命名键名，因为浏览器会把attribute名全部强制转换为小写。
数据一般是从父组件流向子组件的，prop的值会因父组件中数据的改变而改变。
不要修改prop的值，如果一定要这么做，请使用计算属性或者data。
计算属性默认只有getter，但是我们也可以提供一个setter。

computed: {
  fullName: {
    // getter
    get: function () {
        return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
    }
  }
}

父组件中的data可以是一个对象也可以是一个方法，但是子组件的data属性必须是一个方法。
由于JavaScript的限制，Vue不能检测数组和对象的变化。也就是说对对象的属性或数组进行修改添加删除不会反应到视图中（但值的却改变了），可以使用vm.$set实例方法（全局方法的别名），或Vue.set全局方法。

var vm = new Vue({
  data:{
    lisi:{
      age: 16    
    }
  }
})
vm.lisi.age = 18; // 直接对对象属性进行修改是不会直接响应到视图中
vm.$set(this.lisi,'age',18); // 响应式

v-if和v-show的异同：

v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果
v-show指令通过修改元素的display属性让其显示或者隐藏

使用v-cloak指令解决页面加载时闪烁的问题
事件修饰符、按键修饰符以及系统修饰键
使用ref属性在父组件中调用子组件的方法。

<div id="app">
    <button @click="add"> Click this button {{count}} times.</button>
    <children ref="child"></children>
</div>
<template id="btn">
    <div>
        <button @click="add"> Click this button {{count}} times.</button>
    </div>
</template>
<script>
    var btn = {
        template: '#btn',
        data() {
            return {
                count: 0
            }
        },
        methods: {
            add() {
                this.count++;
            }
        }
    }
    const vm = new Vue({
        el: '#app',
        data:{
            count: 0
        },
        methods: {
            add() {
                this.count++;
                this.$refs.child.add(); // 调用子组件方法
            }
        },
        components: {
            'children': btn
        }
    })
</script>

VueJS学习笔记

写在前面

正文

感谢投食~