Vue学习笔记

# 笔记

## 脚手架结构:

    |———— node_modules

    |———— public

    |      |—— favicon.ico: 页签图标

    |      |—— index.html: 主页面

    |———— src

    |      |—— assets: 存放静态资源

    |      |    |___ logo.png

    |      |__ component: 存放组件

    |      |    |___ HelloWorld.vue

    |      |__ App.vue: 汇总所有组件

    |      |__ main.js: 入口文件

    |———— .gitignore: git版本管制忽略的配置

    |———— babel.config.js： babel的配置文件

    |———— package.json: 应用包配置文件

    |———— README.md: 应用描述文件

    |———— package-lock.json: 包版本控制文件

## 关于不同版本的 Vue:

    1. vue.js 与 vue.runtime.xxxjs的区别：

        (1). vue.js是完整版本的 Vue, 包含： 核心功功能 + 模板解析器

        (2). vue.runtime.xxx.js 是运行版的 Vue. 只包含： 核心功能 没有脚手架

    2. 因为 vue.runtime.xxx.js 没有模板解析器， 所有不能使用 template 配置项， 需要使用reder函数接收到的 createElement 函数去指定具体内容。

## ref属性

    1. 被用来给元素或子组件注册引入信息（id的替代者）

    2. 应用在 html 标签上获取的是真实 DOM 元素， 应用阻止 组件标签上是组件实例对象（vc）

    3. 使用方式： this.$refs.xxx

