Vue 总结 --2020.3.29
Vue -- 目前前端最火的三大js开发框架之一，尤雨溪开发的个人项目。
15年在吸收了react框架和angularJS框架的一些本身特点后 研发的js 前端框架，
它包含了react里对虚拟Dome 的操作的特点和angularJs 的指令的特点。
Vue 介绍
vue 是遵循 mvvm 架构的js 框架 vue核心库只关注视图层，开发者只需要关注v-m 的映射关系 和逻辑的处理。
vue 指令
v-if / v-show :用来判断是否加载 区别 v-show 是对css样式进行切换 v-if 是真正的销毁和重建
v-for: 可以循环数据来添加dome 实例 v-for="(item,index) in 数据"；
v-on : 简写 @ vue中用来添加事件
v-html： 用来编译模板语法
v-bind：简写 ： 对标签中的属性进行动态的一个绑定 实例 <div v-bind:class="数据"></div> 里面可以做一些逻辑判断
v-model : vue中可以数据双向绑定 v-model 本质上是语法糖
v-solt : 提供具名插槽或需要接收 prop 的插槽
vue 计算属性、监听属性
computed ： 计算属性 当一个数据是通个几个其他数据得来的时候就 会用到 computed 计算属性
watch : 监听属性，当进行一些响应数据变化，异步开销比较大是这个是非常合理的
vue 组件
vue 中组件 是一个小的vue 实例 vue实例中的属性和方法 组件 身上都有，
只是多了template 模板; 里面的data必须是一个函数，
return 出对象数据。
var fit = {
data:function(){ return { } ， template:``
}
全局 组件 vue.component ('定义的标签名'，fit)
局部 组件 var Vm = new Vue ({ el:'#app' , components:{ '定义的标签名': fit } })
里面可以通过插槽来添加 需要的标签 vm.component('定义的标签名'{ data：{数据}，template:`<div><button><button><slot></slot>(插槽)</div>` })
vue 组件中的is切换
在实例、组件的模板中的某一个标签上，可以通过is属性来指定为另一个目标的组件，这个时候我们一般会使用component标签来占位、设置is属性来指定目标组件，
**重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可 以用一个 元素将其动态组件包裹起来。
<keep-alive><compontne :is = "type"></component></keep-alive>
data:{ type : 'but'}
components:{
'Nav':{<template>内容</template>}
'tab':{<template>内容</template>} //这个会出现
}
结合组件用的Keep-ailve vue内置组件
1.当进行组件切换时不想组件进行销毁是就包裹上 <keep-alive> 它会将组件进行缓存。
凡是被keep-alive 包裹的组件，都会多出两个生命周期activated(活跃状态),deactivated(缓存状态)，
你可以在这两个生命周期中进行一些操作
2.属性
include - 包含 那些组件被缓存中进行缓存 （可以是字符串也可以说是表达式）。
exclude - 排除 哪些组件不会在缓存中缓存 （可以是字符串也可以说是表达式）。
max - 数字。最多可以缓存多少组件实例。
vue 组件 之间的 传值
非父子：可以用事件订阅（有小问题 -- 浪费性能）
1.子住文件mine.vue文件 中给Vue原型添加一个公共的对象 ，这个对象是一个Vue的实例， Vue.prototype.任意值 = new Vue();
传递在：在传递数据的组件添加自定义事件 ，通过this.任意值.$emit('自定义事件'，需要传递的数据)
接收： 在需要接收数据的组件，同过this.任意值.$on('自定义事件'，一个回调函数)。
2.手动封装事件订阅 $on , $emit ,$off
3.EventBus
4.vuex
子传父：
1.通过 this.$emit('事件'，带的参数)
接收：当子组件在父组件中当做标签使用的时候，给子组件添加一个自定义方法，值为需要传递的数据，函数不允许加（）
传递：在子组件内部，通过this.$emit(绑定的自定义事件，需要传递的值) 进行数据的传递
2.插槽作用域
父传子 ：通过 prop 不可以在子组件中对props 里的数据进行修改
传递：当子组件在父组件当做标签时用的时候，给子组件添加一个自定义的属性 ，值为需要传递的数据，
接收：在子组件内通过props 来进行接收
props 接收的方式有两种，一种是数组，一种是对象
数组：['自定义属性']
对象 ： {
type:规定传递过来的数据类型
default:定义默认的数据，当父组件没有给子组件传递数据的时候用默认值，
required:如果设置为true的时候则代表数据必须传递。
}
还有一些不推荐使用的方法
1.$root 能够获取到根组件的实例对象
2. $parent 获取父组件的实例对象
浙公网安备 33010602011771号