# vue_base_2

**Repository Path**: redlonely/vue_base_2

## Basic Information

- **Project Name**: vue_base_2
- **Description**: learning vue
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-09-13
- **Last Updated**: 2022-09-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 武汉前端 0516Vue
- vue插件:
  * Vetur -- Pine Wu
  * Vue 3 Snippets----hollowtree
  * vue-helper --- shenjiaolong

- 其他插件:
  * vscode-icons
  * Prettier - Code formatter

- day01:
  - MVVM(背会)
    *  MVVM分为三个部分：分别是M（Model，模型层 ），V（View，视图层），VM（ViewModel，视图数据层,V与M连接的桥梁）
    * M：模型层，值得是数据模型,主要负责业务数据相关；
    * V：视图层，顾名思义，负责视图相关，细分下来就是html+css层,为了更方便的展示Model层的数据；
    * VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点
    * ViewModel是Vue.js的核心，它是一个Vue实例,MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改

  - CDN(背会)
    * CDN即内容分发网络。
    * CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率

  - 水平垂直居中(3 种方式)
    * flex
    * 绝对定位+transfrom的translate
    * 绝对定位+四个方向为0+margin:auto

  - 与或非返回值
    * A&&B:如果A为truthy则返回B,否则返回A
    * A||B:如果A为truthy则返回A,否则返回B
    * !:取反,一定返回布尔值

  - truthy(真值)和 falsy(虚值)
    * truthy（真值）指的是在布尔值上下文中，转换后的值为 true 的值
    * falsy 值（虚值）是在 Boolean 上下文中认定为 false 的值。

  - data为什么是一个函数
    * 当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。
    * 如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象,则会互相影响
    * 通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象

- day02
  - v-bind批量绑定
  - v-bind强制绑定class
    * 字符串:只有一个类的时候,可以使用
    * 对象:有一个或者或者多个类,并且已经确定了类的数量,可以使用
    * 数组:一个或者多个类,但是不确定数量,因为我们可以对数组进行增删改查
  - v-bind强制绑定style
    * 对象:常用,把样式以键值对的形式书写在对象中
    * 数组:把多个style对象可以组合在数组中
  - v-on注意：
    * 事件函数书写位置在methods配置中，绑定事件可以简写为@
    * 获取事件对象
      + ！！！在v-on的插值语法区域就已经存在一个$event代表事件对象
      + 如果绑定事件函数没有加括号，则默认传入
      + 如果绑定事件函数加了括号，则需要我们显示传入
  - v-on的事件修饰符
    * .stop
    * .prevent
    * .once
    * .capture
    * .self
    * .按键别名

  - v-model基础使用
    * 作用:数据双向绑定
    * 本质:给标签的value进行强制绑定,然后再绑定一个input事件,触发数据的改变
    * 修饰符:.lazy  .number .trim

  - v-model收集数据
    * 复选框单独使用:使用布尔值收集
    * 复选框多个使用:使用数组收集所有选中的value值
    * 单选框的使用:使用字符串收集
    * select的使用
      + 单选:字符串收集
      + 多选(mutiple):数组收集
    * textarea:使用字符串收集

  - DOM复习:事件模型(通俗讲:绑定事件的方式)
    * 基本事件模型(DOM0事件模型):使用率最高的on+事件类型绑定
    * DOM事件模型(DOM2事件模型):在W3C指定的DOM2级规范中提出,使用方式的addEventListener()
    * IE事件模型(只能在IE中使用):attachEvent()
    * 网景事件模型(只能在网景浏览器中使用):淘汰

  - DOM复习:事件流(事件机制)
    * 事件流就是多个节点对象对同一种事件进行响应的先后顺序
    * 捕获阶段:事件从最不确定的目标（document对象）开始触发，然后到最特定的目标(target)
    * 目标:注册在目标节点上的事件被执行
    * 冒泡阶段:事件从最特定的目标(target)向最不特定的目标(document对象)触发

  - 阻止传播和阻止默认事件
    * 阻止传播:e.stopPropagation() || e.cancelBubble = true
    * 阻止默认事件:e.preventDefault() || e.returnValue = false

  - trim方法 trimStart方法  trimEnd方法


