Vue 笔记【视频参考尚硅谷】持续更新2022/3/22...

Vue

第 1 章：Vue 核心

视频学习地址：

https://www.bilibili.com/video/BV1Zy4y1K7SH

学习配套资源（源代码、静态页面等）：

链接：https://pan.baidu.com/s/1521h1ATCK-ccmyrCNb2HVA
提取码：612x

1.1. Vue 简介

1.1.1. 官网

1. 英文官网: https://vuejs.org/

2. 中文官网: https://cn.vuejs.org/

1.1.2. 介绍与描述

  1. 动态构建用户界面的渐进式 JavaScript 框架 

  2. 作者: 尤雨溪 

1.1.3. Vue 的特点

1. 遵循 MVVM 模式
2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
3. 它本身只关注 UI, 也可以引入其它第三方库开发项目

1.1.4. 与其它 JS 框架的关联

1. 借鉴 Angular 的模板和数据绑定技术
2. 借鉴 React 的组件化和虚拟 DOM 技术

1.1.5. Vue 周边库

1. vue-cli: vue 脚手架
2. vue-resource
3. axios
4. vue-router: 路由
5. vuex: 状态管理
6. element-ui: 基于 vue 的 UI 组件库(PC 端) …

1.2. 初识 Vue

1. 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；

2. root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；

3. root容器里的代码被称为【Vue模板】；

4. Vue实例和容器是一一对应的；

5. 真实开发中只有一个Vue实例，并且会配合着组件一起使用；

