Vue 学习笔记

Vue.js

---

第一部分 Vue起步

---

1. 初识Vue

1.1 MVVM框架

1.2 为什么学vue

1.3 简单认识vue

• 渐进式框架
• 解耦视图和数据
• 可复用组件
• 前端路由技术
• 状态管理
• 虚拟DOM

1.4 学习基础

• 基础的 HTML，css，JavaScript
• 会node 更好

1.5 安装

• CDN 安装
• 下载安装
• npm安装

---

2. Vue初体验

2.1 第一个vue demo -> mustache

2.2 vue的列表显示 -> v-for

2.3 案例1 计数器 -> methods & click

2.4 Vue中的MVVM

2.5 Vue中传入的options

• el:绑定的元素。
• data:引用的数据。
• computed:计算属性。
• methods:引用的方法。
• filter:过滤器。(Vue3 弃用)
• 生命周期函数

2.6 vue的生命周期

• 生命周期
• 生命周期函数
• 开发者的方法和函数
  • 全局范围称为函数
  • 对象中的函数称为方法

---

3. 插值语法

3.1 Vue的tempete模板

3.2 插值操作，插值表达式 ->mustache

• v-once：这个指令表示元素和组件只渲染一次，不会随数据的改变而改变。
• v-html:这个指令后面跟一个字符串类型，然后将字符串用html方式解析和渲染
• v-text:将表达式的内容显示在界面上。
• v-pre:用于跳过这个元素和他子元素的编译过程，然后显示出原本的mustache语法。
• v-cloak:在某些情况下，我们浏览器里会显示出未编译的mustache语法。

4. 绑定属性 -> v-bind（缩写 ：）

4.1 对象语法

4.2 数组语法

4.3 v-bind:将内容动态绑定的属性

• src
• herf

4.4 v-bind: 动态绑定 class (对象语法方式&数组语法方式)

4.5 v-bind: 动态绑定 style (对象语法方式&数组语法方式)

---

5. 计算属性（computed）

5.1 案例一 ： 连接字符串

5.2 案例二 ： books的总价格

5.3 计算属性的本质

• fullname:{set(),get()}

5.4 计算属性的缓存(computed 和 methods 的对比)

• 计算属性使用时只调用一次
• 有缓存

---

6. 事件监听

6.1 v-on

• 作用：事件监听器
• 缩写：@
• 参数：event

6.2 v-on 参数传递

• 如果方法不需要给我阐述，那么后面的括号可以省略 -> btnClick/btnClick()
• 如果方法本身有一个参数，那么会将默认的event参数传递进去 -> btnClick(event)
• 如果传入event的同时需要传入其他参数，那就要将event改为$event -> btnClick(abc,event) -> $event

6.3 v-on 修饰符

• .stop -> event.stopPropagation()
• .prevent -> event.preventDefault()
• .{keyCode|keyAlias} -> 当事件从特定键触发时才触发回调
• .enter
• .native -> 监听组件根元素的原生事件
• .once -> 只触发一次回调

---

7. 条件判断

7.1 作用：根据条件渲染DOM的元素或组件

7.2 指令

• v-if:使用此指令时，DOM中元素不存在。
• v-else
• v-else-if

7.3 v-show

• v-show:区别于v-if,使用这个指令时，元素仍存在DOM中。
• 使用频率较多时选择v-show，当只有一次切换时使用v-if

---

8. 循环遍历

8.1 v-for

8.2 索引

8.3 遍历数组

8.4 遍历对象

• 只取一个值时，默认选择 Value。
• 获取多个值时顺序为 Value key index。

<li v-for="item in arr" key="item">{{ item }}</li>
<li v-for="(item,index) in arr" key="item">{{ index + 1 }}-{{ item }}</li>
<li v-for="(value,key,index) in obj" key="item">{{ index + 1 }}-{{ item }}</li>

8.5 组件的key属性

8.6 哪些数组的方法是响应式

- push(...nums) //-> 插入到最后一个位置
- pop(...nums) //-> 删除最后一个元素
- shift(...nums) //-> 删除第一个元素
- unshift(...nums) //-> 添加到第一位
- splice(start , deleteNumber , ...insert) //-> 插入、删除、替换元素
- sort() //-> 排序
- reverse() //-> 翻转数组
- //直接用索引改变数组没有响应式(set()方法可以实现

<div id="app">
    <ul>
        <li v-for="(item,index) in arr" key="item">{{ index + 1 }}-{{ item }}</li>
        <button @click="liClick()">按钮</button>
    </ul>