- day03
  - v-if条件渲染
    * v-if \ v-else-if \v-else
    * 模板在编译的时候,就忽略了不符合条件的模板,所以不满足条件的模板压根都没渲染在视图中
    * 注意事项
      - v-if的三个指令必须连着使用,中间不能间隔其他元素
      - 如果有多个碎片节点需要条件渲染,我们可以使用template元素(在渲染后是不可见的)
      - 如果在条件切换时,视图也会跟着切换,因为有diff算法默认比较,所以可能会出现复用元素的情况,如果不想复用,则给不想复用的元素添加key属性

  - v-show条件渲染
    * 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
    * v-show 不支持 <template> 元素，也不支持 v-else
    * v-show在切换过程中也不需要考虑元素复用的情况,因为节点都已经渲染,没有diff算法比较,所有不会出现复用的情况

  - v-if和v-show的区别
    * v-if和v-show都是用来做条件渲染的
    * v-if 是“真正”的条件渲染，因为它会确保在切换过程中组件或者节点销毁和重建。
    * v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
    * 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
    * 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

  - v-for
    - 可以遍历数组\对象\字符串\数字
    - 需要书写一个key属性

  - 其他指令
    - v-html:更新元素的 innerHTML
    - v-text:更新元素的 textContent
    - v-once:只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能
    - v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始 插值 标签。跳过大量没有指令的节点会加快编译
    - v-cloak:这个指令保持在元素上直到关联实例结束编译,我们通常可以使用选择器选择这个属性,然后再编译前对当前元素进行一些样式操作

  - 修改响应式数据
    * 基本类型:直接修改即可
    * 数组类型:
      + 使用变更方法修改数组
      + 使用非变更方法得到一个新的值,重新赋值
    * 对象类型:
      + 正常的设置可以是响应式的
      + 新增属性需要使用 Vue.set() 或者 vm.$set()
      + 删除属性需要使用 Vue.delete() 或者 vm.$delete()

  - 计算属性(computed)
    - 优点:计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值
    - 计算属性vs方法:方法只要调用就会重新求值
    - 计算属性vs插值语法中书写逻辑:臃肿,不方便识别是什么功能
    - 计算属性可以设置getter和setter函数,进行可读可写操作

  - watch(侦听器)
    - 作用:监听一个data数据或者一个计算属性值的改变,他只负责监听,后续操作由业务逻辑决定
    - watch可以设置立即监听(immediate)
    - watch可以设置深度监听(deep)
    - watch的回调函数接受两个参数(newValue,oldValue),但是如果监听的是对象,则新值和旧值是一样的

  - watch和computed的对比
    * watch 和 computed 它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候,我们处理一些逻辑
    * 区别：
      + computed能完成的功能，watch都可以完成。watch能完成的功能，computed不一定能完成，最具代表性的：watch可以进行异步操作。
      + watch擅长处理的场景：一个数据影响多个数据 ，侧重在【监视】，核心是：xxx变了，我要做???事。无需return，靠内部逻辑去完成要做的事。例如当需要在数据变化时执行异步或复杂的业务逻辑处理操作时，这个方式是最有用的
      + computed擅长处理的场景：一个数据受多个数据影响 (购物车商品结算的时候)，侧重在【算】，核心是：计算出来的值。靠return来输出计算的结果以供使用。不能开启异步任务。


