Vue基础

一.组件

1.Vue使用组件的三大步骤
(1).定义组件
(2).注册组件 在components
(3).使用组件 编写组件标签

2.VueComponents:
1.组件本质上就是一个名为VueComponents的构造函数且不是程序员自己定义的，是Vue.extnd生成的

2.我们只需要写标签 Vue解析时会帮我们创建组件的实例对象 Vue帮我们执行： new VueComponents（options）
3.特别注意：每次调用Vue.extnd 返回都是一个新的VueComponents

3.关于this的指向

1.组件中：
data 、methods、watch、computed中的函数 他们this.指向均是【VueComponents】不能使用el指定
2.new Vue（）中：
data 、methods、watch、computed中的函数 他们this.指向均是  【Vue实例对象】
3.一个重要的内置关系:
VueComponents.prototype.__proto__ === Vue.prototype
 为什么要有这个关系？
让组件实例对象可以访问到Vue原型上的属性和方法

4.组件自定义事件

//通过父组件给子组件传递 props实现：子给父传一般都props一般都是父给子传

使用：

<Search :name="getName"/>
//Search组件标签

//使用
methods：{
name(){xxxx}
}

//通过父组件给子组件绑定一个自定义事件：子给父传递数据 $emit

<Search @name="getName"/>


methods:{
getName(){xxxx}
}


子组件：
methods:{
name(){this.$emit('getName',要传的数据)}
}

通过父组件给子组件绑定一个自定义事件：子给父传递数据ref实现

<Search ref="getName"/>

 mounted(){
        this.$refs.getName.$on('getName',this.getName)  		                     
        this.$refs.getName.$once('getName',this.getName)//只使用一次
    }

子组件：
methods:{
name(){this.$emit('getName',要传的数据)}
}
一般需要特殊的逻辑时使用ref

5.解绑自定义事件

<Search @name="getName"/>


//只能解绑一个自定义事件
this.$off('getName')
this.$off(['getName' ,'****']) //解绑多个个自定义事件
this$off()//所有的都解绑
this.$destroy() //销毁当前组件的实例对象，销毁后实例对象的事件就没了

6.组件间传数据 

1.props 功能：让组件接收外部传来的数据

1.数据传递： 

<Dome ***=""> //Dome组件标签 ***转入的对象

//接收的数据限制类型


props:{
type:number ，string
default: ** // 默认的值
required:true //必需传入
}


简单接收：
props:[ '   '  ,'   ' ,'    '    ] 
 //外部传入的数据不建议修改只允许读取，如果就要修改那就再声明一个变量赋值，修改你声明的变量

7.mixin混入

功能：可以把多个组件共用的配置提取成一个对象
使用方法：

第一步定义混合，如：

{
data(){....}，
methods:{....}
}

第二种使用混入，列如：

1.全局混入 在main.js中 先引入  Vue.mixin（xxx）
2.局部混入 mixins：['xxx','xxx']

8.插件

本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
定义插件：

插件名.install = function（vue.option）{
//添加过滤去
Vue.filter(.....)
//添加全局指令
Vue.directive(.....)
//添加全局混入
Vue.mixin(.....)
//添加实例对象
Vue.prototype.$myMethod = function(){......}
}

使用：

Vue.use（插件名）

9.scoped样式

作用：让样式局部生效，防止冲突
写法：<style scoped>  </style>

二.浏览器本地存储webStorage

1.存储内容大小一般为5mb左右
2.浏览器通过Window.sessionStorage 和 Window.localStorage本地存储机制
3.相关API：
 

1.xxxxStorage.setItem('key','value') // 该方法接收一个键和值作为参数，会把键值对添加到存储中，如果键值对存在则进行替换
1.xxxxStorage.getItem('person')//该方法接收一个键名作为参数，返回键名对应的值
1.xxxxStorage.removeItem('key')//该方法接收一个键名作为参数，删除该键值对
1.xxxxStorage.clear() //清空存储的所有数据

2.sessionStorage  与 localStorage区别
1.sessionStorage存储的数据会随着浏览器窗口的关闭而消失
2.localStorage存储的内容，需要手动的清楚才会消失
3.xxxxStorage.getItem('person') 如果对应的person的value获取不到，那么返回的是null
4.JSON.pare(null)结果也是null

三.全局事件总线

1.一种组件间通信的方式，适合任意组件通信

2.安装全局事件总线：main.js文件

new Vue({
..............................
beforeCreate(){
Vue.prototype.$bus = this//安装全局事件总线，$bus就是当前应用的vm
}，
....................................
})

3.使用全局事件总线

1.接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调在A组件自身

methods(){
demo(data){......}
..........
}
mounted(){
this.$bus.$on('xxx'.this.demo)}

2.最好在beforeDestroy钩子中，使用$off去解除当前组件用到的事件

四.$nextTike

使用：
1.this.$nextTike('回调函数')
2.作用：在下次DOM更新结束后执行指定的回调
3.什么时候用：当数据改变后，要基于更新后的新DOM进行操作的时候，要在nextTike所指定的回调函数中执行也可以理解为异步执行任务

五.插槽

1.作用，让父组件可以向子组件指定位置插入html结构，也是一种组件通信方式

1.默认插槽:

父组件中
<add>  <html标签> </add>//<add>为组件标签
在子组件中标签
<slot>   </slot>

2.具名插槽:

父组件中：
<add>  <html标签 slot=' 子组件中插槽的名字xx'> </add>//<add>为组件标签
在子组件中标签：
<slot   name='   插槽名字  '>   </slot>

3.作用域插槽:

父组件中：
1.<add> 
<template scope='xxx'> //scope接收数据 需要加template 
	 <html标签> 
 </template>
</add>   //<add>为组件标签
子组件中：
<slot :xxx='xxx'>   </slot>//传入数据可以传多个