</div>
<script>
  const app = new Vue({
      el: '#app',
      data: {
        arr: ['A', 'B', 'C', 'D', 'E']
      },
      methods: {
        liClick() {
          // return this.arr.push('a')
          // return this.arr.pop('A')
          // return this.arr.splice(3,0 ,'x','y','z')
          // return this.arr.reverse()
        }
      }
    }
  )
</script>

---

9. 表单绑定

9.1 高阶函数

• filter()
• map()
• reduce()

9.1 v-model

• 作用：实现表单元素和数据的双向绑定
• 内部原理：
  • v-bind绑定value属性
  • v-on 指令绑定input事件

9.2 v-model的应用

• 单选框 radio
• 复选框 CheckBox(多个选项存入数组)
• 下拉选择框 select

9.3 修饰符

• .lazy
  在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步
• .number
  如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值
• trim
  如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入

---

第二部分 组件化开发

---

1. 组件化

1.1 什么是组件(Component)

1.2 注册组件

• 创建组件构造器(语法糖可以忽略) -> Vue.entend()
• 注册组件 -> Vue.component(TagName,{options})
  • 全局注册
  • 局部注册
• 在Vue势力范围内使用组件

2. 父组件和子组件

2.1 组件和模板分离

```html
1. 
<script type="text/x-templete" id="cpn1"> </script>
2.
<template id="cpn2"></templete>
````

2.2 父子组件之间的通信

• props -> 父组件向子组件传

      const cpn = {
          templete:'#cpn',
          // 1. props:[cmovies,cmessage]
          // 2. props:{
              cmovies:{
                 type:Array,
                 defult(){
                 return [1,1,1,1,1,1,1]
                 }
              },
              cmessage:{
                  type:String,
                  defult(){
                  return "Hello World "
                  },
                  required:true
              }
          }
      }
  

• 自定义事件 -> 子组件向父组件传递

2.3 数据验证

• 组件可以为 props 指定验证要求。
• 为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。

    Vue.component('my-component', {
    props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
        }
     }
    }
    })
   

2.4 自定义事件(子组件向父组件传递)

• 父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件
• 使用流程
  • 子组件中，通过$emit()触发事件
  • 父组件中， v-on监听事件

2.5 父子组件的访问方式

• 父访问子： $children / $ref
  • this.$children是一个数组，它包含了所有的子组件对象
  • this.$refs需要自定义一个属性，否则默认会返回空对象
• 子访问父； $parent / root

---

3. 插槽slot

3.1 插槽的使用

• 插槽是为了让封装的组件更具有扩展性
• 使用方式：模板中插入slot标签
• 可以在插槽中添加默认值
• 如果插入多个标签，则他会全部渲染在页面上

3.2 具名插槽的使用

• slot标签加入center属性
• 具名插槽不会被替换

3.3 作用域插槽

• 1. 编译作用域
• 2. 作用域插槽
  • 父组件中提交插槽标签，子组件提供内容

---

第三部分 模块化开发

1. 前端模块化

1.1 前端模块化的雏形

• 模块化的原因：解决多代码中变量冲突的问题
• 解决方法：
  • 1. 闭包中使用模块化对象
  • 2. 匿名函数

1.2 模块化的介绍

• 模块化的核心： 模块的导入和导出

1.3 commonJS

• commonJS 的导出

modeule.exports={
    flag:true,
    sum(a,b){
        return a+b 
    },
    multiplication(a,b){
        return a*b
    }
}

• commonJS的导入

// commonJS 模块
let {
    test,demo,flag
}=require('moduleA');

//等同于
let _mA=require("moduA");
let sum=_mA.sum;
let mulitip=_mA.multiplication;
let flag= _mA.flag;
    
    

1.4 ES6 模块化实现

• 导出

  • export 指令

      // 1. 导出方式一
      export{
          sum,flag
      }
      // 2. 导出方式二
      export var flag=true;
      export var num=100;
      export function sum(num1,num2){
          return num1+num2;
      }
      export class Person{
          constructor(){}
      }
  

  • export default

  const address="北京市"；
  export default address；
  import addr from '/aaa.js'
  

• 导入

  • script脚本时，type=module
  • 文件中使用 import 进行引用

  import {flag,sum} from '/aaa.js'
  

---

2. webpack

2.1 什么是webpack：

• 本质上讲，webpack是一个现代JavaScript应用的静态模块打包工具

2.2 webpack的安装与配置

• 本地安装 ：npm install webpack@3.6.0 --save-dev
• https://blog.csdn.net/qq_37130983/article/details/81544905

1. package.json :npm init 生成
   package.json 中定义启动 --> npm run build

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  }
  

2. webpack.config.js

    const path = require('path');
    module.exports = {
      //entry: path.join(__dirname, './src/main.js'), 3.0版本
      entry: './src/index.js',
      output: {
        //path: path.join(__dirname, './dist'),   3.0版本
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
      },
      mode: 'development' // 这也是 4.0 版本刚出来的 一行,
    }

3. 局部安装webpack
   1. 本地安装 --> npm install webpack@3.6.0 --save-dev
   2. 通过 .\node_modules.bin\webpack 打包

2.3 loader 的使用

1. npm 安装使用的loader
2. 在 webpack.config.js 中的 modules 关键字下设置

2.4 常用的几种loader

• style-loader
• css-loader
• less-loader
• url-loader
• file-loader --> publicPath
• babel-loader -->
• vue-loader

2.5 plugin

1. npm 安装使用的loader
2. 在 webpack.config.js 中的 modules 关键字下设置
3. 常用plugin
   • webpack.BannerPlugin() //版权声明
   • HtmlWebpackPlugin() //生成最终的html
   • UglifyjsWebpackPlugin()

2.6 搭建本地服务器

- webpack提供了一个本地服务器，基于node.js搭建
- 安装 --> npm install --save-dev webpack webpack-dev-server
- 配置 --> 
    const Webpack = require('webpack');
    const WebpackDevServer = require('webpack-dev-server');

---

第四部分 Vue进阶

1.Vue CLI

1.1 脚手架介绍

• 开发大型Vue应用时，可以通过VueCLI处理 目录结构，项目结构的部署，热加载，代码单元测试
• 使用 vue-cli 可以快速搭建Vue开发环境和对应的webpack配置

1.2 脚手架使用

1. 环境依赖
   • node
   • webpack
2. 使用
   • 安装 vue-cli 3
   • 创建项目
   • Vue CLI使用文档
     [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EPzMYjpr-1663253042174)(https://note.youdao.com/yws/res/1421/WEBRESOURCE52e788050a9b72c7a9b3ba8e12b04244)]
3. ESLint
4. runtimecompiler && runtimeonly

1.3 脚手架3介绍

• 创建新项目
• Vue UI
• 其他配置
• 箭头函数（扩展）

---

2. vue-router

2.1 认识前端路由

1. 认识路由
   • 后端路由 && 前端路由
   • url 的 hash 和 HTML5 的 history.pushStae()&&history.go()
2. vue-router的安装和导入
   • 安装
   • 导入
   • 模块中使用Vue.use()
   • 创建路由实例传入映射配置
   • 在Vue实例中挂载路由实例

2.2 vue-router 的使用

1. 使用方法

   • 创建路由组件导出
   • 配置映射列表并导入
   • router-link 和 router-view 标签导入

2. Router 实例

   • route => 路由列表
   • mode => history && hash
   • linkActiveClass => router-link 活动状态类名

3. 动态路由

   • 动态路由指路由的一部分或者整个路由动态获取的

   routes:[
       path: '/user:id',
       name: 'user', // 个人信息页面
       component: () => import('@/components/user.vue')
   ]
   ```
   ````javascript
   export default {
       name: 'user',
       computed:{
           userId(){
               return this.$route.params.id
           }
       }
   }
   ```
   
   

4. 路由懒加载

   • 当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效。
   • 一次懒加载对应一个js文件

   component: () => import('@/components/user.vue')
   

5. 路由嵌套 => 创建组件并在route 父路由 的children方法 配置路由

6. 参数传递

7. 导航守卫
   导航守卫官方文档

8. keep-alive 页面缓存

---

3. Promise

3.1概述

promise是异步编程的一种解决方案。
从语法上说，Promise，是一个对象，从它可以获取异步操作的消息。

3.2 状态

Promise 异步操作有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。除了异步操作的结果，任何其他操作都无法改变这个状态。

Promise 对象只有：从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ，状态就不会再变了即 resolved（已定型）。

3.3 then方法

3.4 all方法

---

4. Vuex

4.1 概述

vuex 是专为 Vue.js 开发的状态管理模式
Vuex中文文档

---

5. axios网络请求

axios中文文档

5.1 基础使用

5.2 处理并发参数

==> axios.all([axiosA,axiosB])
==> axios.spread((res1,res2) => {})

---

6. mixin Vue混入

类似于类的继承，定义mixin实例然后导入

export const mixin = {
    data () {
        a = 1
    },
    methods: {
        getDatas (res) {
            console.log(res)
        }
    }
}

<templete>
    <p>a={{a}}</p>
</templete>
<script>
import { a, getDatas } from mixin.js
export default {
    name: test,
}
</script>