- day04
  - $watch:
    * vm.$watch('属性',callBack,{deep/immi})
    * $watch返回一个取消当前监视的回调函数

  - 组件的创建
    * 使用Vue.extend({})创建一个组件,接受一个配置对象,然后在父组件中注册并使用组件
    * Vue.extend返回一个VueComponent构造函数,在组件被使用的是时候,会实例化VueComponent构造函数得到一个组件实例
    * 其实VueComponent这个构造函数在Vue内部被处理为了Vue的子类(VueCoponent继承了Vue)
    * 原型关系:
      + 组件实例.__proto__--->VueComponent.Prototype
      + VueComponent.Prototype.__proto__ ---> Vue.prototype
      + Vue.prototype.__proto__--->Object.prototype
      + Object.prototype.__proto__ ---> null
    * 如果我们希望把一个属性放在任何一个组件都能访问位置,放在哪里呢?
      + 肯定不能放在VueComponent.prototype上,因为每创建一个组件都会创建一个新的VueComponent构造函数,不止只有一个
      + 可以放在Vue.prototype上,因为Vue构造函数只有一个,并且原型链会找它
      + 可以放在Object.prototype上,但是我们不建议改动Object的,我们有更好的选择
    * 创建组件的时候，可以直接省略Vue.extend(),直接书写一个配置对象即可，当组件被注册的时候，会把当前的配置对象交给Vue.extend方法得到一个VueComponent构造函数
    * 如果某个组件复用，那么我们可以使用Vue.Component方法进行全局注册组件

  - 安装Vue-cli脚手架
    - 安装vue `npm install -g @vue/cli`
    - 查看版本 `vue -V`
    - 下载一个新的脚手架`vue create XXXX`
      * Manually select features:手动配置
      * 选择Babel  &&  Linter / Formatter 两个即可
      * 2.X
      * ESLint with error prevention only:ESlint仅报错
      * Lint on save
      * In dedicated config files:把babel,eslint等配置独立出来
      * 直接选N(默认),不保存刚才的配置
      


  - 重绘重排
    * 重排和重绘是DOM编程中耗能的主要原因之一
    * 重排（回流）：当render tree中的一部分或者是全部，因为元素的尺寸、布局、隐藏等等改变引起页面的重新渲染，这个过程称作为重排，完成重排以后，浏览器会重新绘制受影响的部分到屏幕，该过程称为重绘
    * 重绘：当render tree（渲染树）中更新的属性只会影响元素的外观、风格，不会影响元素的布局的时候，浏览器需要重新绘制当前元素的样式，被称作为重绘
    * 重绘不会引起重排，但重排一定会引起重绘

  - 字符串的方法:startsWith\endsWith\includes\indexOf

  - 数组的方法:filter\map\forEach

  - eslint在非脚手架中配置
    * 初始化包管理文件
      `npm init`
    * 下载 eslint 包
      `npm i eslint -D`
    * 创建 eslint 初始配置文件
      `eslint --init` 下一步下一步选择
    * .eslintrc.js 配置文件解析
      ```js
        module.exports = {
          /* 
            使用 env 关键字指定你想启用的环境，并设置它们为 true。例如，以下示例启用了 browser 和 Node.js 的环境
          */
          env: {
            browser: true,
            es2021: true,
          },
          //下边这个配置：默认开启eslint规则中前边添加对勾的所有规则
          extends: "eslint:recommended",
          /* 
            ecmaVersion - 默认设置为 3，5（默认）， 你可以使用 6、7、8、9 或 10 来指定你想要使用的 ECMAScript 版本。你也可以用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）或 2019 (same as 10) 

            sourceType - 设置为 "script" (默认) 或 "module"（如果你的代码是 ECMAScript 模块)。
            */
          parserOptions: {
            ecmaVersion: "latest",
            sourceType: "module",
          },
          //具体规则的配置
          rules: {
            "no-console": "error",
          },
        };
      ```
    * 使用 eslint 检测代码（必须主动检测）
      `eslint XXX.js`

  - eslint在脚手架中配置（希望打包的时候进行检测）
    * 始化包管理文件
      `npm init`
    * 下载 eslint 包
      `npm i eslint -D`
    * 创建 eslint 初始配置文件
      `eslint --init`
    * 在 webpack.config.js 中配置 eslint-loader
      eslint-loader(4.X.X 版本)(`npm i eslint-loader@4 -D`)
      eslint(7.X.X 版本)(`npm i eslint@7 -D`)
    * 配置webpackloader，并使用webpack启动
      ```js
        const path = require("path");
        module.exports = {
          entry: "./src/index.js",
          output: {
            path: path.resolve(__dirname, "build"),
            filename: "main.js",
          },
          mode: "development",
          module: {
            rules: [
              {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "eslint-loader",
              },
            ],
          },
        };
      ```
  
  - 忽略eslint的检测
    * 在报错信息中找到对对应的eslint规则，然后去`.eslintrc.js`文件的rules配置中，直接覆盖修改这个规则
    * 在代码中使用注释来忽略规则
      + `// eslint-disable-next-line eqeqeq`:下一行代码忽略eqeqeq规则
      + `// eslint-disable-next-line`：下一行代码会略所有eslint检查
      + `/* eslint-disable  eqeqeq*/`当前注释后所有的代码都要忽略eslint的eqeqeq规则检查
      + `/* eslint-disable */`当前注释后所有的代码都要忽略eslint规则检查

