1.v-show 如果为false 只是添加了一个display=true的描述，没有被真正的删除。
2.v-if 如果为false 是真正的在dom节点下删除这个节点
3. 数组更新检测
push() pop() split(),sort,reverse(),unshilf(),shilf()都可以影响原数组
filter(),concat(),slice(),map()新数组替换旧的数组，原数组不会改变，视图不会刷新
通过索引值来修改原数组的方式 原数组收到影响，但视图不会刷新
可以使用 datalist.splice(0,1,"chenchen")就可以了 删除从第0个开始的第一个
或者使用Vue.set(vm.datalist,0,"chenchen")
4.解决冒泡问题
孩子节点触发一个事件，父节点的事件也被触发了 冒泡问题
在调用孩子节点方法的时候，其父亲节点的方法也被触发了
原生的解决方法是调用$event.stopPropagation方法阻止，而在vue中，直接在 @click.stop
或者可以在父节点上使用@click.self来确保只有自己被点击了才触发方法
5.阻止默认行为
例如a标签的跳转 <a href="www.baidu.com" @click.prevent="handleChangePage()"> 百度一下 </a>
原生 $event.preventDefault()阻止默认行为
vue使用@click.prevent
6.过滤应用
当还没有学习计算属性的时候，可以采用复制data的方式来过滤应用，复制一份相同的列表，在方法中过滤后再进行赋值
var newList = this.list.filter(item=>item.indexOf(this.mytext)>-1)
this.dataList = newList
7.axios示例
new Vue({
el:"#box",
data:{
datalist:''
},
methods:{
handleClick(){
axios.get("./js/test.json").then(res=>{
console.log(res.data.data.films)
this.datalist=res.data.data.films
}).catch(err=>{
console.log(err);
})
}
}
})
8.fetch示例
new Vue({
el: "#box",
data: {
dataList: []
},
methods: {
handleClick() {
fetch("js/test.json").then(res => res.json()).then(res => {
console.log(res.data.films)
this.dataList = res.data.films
})
}
}
})
9.计算属性
计算属性要比方法性能更高，在多个地方使用得话，计算属性只需要计算一次，而方法要调用多次，计算属性会缓存依赖的状态改变了，计算属性会重新计算一遍
10.利用计算属性解决知识点6
computed: {
getMyDataList(){
return this.list.filter(item=>item.indexOf(this.mytext)>-1)
}
}
11.vue更新原理
<!--更新原理就是被Setter方法拦截， 渲染函数，其实就是新的dom节点和老的dom节点进行对比.
然后调用diff算法以补丁的形式打到真实的dom上。
diff怎么对比的？
1.dom节点同层级对比。
2.按照同key值对比
3.同组件对比
两个标签一样，还会进行对比
-->
12.组件
//扩展html元素，封装可重用代码
// Vue.component
//组件编写与Vue实例的区别
//自定义组件需要有一个root element
//父子组件的data是无法共享的
//组件可以有data,method,computed 但是 data必须是一个函数
Vue.component("navbar",{
template:`<div style="background:yellow">
<button @click="handleClick()">返回</button>
{
{navbarname}}
<button>首页</button>
<child></child>
<navbarchild></navbarchild>
</div>`,
methods: {
handleClick(){
alert("返回")
}
},
data(){
return {
navbarname:"navbarname"
}
},
//局部定义组件
components:{
navbarchild:{
template:`<div>navbarchild----只能在navbar中使用</div>`
}
}
})
13.父组件传子组件（使用动态绑定）
-如果想传递一个对象的话使用动态绑定
//属性验证 校验一下父组件传过来的值是否符合属性 null为不限制类型
props:{
myname:String,
myshow:Boolean
}
14.子组件传递父组件
子传父用的是事件向上传，
在子组件中调用 this.$emit("父组件中的方法")
<body>
<div id="box">
父组件
<child @myevent="handleEvent($event)"></child>
</div>
</body>
<script>
Vue.component('child', {
template: `<div>
child子组件
<button @click="paymoney()">click</button>
</div>`,
data() {
return {
chilrdName: "子组件得状态"
}
},
methods:{
paymoney(){
this.$emit("myevent",this.chilrdName) //分发事件
}
}
})
new Vue({
el: '#box',
methods: {
handleEvent(ev) {
console.log("父组件收到钱了"+ev)
}
}
})
</script>
15.ref通信
ref 放在标签上 是一个原生节点
ref 放在组件上， 是一个组件对象
点击完会获取组件的对象。通过this.$refs.组件名.组件中的方法可以调用组件中的方法。
16.非父子组件的通信
（1）.//中央事件总线
var bus = new Vue();//一个空的Vue实例就i是中央事件总线
（2）. //推送一个消息
bus.$emit("weixinmessage",this.$refs.mytext.value);
（3）在一个合适的地方进行监听
//这是一个生命周期函数
mounted() {
//用总线进行监听
bus.$on("weixinmessage",(data)=>{
console.log("收到推送"+data)
})
console.log("生命周期函数，当前组件dom创建完成 就会调用")
}
<!--监听的用$on 被监听的用$emit-->
17.动态组件 使用:is
<!--动态组件可以帮助我们更加方便管理多个组件
<component>元素动态绑定多个组件到他的is属性上 这样会删除组件
<keep-alive>保留状态，防止重新渲染
-->
18.slot 插槽
<!--前景，想在组件中添加一个div,但是会被template完全覆盖，这时候，
在孩子组件中添加一个<slot>标签，插槽就是预留的位置，
slot 内容分发 把父组件的内容分发到孩子组件中
1. 目的：就是把父组件的内容与子组件的内容进行混合
为什么要这么写？写死不行么?
在其他页面也需要的时候，写死就不行了,组件使用别人的，数据使用自己的 ，就是不知道以后要写什么，预留出来的
2.改造子传父
-->
<!-- 父组件的内容在父组件作用域内编译，子组件的内容在子组件作用域编译-->
3.在child里想把111放在child上面，把222放在child下面
使用具名插槽 具有名字的插槽
<child>
<div slot="a">1111</div>
<div slot="b">222</div>
</child>