## 配置props

    功能： 让组件接收外部传过来的数据

        （1）. 传递数据：

                <Demo name="xxx"/>

         (2).  接收数据

                第一种方式（只接收）：

                    props:['name]

                第二种方式（限制类型）：

                    props:{

                        name: String

                    }

                第三种方式（限制类型、 限制必要性、指定默认值）：

                    props：{

                        name: {

                            type: String , // 类型

                            require: true, // 必要性

                            default: '老王' // 默认值

                        }

                    }

    备注： props 是只读的， Vue底层会监测你对 props的修改， 就会发出警告，

          若业务需求需要修改， 那么请复制 props 的内容到data 中一份， 然后去修改 data 中的数据。

## mixin(混入)

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

    使用方式：

        第一步定义混合， 例如：

            {

                data() {...}

                methods: {...}

            }

        第二步使用混合， 例如：

            （1）全局混入： Vue.mixin(xxx)

            （2）局部混入： mixins:['xxx']

## 插件

    功能： 用于增强Vue

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

    定义插件：

        对象 install = function (Vue, options){

            // 1.添加全局过滤

            Vue.filter(...)

            //2. 添加全局指令

            Vue.mixin(...)

            //3.配置全局混入（合）

            Vue.mixin(...)

            // 4. 添加实例方法

            Vue.prototype.$myMethod = function() {...}

            Vue.prototype.$myProperty = xxxxx

        }

       

## scoped防止样式冲突

    <style scoped></style>

## 总结 TodoList 案例

    1. 组件化编程流程：

        （1）拆分静态组件: 组件要按功能点拆分， 命名不要与 html 元素冲突。

        （2）实现动态组件： 考虑号数据存放位置， 数据是一个组件在用， 还是一些数据在用：

                1）一个组件在用： 放在组件身上即可。

                2）一些组件在用， 放在它们共同的父组件上（状态提升）.

        （3）实现交互： 从绑定事件开始。

    2.props 适用于：

        （1）父组件 ===> 子组件 通信

        （2）子组件 ===> 父组件 通信（要求父先给子一个函数）

    3. 使用v-model时切记： v-model 绑定的值不能是 props 传过来的值， 因为props 是不可以被修改的！

    4. props传过来的若是对象类型的值， 修改对象中的属性时 Vue 不会报错， 但不推荐这样做！

## webStorage

    1.存储内容大小一般支持在 5MB 左右 （不同浏览器可能还不一样）

    2.浏览器通过 Window.sessionStorage Window.localStorage 属性来实现本地存储机制

    3.相关 API ：

        1. xxxxxStorage.setItem('key', 'value')

                该方法接受一个键和值作为参数， 会把键值对添加到存储中， 如果键名存在，则更新对应的值

        2. xxxxxStorage.getItem('person');

                该方法接受一个键名作为参数， 返回键名对应的值

        3. xxxxxStorage.removeItem('key');

                该方法接受一个键名作为参数， 并把该键名从存储中删除

        4. xxxxxStorage.clear()

                该方法会清空存储中的所有数据

    4.备注：

        1. SessionStorage 存储的内容会随着浏览器窗口关闭而消失

        2. LocalStorge存储的内容， 需要手动消除才会消除

        3. xxxxxStorage.getItem(xxx) 如果 xxx 对应的value获取不到， 那么 getItem返回的值 是 null

        4. JSON.parse(null) 的结果依然是 null

## 组件的自定义事件

    1.一种组件间通信的方式，适用于；子组件 ===> 父组件

    2.使用场景；A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

    3.绑定自定义事件；

           1.第一种方式，在父组件中；<Demo @atguigu"test"/>或<Demo v-on:atguigu"test"/>

           2.第二种方式，在父组件中:

              <Demo ref="demo"/>

              ......

              mounted(){

                  this.$refs.xxx.$on('atguigu',this.test)

              }

              3.若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

     4.触发自定义事件；this.$emit('atguigu',数据)

     5.解绑自定义事件；this.$off('gtguigu')

     6.组件上也可以绑定原生DOM事件，需要使用native修饰符。

     7.注意；通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题!

## 全局事件总线（GlobalEventBus）

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

    2. 安装全局事件总线：

        new Vue({

            ........

            beforCreate() {

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

            }

            ......

        })

    3. 使用事件总线：

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

            methods: {

                demo(data) {

                    ....

                }

            }

            .......

            mouted() {

                this.$bus.$on('xxx', this.demo)

            }

        2. 提供数据： this.$bus.$emit('xxx', 数据)

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

## 消息订阅与发布 （pubsub）

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

    2. 使用步骤：

        1. 安装 pubsub： npm i pubsub-js

        2. 引入 import pubsub from 'pubsub-js'

        3. 接收数据： A组件想接收数据， 则 A 组件中订阅消息， 订阅的回调留在 A 组件 自身

        methods() {

            demmo(data) {

                .......

            }

        }

        ......

        mounted() {

            this.pid = pubsub.subscribe('xxx', this.demo) // 订阅消息

        }

    4. 提供数据: pubsub..publish('xxx' , 数据)

    5. 最好在 beforeDestroy钩子中 ， 用 PubSub.unsubscribe(pid)

## nextTick

    1. 语法: this.$nextTick(回调函数)

    2. 作用: 在 DOM 更新结束后执行其指定的回调

    3. 什么时候用: 当改变数据后 , 要基于更新后的新DOM 进行某些操作时, 要在nextTick所指定的回调函数这种执行

## todo.hasOwnProperty('isEdit')

    对象.hasOwnProperty(名)  显示对象中是否有这个名存中

## Vue封装的过度与动画

    1.作用: 在插入, 更新或移除DOM元素时, 在合适的时候给元素添加样式类名

    2.图示:

        v-enter -----> v-enter-to

        |                       |

        |                       |

        |---------   -----------|

                  | |

             v-enter-active

        v-leave -----> v-leave-to

        |                       |

        |                       |

        |---------   -----------|

                  | |

             v-leave-active

 

    3. 写法:

        1.准备好样式:

            元素进入的样式:

                1. v-enter: 进入的起点

                2. v-enter-activ: 进入的过程中

                3. v-enter-to:  进入的终点

            元素离开样式:

                1. v-leave: 离开起点

                2. v-leave-active: 离开过程

                3. v-leave-to: 离开终点

        2. 使用 <transition> 包裹要过度的元素 , 并配置 name 属性

            <transition name="hello">

                <h1 v-show="isShow">你好啊!</h1>

            <transition>

        3. 备注: 若有多个元素需要过度, 则需要使用: <transition-group>, 且里面每个元素都要指定 key 值