vue知识点 && 错误点 => 持续更新
华丽丽的开篇 => 坑底爬起（想哭又想笑，想笑笑不出……）
—— 回顾过去，展望未来
1、错地不着边际：
Vue.component = ("TodoItem", { //如此优秀的操作你写不出，一支独秀从未被超越 0.0
})
or
正确：
Vue.component("TodoItem", {
})
2 this.$emit方法不能使用驼峰命名的函数
父子组件传值时，this.$emit("handlerDelete",index);父组件监听 @handlerDelete=""; 此时方法不会起效
vue.js:640 [Vue tip]: Event "deleteitem" is emitted in component <TodoItem> but the handler is registered for "deleteItem". Note that HTML attributes are case-insensitive and you cannot use v-on to listen to camelCase events when using in-DOM templates. You should probably use "delete-item" instead of "deleteItem".
解决方案：将驼峰转为小写 handler-delete 或者 handlerdelete
官网示例=> this.$emit('give-advice', this.possibleAdvice[randomAdviceIndex])
3 使用 v-if 结合 keep-alive 可提高性能
4 使用v-for 循环时可用template占位符解决一些问题,如下不想要显示最外层的div，则可用template替代
<div v-for="item in list"> <div> <span> {{ item.content }}</span> </div> <div> <span> {{ item.title }}</span> </div> </div>
即：
<template v-for="item in list"> <div> <span> {{ item.content }}</span> </div> <div> <span> {{ item.title }}</span> </div> </template>
5 v-for 改变数组方法：
a.数组的变异方法（如下）
-
push()pop()shift()unshift()splice()sort()reverse()
b.直接替换数组引用地址
c.使用set或$set 方法设置下标对应的值
非变异方法（不生效，因为没有改变原数组,而是生成了一个新数组）： filter()、concat() 和 slice()
v-for 改变对象方法：
a.直接替换对象引用地址
b.使用set或$set 方法设置key对应的value
6组件不能插入 ul或tr 里边，此时结合 vue的 is="组件名" 即可解决
7 通过vm.$refs.content 获取dom或组件 （content 为属性ref='content'）
8 子组件中声明数据=>采用函数返回对象这种形式可以使子组件有一个全新的数据副本，防止子组件公用一套数据，导致一个地方修改全部都修改的错误
data:()=>{
return {
myData:' ';
}
}
9 父子组件传值 props 可指定 类型，校验，是否必填, 默认值 ；父组件传递过来的值不可更改，单项数据流概念
props：{
content：{
type:[String,Number]
required:true,
default:'default value',
validator:function(value){
return value.length > 5;
}
}
}
10 非父子组件传值 vuex 或 bus （发布订阅模式实现）
11 插槽 与具名插槽
父组件中：
<div slot = 'one'></div>
对应组件声明内
<slot name = 'one'></slot>
12 作用域插槽，组件内循环 且DOM由父组件传入决定
13 动态组件 <component :is="type"></component>,显示对应组件
vue.component('child-one',{
template:'<div>child one</div>'
})
vue.component('child-two',{
template:'<div>child one</div>'
})
note:如果不使用动态组件，使用v-if="type=='child-one'" 或 v-if="type=='child-two'"这样来显示不同的组件，则在组件中的 div 添加 v-onece,将组件放入缓存以节约性能
<div id="app">
<child-one v-if='type="child-one"'></child-one>
<child-two v-if='type="child-two"'></child-two>
<button @click="handlerBtn">handlerBtn</button>
</div>
Vue.component('child-one',{
trmplate:<div v-once>child-one</div>
})
Vue.component('child-two',{
trmplate:<div v-once>child-two</div>
})
14 事件修饰符
@click.stop => 阻止事件冒泡 => event.stopPropagation()
@click.capture => 事件捕获=> 事件从外到内
@click.prevent => 禁止默认事件 event.preventDefault()
@click.once/@click.prevent.once => 只起效一次
@click.self => 点击自身才出发
15 v-model
v-model.lazy=""
v-model和lable的结合使用
v-model.number=""
v-model.trim去除首尾空格
16 绑定class / style写法
:class="{first : classdemo}"
:class="{first : classdemo,'firstfontsize' : classdemo}"
:class="[classdemo ? 'firstcolor' : '' , firstsize]" (此处firstsize为 data中声明的变量)
:class="[classdemo ? 'firstcolor'+ 'add' : '' , firstsize]" (此处firstsize为 data中声明的变量)