- day05
  - Vue2脚手架目录分析
    * public-->公共资源,在webpack打包的时候会忽略当前文件,直接复制到打包好的目录中
    * src --> 我们编写代码的地方,项目的入口文件也在src中
    * .browserslistrc -->用来指定项目的目标浏览器范围,将来babel在编译的时候,会根据当前配置的浏览器针对性的编译
      + > 1% : 代表全球有超过1%的人使用的浏览器
      + last 2 versions : 表示所有的浏览器兼容到最后两个版本
      + not dead:不兼容已经淘汰的浏览器
      + not ie <=8 : 不兼容ie8及以下
      + firfox >=50 : 兼容获取大于50的版本
    * babel.config.js --> 用来结合browsersList要求,进行babel编译,babel主要是把es6+的语法转为低版本的语法
    * jsconfig.json --> 当项目中拥有jsconfig.json的时候,我们书写js的体验会得到提升
    * vue.config.js --> 官方自带的用来补充webpack配置的文件
    * .gitignore --> 配置git忽略
    * package.json --> 当前项目的包管理文件
    * package-lock.json --> 包的依赖描述(缓存)文件

  - src中入口文件的分析
    * 因为完整的Vue包中包含两块内容(1.模板编译模块 2.其他模块)
    * 模板编译模块是把template模板编译成虚拟DOM,但是我们项目打包完成之后,就不再需要模板编译功能
    * 模板编译模块占了vue.js的40%的空间,所以如果在项目中还携带这个完整的vue,会有下载压力
    * vue还提供了一个 vue.runtime.js 版本,没有包含模板编译,还提供了一个vue-template-compiler 包,专门用来模板编译
    * 在脚手架中我们把vue.runtime.js设置为生产依赖,把模板编译功能单独提炼设置为开发依赖,此时可以减少打包后的文件体积
    * 因为不再使用vue包中自带的模板编译功能,所以我们在new Vue中编译App组件的写法要发生变化 
    ```js
      //vue的配置中还提供了一个配置项 render,是一个函数,接受一个createElement方法作为参数,这个方法可以接受一个组件,然后创建虚拟DOM,
      render: (createElement) => {
        return createElement(App);
      },
      //尤雨溪把createElement这个方法简写为h
      render: (h) => h(App),
    ```
  - src中其他文件
    * components:用来书写组件
    * App.vue : 根组件
    * asstes : 公共静态资源(要被webpack打包的)
    * main.js : 入口文件 

  - style标签的scoped属性
    * scoped属性：一旦添加，当前style中样式只对当前组件的模板生效
    * scoped原理：
      + 一旦在当前组件的style标签中添加了scoped属性，则代表当前的样式拥有作用域了,只在当前组件的元素内生效
      + 给当前组件的所有元素(还有子组件的最外层容器元素)全部添加一个统一的自定义属性(data-v-xxxxxx)(每个组件的自定义属性是不一样的)
      + 然后给所有的scoped中的选择器添加一个属性选择器 XXX[data-v-xxxx],那么就只能选择当前组件的元素了

  - 深度选择器(样式穿透)
    如果我们在父组件中想要控制后代组件的某个元素样式,我们有两种做法
    * 把父组件中书写样式style不要添加scoped(但是这样可能会出现其他问题)
    * 使用深度选择器: `父组件的选择器 >>> 后代组件内元素的选择器`
    * 深度选择器的原理: 只在父组件选择器上添加自定义属性,后代的选择器不再添加自定义属性

  - ref的基础使用(ref使用在普通元素上) 
    * 如果想要获取某个真实DOM,则在当前模板元素上添加一个ref属性,值为一个字符串名称
    * 当模板渲染后,在当前的组件实例上的$refs对象中,就会有一个当前字符串名称为属性名,值为被设置ref的真实DOM 组成的键值对。

  - ref设置在子组件上
    * 如果ref设置给了子组件上,则我们通过$refs拿到的是这个组件的组件实例
    * 最常用的就是通过子组件的实例拿到子组件的数据进行处理(组件通信-->子传父)

  - props的基础使用
    * 作用:主要是为了向子组件传递一些数据,用 给子组件添加属性 的方式传递,这样被称作为props传值
    * 子组件的接收
      + 如果想要在组件实例上拿到父组件传递过来的props,必须先通过props配置项进行接收(props配置项可以是对象,数组)
      + 接受完成之后,props的数据会在 组件实例上 和 组件实例的$props对象上 各存放一份以用来使用
      + props是不能直接被修改的(vue支持单向数据流)

  - props传递一个函数
    - 如果props传递一个值，则代表组件通信的 父传子
    - 如果props传递一个函数，则代表组件通信中的 子传父
      * 假设子组件想要修改父组件的数据，子组件是不能直接修改props的
      * 我们可以在父组件中定义一个修改自己数据的方法 传递给子组件
      * 子组件调用父组件的方法，就可以修改父组件的数据了

  - props可以直接使用 `v-bind="对象"` 直接展开对象批量传递

  - props的对象写法:在子组件中接受props的写法可以写成一个对象,限制某个prop的类型和必填和默认等等
    ```js
    props: {
      count: Number,
      otherTitle: {
        type: String,
        // required: true,
        default: "暂无....",
      },
    },
    ```
  
  - 正则表达式
    * 定义一组规则,和一个字符串进行 校验
    * 正则是RegExp对象  字符串是String对象,每个对象都有自己的方法正则校验
    * RegExp对象提供的方法:
      
      + test: 正则.test(字符串):如果字符串符合正则条件则返回true,否则返回false
    * String对象提供的方法：
      + replace:第一个参数是正则，第二个参数是替换匹配到的值
  + match:返回匹配到的值组成的数组
    
    * 常见规则:
      \d:数字
      [0-9]:数字
      [a-z]:字母
      [0-9a-z]:数字字母
  \s:空白字符
    
    * 常见量词
      + : 1个或多个
      ? : 0个或多个
      {2,4}:2个-4个
  {4,}:4个及以上
    
    * 其他:
      ^:以后边的规则为开头
  $:以前边的规则为结尾
    
    * 千位分隔符面试题:
    `const reg = /(\d)(?=(\d{3})+$)/g;`