Vue2笔记分享

* Vue是一个用于构建用户界面的渐进式框架

* 创建Vue实例，初始化渲染的核心步骤：

    * 准备容器

    * 引包

    * 创建Vue实例new Vue()

    * 指定配置项el data =>渲染数据

* 插值表达式：

    * {{ 表达式 }}

    * 使用的数据要存在（data）

    * 支持的是表达式，而非语句

    * 不能在标签属性中使用

* 响应式：

    * 数据改变，视图自动更新（专注于业务核心逻辑）

    * 访问数据：“实例.属性名”

    * 修改数据：“实例.属性名”=“值”

* Vue指令：

    * 动态解析标签：v-html=“表达式”

    * v-show：

        * 作用：控制元素显示隐藏

        * 语法：v-show="表达式"，ture显示，false隐藏

        * 原理：切换display：none控制显示隐藏

        * 场景：频繁切换显示隐藏的场景

    * v-if：

        * 作用：控制元素显示隐藏（条件渲染）

        * 语法：v-show="表达式"，ture显示，false隐藏

        * 原理：基于条件判断，是否创建或移除元素节点

        * 场景：不频繁切换的场景

    * v-else/v-else-if：

        * 作用：辅助v-if进行判断渲染

        * 语法：v-else/v-else-if=“表达式”

        * 注意：需要紧挨着v-if一起使用

    * v-on：

        * 作用：注册事件=添加监听+提供处理逻辑

        * 语法：

            * v-on:事件名=“内联语句”等价于

            * v-on:事件名=“methods中的函数名”

        * 简写：@事件名

        * 调用传参：@click=”fn(参数)“

    * v-bind:

        * 作用：动态的设置html的标签属性

        * 语法：v-bind：属性名=“表达式”

        * 简写： ：属性名=“表达式”

    * v-for：

        * 作用：基于数据循环，多次渲染整个元素 ->数值、对象、数字

        * 遍历数组语法：v-for="(item,index) in 数组" //item每一项，index下标（可省略）

        * 补充：数组.filter(item=>条件) //删除数组中不满足条件的数据并生成一个新的数组

        * key：

            * 语法：key属性=“唯一标识”

            * 作用：给列表添加的唯一标识。便于Vue进行列表项的正确顺序复用。

            * 注意：

                * key的值只能是字符串或数字类型

                * key的值必须具有唯一性

                * 推荐使用id作为key（唯一），不推荐使用index作为key

    * v-model：

        * 作用：给表单元素使用，双向数据绑定 ->可以快速获取或设置表单元素内容

        * 语法：v-model=“变量”

        * 补充：数组.unshift({数据})//给数组的前面加上新的数据

* 指令修饰符：通过“.”指明一些指令后缀，不同后缀封装了不用的处理操作->简化代码

    * 按键修饰符

        * @keyup.enter----键盘回车修饰符

    * v-model修饰符

        * .trim----去除内容前后的空格

        * .number----将内容转换为数字类型

    * 事件修饰符

        * @事件名.stop----阻止冒泡

        * @事件名.prevent----阻止默认行为

* v-bind对于样式控制的增强--操作class：

    * 语法： :class=“对象/数组”

        * 对象----键就是类名，值是布尔值。如果值为true，有这个类，否则没有这个类

        * 数组----数组中所有的类，都会添加到盒子上，本质就是一个class列表

* v-bind对于样式控制的增强--操作style：控制属性的style

    * 语法：:style=“样式对象”

* computed计算属性：基于现有的数据，计算出来的新属性

    * 语法：

        * 声明在computed配置项中，一个计算属性对应一个函数

        * 使用起来和普通属性一样使用 {{计算属性名}}

* computed计算属性与methods方法的区别

    * computed计算属性：（有缓存的，一旦计算出来结果，就会立刻缓存）下一次读取直接读取缓存无需计算性能特别高

        * 作用：封装了一段对于数据的处理，求得一个结果

        * 语法：作为属性，直接使用

    * methods方法：（无缓存，每次调用都需要重新计算）下一次读取需要重新计算，性能比较低

        * 作用：给实例提供一个方法，调用以处理业务逻辑

        * 语法：作为方法，需要调用

* 计算属性完整写法：（默认的简写，只能读取访问，不能修改；如果需要修改，需要写计算属性的完整写法）

    * fullName: {

              //(1)当fullName计算属性，被获取求值时，执行get（有缓存会将返回值作为求值的结果）

              get() {

                return this.firstName + this.lastName

              },

              //(1)当fullName计算属性，被修改赋值时，执行set修改的值，传递给set方法的形参

              set(value) {

                this.firstName = value.slice(0, 1);

                this.lastName = value.slice(1);

              }

            }

* watch侦听器（监视器）

    * 作用：监视数据变化，执行一些业务逻辑或异步操作。

    * 语法：

        * 简单写法----简单类型数据，直接监视

        * 完整写法----添加额外配置项

            * deep:true对复杂类型深度监视

            * immediate：true初始化立刻执行一次handler方法

