一、传统方式和组件方式编写应用比较

传统方式编写应用

组件方式编写应用

组件：就是实现应用中局部功能代码和资源的整合

二、单文件

1、非单文件组件

1、什么是非单文件组件：一个文件中包含n个组件

2、单文件组件

一个文件只包含一个组件，单文件组件都是.vue结尾的

3、使用组件三大步骤

第一步：定义组件

第二步：注册组件

第三步：使用组件

备注：

1、组件名写法

一个单词组成

第一种写法：首字母小写如student

第二种写法：首字母大写Student

多个单词组成

第一种写法：kebab-case命名如my-student 注册的时候要用引号

第二种写法：CamelCase命名如MyStudent，需要vue脚手架支持

2、一个简写方式

const student = Vue.extend(options) 简写 const student = options

上面案例简写

const student = {
        /*自定义组件时，不要用el属性，
        因为最终所有的组件都是被vm管理，由vm决定要挂载到哪个容器*/
        
      //使用template可以配置组件结构
        template:`
        

            {{name}}
            {{age}}
        
        `,
        /*data要写成普通函数形式，不能写成对象形式，因为一个组件被多个地方使用，任何一个地方修改了data对象，其他地方也会发生变化*/
       data(){
           return{
               name:'张三',
               age:20
           }
       }
    }

三、ref

1、作用

获取dom元素或者组件实列对象vc

2、实现

结果

四、props

1、作用

同一个组件传入不同数据展示不同界面

2、实现

定义一个展示学生信息的组件（模板），传入数据展示不同的学生信息

调用

说明

1、props不允许修改的，如上面的student页面修改age值，控制台有错误提示,若业务有需要可以在student中的data中定义一个属性，将props的复制即可

2、有些值不能传比如key ref等这些是不允许传入的

五、mixin

1、作用

把多个组件共用的配置提取成一个混入（mixin）对象

2、定义混入

定义一个js文件 文件名自定义 内容

export const hunru1  = {
    data(){
        return{
            x:200
        }
    },
    methods:{
        showNum(){
            alert("111")
        }
    },
    mounted() {
        console.log("minin钩子函数")
    }
};
export const hunru2 = {
    data(){
        return{
            xx:400
        }
    }
}

3、局部混入

4、全局混入

再main.js中使用

import Vue from 'vue'
import App from './App.vue'
import {hunru1, hunru2} from "./mixin";

//项目中所有的vc 和vm引入
Vue.mixin(hunru2)
Vue.mixin(hunru1)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

5、说明

混入中定义data和methods中属性或者和方法在原组件中的重复了 则以原组件为准，但是如果钩子重复了则都会执行 先执行原组件的再执行混入的

六、scoped

1、scoped作用

让样式局部生效 防止全局冲突

2、原理

通过给当前组件根元素加一个data-v,然后结合选择器实现

说明

七、组件化通信

1、父传子

方式：通过props

2、子传父

方式：自定义emit事件

3、任意组件之间通信

第一种方式：全局事件总线

1、安装全局事件总线

new Vue({
  render: h => h(App),
  beforeCreate() {
    Vue.prototype.$bus = this
  }
}).$mount('#app')

2、使用事件总线

在要接受数据的组件中给bus绑定自定义事件，事件的回调留在组件自身

mounted(){
		this.$bus.on('hello',mydata)
}

提供数据

this.$bus.$emit('hello',mydata)

最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

this.$bus.$off('hello')

第二种方式：消息订阅与发布

八、浏览器存储

localstorage和sessionStorage统称webStorage

1、localStorage

1、特定

浏览器关闭 存储的数据不会消失，只有以下两种情况会消失

引导用户操作了localstorage的clear()或者removeItem()

用户清空了浏览器缓存

2、相关api

 /*存储相关*/
            //存储相同的key会替换
            localStorage.setItem("name","dddd")
            localStorage.setItem("name","dddd1")
            //数值类型存储会转成字符串
            localStorage.setItem("age",19)
            //只要value给的不是string 会转成string，即调用的tostring 所以下面存储的[object,object]
            localStorage.setItem("person",person)
            //可以通过json.stringify()将对象转成字符串存储
            localStorage.setItem("person1",JSON.stringify(person))

 /*读取*/
            console.log(localStorage.getItem("name"))
            console.log(localStorage.getItem("age"))
            console.log(localStorage.getItem("person1"))

            //读没有存储的数据 返回的是null,JSON.parse(xxx)也返回null
            console.log(localStorage.getItem("xx"))
            //读取对象字符串并转成对象
            console.log(JSON.parse(localStorage.getItem("person1")))

/*删除*/
            //删除指定的key
            localStorage.removeItem("person")
            //清空
            localStorage.clear();

2、sessionStorage

1、会话存储,浏览器一关闭 sessionStorage存储的数据消失
2、所有的api和localStorage一样