条件渲染
v-if 与 v-show 的区别
1、他们都能实现元素的显示和隐藏
2、v-show只是简单的控制元素的display属性（不管条件为真还是为假，这个元素都会被渲染出来）；而v-if才是条件渲染（条件为真，元素会被渲染，条件为假，元素会被销毁）。
3、v-show有更高的首次渲染开销；v-if的首次渲染开销要小很多。
4、v-if有更高的切换开销，v-show切换开销比较小。
5、v-if有配套的 v-else-if 和 v-else，而v-show没有。
6、v-if可以搭配template使用，而v-show不行。
mixins混入
定义里一个对象，这个对象包含有vue组件实例相关的选项的一个对象，可以混入到实例vue中，就变成了一个公有属性。data如果是一个混入对象的选项，那么data需要设置为工厂模式，否则实例vm1修改data里的内容，也会影响到vm2里的内容。除了 el 与 propsData 这两个选项之外，其他的选项都可以写在定义的对象中混入。
var vm1 = new Vue({
el:"#app1",
mixins:[common],
data:{
mes:"world",//自身有就用自身的
title:"toutou"
},
//生命周期函数 两个都会执行 自身和公用都有的话，先执行公有的，再执行自身的
mounted(){
console.log("自身的")
}
})
组件
- 组件的三大原则：==灵活性、复用性、高度可扩展性==。
组件中的使用情况
1、 组件的使用，先注册，然后用组件名字做为标签来使用。
2、 组件必须要有一个 template 选项，来指定这个组件的模板内容。
3、 组件的data选项，必须是一个函数返回对象的形式。
4、 组件的命名不能跟html标签冲突。
5、 组件的template选项只能有一个根元素（就是只能有一个大盒子）。
6、 全局注册的组件 Vue.componet 必须写在 new Vue之前。
7、 组件的命名可以尽量使用短横线方式，也可以用驼峰式命名；但是使用的时候需要换成短横线方式，否则会报错找不到。
- 7.1 使用 x-template 的script标签的方式的时候可以不用考虑短横线命名的规则；使用单文件组件，也不需要考虑这条规则。
组件注册分为全局注册和局部注册
1、全局注册 Vue.component（组件的名字，组件的选项对象）
2、局部注册 components 写在Vue实例的内部
全局注册与局部注册的区别
局部注册的组件，在谁身上注册的就只能用在那个身上。
全局组成的组件可以在任意地方使用，但是必须要在 new Vue之前注册。
组件的写法
直接使用 模板字符串的方式 template标签
使用单文件组件 （推荐）
使用 script 标签的方式 type="text/x-template"
组件的通信
- 父与子的通信
1、需要在子组件中定义props选项，来确定我需要哪些prop。
2、父组件在调用子组件的时候，需要传递prop下来，使用prop作为自定义属性来写在子组件的标签身上。
父组件给子组件传递一个属性prop，子组件用props接收后，就可以使用父组件的prop。
- 子与父的通信
1、父调用子组件的时候，在子组件标签上绑定一个自定义事件。
2、子组件在某个时刻，触发父亲给绑定事件。
父组件给子组件绑定一个自定义事件，子组件需要修改的时候，触发父组件绑定的事件并且传递参数过去，父组件接收后就可以修改了。
组件之间的通信除了用props父传子，$emit子传父，还有一些特殊操作（不推荐）
1、ref 用在组件标签上，通过$ref获取到DOM元素直接修改上面的内容
2、$root 实例属性可以拿到跟组件对象，也就是new Vue 出来的实例
3、$parent 实例属性，可以拿到当前组件的父组件的实例对象
4、$children 实例属性，去获取子组件的实例，得到的是一个子组件实例的集合
ref属性
- ref这个属性，可以写在标签上，也可以写在组件标签上。
- 写在标签上使用$refs获取到的是 DOM对象
- 写在组件标签上获取到的是 组件对象
v-model 其实是一种语法糖形式
<input type="text" :value="name" @input="name = $event.target.value" />
注：$event
1、 $event用在普通的标签上，代表着事件对象。
2、 $event用在组件的标签上，代表着触发这个事件是传递过来的参数。
插槽
默认在组件开始标签与结束标签中写的内容是无效的，如果需要将内容渲染出去，就需要使用插槽 slot 。
slot 是不限制次数的。
slot 是可以命名的；slot 组件上使用 name 属性给他命名，那个插槽模板内容要放到那个 slot 坑里面，就需要带着 name 的名字 slot=“name”。
slot 还可以有个默认不加锁的坑，没写name的就默认放在这个坑里。
作用域插槽
把组件内数据能够在插槽模板内容中使用。
使用步骤：
1、在 slot 标签上写自定义的属性，但是不能是 name。
2、在相应的 slot 的插槽模板内容上面使用 slot-scope 接收第一部中传递过来的 porp集合。
插槽新语法，具名插槽（v-slot可以简写成 # ）
1、先在组件中的template中的slot标签上定义一个名字，但是不能是name。
2、在页面上用<template v-slot:msg></template>标签，里面写v-slot:msg,也可以接收参数v-slot:msg=“obj"，obj是一个对象，可以传入多个属性。
Vue.component('hello',{
template:`
<div>
<slot :msg="msg"></slot>
</div>
`
})
//页面上使用
<template v-slot:abc="obj">
<h1>我是新写法--{{ obj.msg }}</h1>
</template>
注：其实<slot></slot>空标签有一个默认default属性。
<template v-slot:default="obj">
</template>
非props特性
在使用组件的时候，在组件标签上写的特性，如果组件内部没有通过props选项去接收，那么这个特性就叫做非props特性，非props特性会自动写入到组件的根元素上。
- 非props的合并和替换已有的特性
除了class和style不会被替换，其他属性都会被替换，除了class和style会被合并，其他属性都不会被合并，只会替换。
禁用特性继承 inheritAttrs: false
inheritAttr：false 不会影响style和class的绑定。
获取非props特性
$attrs 能够拿到非props特性，但是class和style拿不到。
生命周期钩子
生命周期分为八个步骤：
1、beforeCreate （创建之前）
2、created （创建之后）
3、beforeMount （挂载之前）
4、mounted （挂载之后）
5、beforeUpdate （更新之前）
6、updated （更新之后）
7、beforeDestroy （销毁之前）
8、destroyed （销毁之后）
一般在beforeDestroy这个生命周期做一下清除的事情（比如清除定时器，监听滚动条）
想要拿到组件中的dom元素，需要在mounted这个生命周期函数之后才能获取到。
通过axios发ajax请求
使用axios需要先引入axios的js
和jquery一样，axios有三种写法：
axios(
{url:"url地址"，
methods:'get',
params:{
data:'请求带过去的东西'
}).then();
axios.get(url,options);
axios.post(url,options);
还可以对 axios 做一个请求或响应拦截，实现登陆校验的验证，验证token
fetch发ajax请求
// fetch 的get请求方式
fetch(url).then(res=>{
return res.json(); //通过fetch获取到的需要通过json转换拿到想要的数据
}).then()
//转换之后还需要return回去下面继续链式调用
// fetch post请求方式
fetch('url',{
method:'post',
body:JSON.stringify({ 可以带参数去请求，但是要转换成json字符串格式
username:'zhangsan',
password:'123'
})
})
注意： fetch有个问题，获取失败，但是第二个.then会执行，
请求404没找到catch抓取不到，不会走到catch回调中去。