* Vue生命周期

    * 一个Vue实例从创建到销毁的整个过程

    * 四个阶段：创建、挂载、更新、销毁

    * Vue生命周期函数（钩子函数）

        * // 创建阶段

            * beforeCreate() {

            * console.log("beforeCreate响应式数据准备好之前", this.count)

            * },

            * created() {

            * console.log("created响应式数据准备好之后", this.count)

            * //可以开始发送初始化渲染的请求了

            * },

        * // 挂载阶段

            * beforeMount() {

            * console.log("beforeMount挂载之前", document.querySelector("h3"))

            * },

            * mounted() {

            * console.log("mounted挂载完成", document.querySelector("h3"))

            * //可以开始对Dom进行操作了

            * },

        * // 更新阶段

            * beforeUpdate() {

            * console.log("beforeUpdate数据更新了视图没有更新", document.querySelector("span").innerHTML)

            * //可以开始发送更新渲染的请求了

            * },

            * updated() {

            * console.log("updated数据更新了视图也更新了", document.querySelector("span").innerHTML)

            * },

        * // 销毁阶段

            * beforeDestroy() {

            * console.log("beforeDestroy销毁之前")

            * },

            * destroyed() {

            * console.log("destroyed销毁之后")

            * }

* 工程化开发&脚手架Vue CLI

    * 开发Vue的两种方式

        * 核心包传统开发模式：基于html/css/js文件，直接引入核心包，开发Vue

        * 工程化开发模式：基于构建工具（例如：webpack）的环境中开发Vue

            * 问题webpack配置不简单、雷同的基础配置、缺乏统一标准

    * Vue CLI

        * Vue官方提供的一个全局命令工具

        * 可以帮助我们快速创建一个开发Vue项目的标准化基础架子【集成了webpack配置】

        * 好处：

            * 开箱即用，零配置

            * 内置babel等工具

            * 标准化

        * 使用步骤：

            * 全局安装（一次）：yarn global add @vue/cli 或 npm i @vue/cli -g

            * 查看Vue版本：vue --version

            * 创建项目架子：vue create project-name（项目名-不能用中文）

            * 启动项目：yarm serve 或 npm run serve （找package.json）

        * 脚手架目录文件介绍&项目运行流程

    * 组件化开发&根组件

        * 组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。

            * 好处：便于维护，利用服用----提升开发效率。

            * 组件分类：普通组件、根组件

        * 根组件：整个应用最上层的组件，包裹所有普通小组件

        * App.vue文件（单文件组件）的三个组成部分

            * 语法高亮插件：Vetur

            * 三部分组成:

                * template：结构（有且只能有一个根元素）

                * script：js逻辑

                * style：样式（可支持less，需要装包）

            * 让组件支持less

                * style标签，lang="less"开启less功能

                * 装包：yarn add less less-loader

    * 普通组件的注册使用

        * 组件注册的两种方式：

            * 局部注册：只能在注册的组件内使用

                * 创建.vue文件（三个组成部分）

                * 在使用的组件内导入并注册components:{组件名：组件对象}

            * 全局注册：所有组件内都能使用

                * 创建.vue文件（三个组成部分）

                * main.js中进行全局注册 Vue.component(组件名,组件对象)

        * 使用：

            * 当成html标签使用‘<组件名></组件名>’

        * 注意：

            * 主键名规范----大驼峰命名法，如HmHeader

        * 技巧：一般使用局部注册，如果发现确实是通用组件，在抽离到全局。

    * 组件的样式冲突scoped(默认情况：组件中的样式会全局生效，会出现组件样式冲突问题)

        * 全局样式：默认组件中的样式会作用到全局

        * 局部样式：可以给组件加上scoped属性，可以让样式只作用于当前组件

        * 原理：

            * data-v-hash值 通过这个属性区分不同的组件

            * css选择器后面，被自动处理，添加上[data-v-hash]的属性选择器

    * data必须是一个函数：

        * 一个组件的data选项必须是一个函数----保证每个组件实例，维护独立的一份数据对象。

        * 每每次创建新的组件实例，都会新执行一次data函数，得到一个新对象。

    * 组件通信：就是指组件与组件之间的数据传递。

        * 组件关系：

            * 父子关系

                * 父组件通过props将数据传递给子组件

                * 子组件利用$emit通知父组件修改更新

            * 非父子关系

                * provide&inject

                * eventbus

        * props:

            * 定义：组件上注册的一些自定义属性

            * 作用：向子组件传递数据

            * 特点：可以传递任意数量、任意类型的prop

        * props校验

            * 作用：为组件的prop指定验证要求，不符合要求，控制台就会有错误提示

            * 语法

                * 类型校验（type：Number、String...）

                * 非空校验（required）

                * 默认值（default）

                * 自定义校验（validator(){}）

        * prop&data 单向数据流

            * 共同点：都可以给组件提供数据

            * 区别：

                * data的数据是自己的----随便改

                * prop的数据是外部的----不能直接改，要遵循单向数据流

            * 单向数据流：父级prop数据更新，会向下流动，影响子组件。这个数据流动是单向的。

            * 口诀：谁的数据谁负责