6. { {xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性；

7. 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新；

注意区分：js表达式 和 js代码(语句)
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方：
(1). a
(2). a+b
(3). demo(1)
(4). x === y ? ‘a’ : ‘b’

2.js代码(语句)
(1). if(){}
(2). for(){}

1.3. 模板语法

备注：Vue中有很多的指令，且形式都是：v-xxx 。

1.3.1. 模板的理解

html 中包含了一些 JS 语法代码，语法分为两种，分别为：

1. 插值语法（双大括号表达式） { {}}

2. 指令（以 v-开头） v-bind、v-on、…

1.3.2. 插值语法

1. 功能: 用于解析标签体内容
2. 语法: { {xxx}} ，xxx是js表达式，且可以直接读取到data中的所有属性

1.3.4. 指令语法

1. 功能:：解析标签属性、解析标签体内容、绑定事件等…
2. 举例：v-bind:href = ‘xxx’ ，xxx 会作为 js 表达式被解析，且可以直接读取到data中的所有属性

1.4. 数据绑定

Vue中有2种数据绑定的方式：

（1）单向绑定(v-bind)：数据只能从data流向页面。可以简写为 “:xx”

（2）双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。

备注：

（1）双向绑定一般都应用在表单类元素上（如：input、select等）

（2）v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值。

1.4.1. 单向数据绑定

1. 语法：v-bind:href =“xxx” 或简写为 :href
2. 特点：数据只能从 data 流向页面

1.4.2. 双向数据绑定

1. 语法：v-mode:value=“xxx” 或简写为 v-model=“xxx”
2. 特点：数据不仅能从 data 流向页面，还能从页面流向 data

1.4 data与el 两种写法

1.el有两种写法

（1）new Vue 时配置el属性

（2）先创建Vue实例，随后再通过vm.$mount（‘#root’）指定el的值

1.
const v = new Vue({
 //el:'#root', //第一种写法
 data:{
  name:'尚硅谷'
 }
})

2.
v.$mount('#root')  //第二种写法 

2.data有两种写法

（1）对象式

（2）函数式

new Vue({
 el:'#root',
 //data的第一种写法：对象式
 data:{
 name:'尚硅谷'
} 

//data的第二种写法：函数式
 data(){
  console.log('@@@',this) //此处的this是Vue实例对象
  return{
   name:'尚硅谷'
  }
 }
})

如何选择：data使用组件时，必须且只能使用函数式，这样当一个组件标签的数据发生改变时，不会影响使用这个组件标签的其他地方的数据改变。

3.重要的原则：

由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了。

1.5. MVVM 模型

1. M：模型(Model) ：对应 data 中的数据
2. V：视图(View) ：模板
3. VM：视图模型(ViewModel) ： Vue实例

1.data中的所有属性，最后都出现在了vm身上。

2.vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。

1.5. Vue中的数据代理

1.通过一个对象代理对另一个对象属性的操作（读/写)

2.数据代理的好处：更加方便的操作data中的数据

3.基本原理：通过 Object.defineProperty（）把data对象中的所有属性添加到vm上。为每一个添加到vm上的属性都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。

1.6. 事件处理

事件的基本使用：

1.使用v-on:xxx 或 @xxx 绑定事件，其中xxx是事件名

2.事件的回调需要配置再methods对象中，最终会在vm中

3.methods中配置的函数，不要用箭头函数，否则this的指向就不说vm，而是window

4.@click=“demo” 和 @click=“demo($event)” 效果一致，但后者可以传参

1.6.1. 绑定监听

1. v-on:xxx=“fun”

2. @xxx=“fun”

   如：@click(点击事件) 、@scroll（滚动条滚动触发事件）、@wheel(鼠标轮滚动的触发事件)

3. @xxx=“fun(参数)”

4. 默认事件形参: event

5. 隐含属性对象: $even

1.6.2. 事件修饰符

使用示例：
 @click.prevent="xxx"
 @click.stop

1.prevent : 阻止事件的默认行为 event.preventDefault()

2. stop : 停止事件冒泡 event.stopPropagation
3. once : 事件只触发一次
4. capture : 使用事件的捕获模式
5. self : 只有event.target是当前操作的元素才是触发事件
6. passive : 事件的默认行为立即执行，无需等待事件回调执行完毕;

1.6.4. 按键修饰符

keydown：按下按键没有松手就可以触发事件

keyup ：按下按键松了手就出发事件（常用）

event.target.value    拿到元素的value值

1.Vue中常用的按键别名

回车 => enter

删除 => delete (删除和退格键)

退出 => esc

空格 => space

换行 => tab (必须配合keydown) @keydown.tab

上 => up

下 => down

左 => left

右 => right

@keyup.enter   		  按下回车键触发事件
@keyup.delete

2.Vue未提供别名的按键，可以使用原始的key值去绑定，但注意要转为kabab-cas（短横线命名）

CapsLock  =>   caps-lock

3.系统修饰键（用法特殊）：ctrl、alt、shift、meta(window的意思)

​ （1）.配合keyup使用：按下修饰键的同时，再按下其他键，事件才被触发

​ （2）.配合keydown使用：正常触发事件

4. 也乐意通过指定具体的按键。（不推荐，最好通过按键名绑定）keycode : 操作的是某个 keycode 值的键（按键编码）
5. 可自定义按键：Vue.config.keyCodes.自定义键名 = 键码

Vue.config.keyCodes.huiche = 13  //自定义回车键

修饰符可以连续写：

@click.prevent.stop="xxx"
@keyup.ctrl.y="xxx"         必须按下ctrl+y 才可以触发事件

1.7. 计算属性与监视

1.7.1. 计算属性-computed

1. 定义：要显示的数据不存在，要通过已有的属性计算得来。
2. 原理：底层借助了Object.defineproperty方法提供的getter和setter
3. 优势：与methods实现相比，内部有缓存机制（复用），效率更高，调试方便。
4. 备注：计算属性最终会出现在vm上，直接读取使用即可
5. 如果计算属性要被修改，则必须写set函数去响应修改，且set中要引起计算式依赖的数据发生变化
6. 使用：1）在 computed 对象中定义计算属性； 2）在页面中使用{ {方法名}}来显示计算的结果。如：

   { {username}}

完整写法：
computed: {
 username: {
  get() {
   return xxx
  },
  set(){
   xxx
  }
 }
}

简写：
computed: {
 username(){
  xxx
 }
}

get()方法：当读取username的时候，get就会被调用，切返回值作为username的值

get()方法调用：（1）初次读取username的时候 （2）所依赖的数据发生变化的时候

set()方法调用：当修改数据的时候调用

1.7.2. 监视属性-watch

1. 通过 vm 对象的 $watch() 或 watch 配置 来监视指定的属性
2. 当属性变化时, 回调函数自动调用, 在函数内部进行计算

const vm = new Vue({
   
    el: '#root',
    data: {
   
        isHot: true
    },
    methods: {
   
        change() {
   
            this.isHot = !this.isHot
        }
    },
    computed: {
   
        desc() {
   
            return this.isHot ? '炎热' : '凉爽'
        }
    },
    watch: {
   
        isHot: {
   
            immediate: true,
            handler(newValue, oldValue) {
   
                console.log('isHot发生了数据变化', newValue, oldValue);
            }
        }
    }

})


或者：
vm.$watch('isHot', {
   
    handler(newValue, oldValue){
   
        console.log('isHot发生了数据变化', newValue, oldValue);
    }
})

immediate默认flase，改为true后:初始化时调用一下handler

handler调用：当username发生改变时调用，newValue是username修改前的数值，oldValue是修改后的数值。

总结：

（1）当被监视的属性变化时，回调函数自动调用，进行相关操作

（2）监视的属性必须存在

（3）监视有两种写法：1.new Vue传入 watch 配置 ；2.通过 vm.$watch 监视

深度监视：

const vm = new Vue({
   
    el: '#root',
    data: {
   
        numbers:{
   
          a:1,
          b:2,
          c:3
        }
    },
    watch: {
   
        numbers: {
   
            deep: true, //开启deep，numbers中任何一个数据发生变化都将触发监视事件
            handler(newValue, oldValue) {
   
                console.log('isHot发生了数据变化', newValue, oldValue);
            }
        }
    }

})

（1）Vue中的的watch属性默认不监测对象内部值的改变(一层)。

（2）配置deep：true可以监测对象内部值的改变（多层）

注意：

（1）Vue本身可以监测对象内部值的改变，但Vue提供的watch属性不行，为了效率。

（2）使用watch时根据数据的具体结构，决定是否采用深度检测。

简写形式：

当不需要配置其他属性时，可以选择简写(不可以使用箭头函数，否则this指向会发生改变)

 watch: {
   
     isHot(newValue, oldValue){
   
         console.log('isHot发生了数据变化', newValue, oldValue);
     }
 }
    
vm.$watch('isHot', function(newValue, oldValue){
   
        console.log('isHot发生了数据变化', newValue, oldValue);
    }
})

computed 和 watch 之间的区别：

1.computed能完成的功能，watch都可以完成；

2.watch能完成的功能，computed不一定能完成。例如watch可以进行异步操作，computed不行。

注意:

1.所被Vue管理的函数，最好写成普通函数，这样的this的指向才是vm 或 组件实例对象。

2.所不被Vue管理的函数（如定时器的回调函数，ajax的回调函数，promise的回调函数），最好写成箭头函数，这样this的指向才是this 或 组件实例对象。

1.8. class 与 style绑定

1.8.1.理解

1. 在应用界面中，某些元素的样式是变化的

2. class/style绑定就是专门用来实现动态样式效果的技术

1.8.2.class绑定

1. 使用形式: :class=‘xxx’；

2. 表达式是字符串时：‘classA’ 使用于：样式的类名不确定，需要动态指定

3. 表达式是对象：’{classA : isA , classB : isB}’ 使用于：样式的个数不确定、名字也不确定

4. 表达式是数组：[‘classA’ , ‘classB’ ] 使用于：绑定的样式个数确定&#x