Vue学习笔记(基础知识整理）

学习地址：尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili

目录

VUE简介

1.vue是什么？

2.vue语法

MVV模型

事件的基本使用

监视属性

key的原理

过滤器

v-pre指令

生命周期

安装vue脚手架

自定义事件

vue封装的过度与动画

插槽

Vuex

1.vuex是什么

2.什么时候使用Vuex

getters的使用

---

在浏览器中输入 chrome://version/,找到个人资料路径，复制该路径，在电脑中找到该路径下的Extensions→插件文件名→manifest.json，将manifest.json中第三行代码改为： “persistent”: true

VUE简介

1.vue是什么？

一套用于构建用户界面的渐进式JavaScript框架

2.vue语法

vue模板语法有2大类

1.插值语法：

功能：用于解析标签体内容。

写法:{{xxx}} xxx是js表达式，可以直接读取到data中的所有属性

2.指令语法：

功能：用于解析标签(包括：标签属性、标签体内容、绑定事件.....)

例:v-bind:href="xxx" 或简写为 :href="xxx" xxx同样要写js表达式

且可以直接读取data中的所有属性。

注意：Vue中有很多的指令。且形式都是：v-???.

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

1.单向绑定(v-bind):数据只能从data流向页面

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

注意：

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

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

data和el的2种写法

1.el有2种写法

(1)new Vue时候配置el属性

(2)先创建Vue实例。随后再通过V.$mount('#root')指定el的值

(1)对象式

(2)函数式

如何选择：目前那种写法都可以，以后学习达到组件时，data必须使用函数式，否则会报错

3.一个重要的原则：

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

MVV模型

1. M:模型(Model):data中的数据

2. V:视图(View):模板代码

3. VM：视图模型(ViewModel)：Vue实例

观察发现：

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

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

数据代理：通过一个对象代理度另一个对象中属性的操作(读/写)

事件的基本使用

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

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

3.methods中配置的函数，不要用箭头函数！否则this就不是vm了

4.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或 组件实例对象

5.@click=“demo" 和 @click="demo($event)" 效果一致，但后者可用传参

Vue中的事件修饰符：

1.prevent:阻止默认事件(常用)；

2.stop:阻止事件冒泡(常用)；

3.once:事件只触发一次(常用)；

4.capture:使用事件的捕获模式；

5.self：只有event.target是当前操作的元素时才触发事件

6.passive:事件的默认行为立即执行，无需等待事件回调执行完毕；

Vue中常见的按键别名：

1.Vue中常见的按键别名

回车 => enter

删除 => delete

退出 => esc

空格 => space

换行 => tab

上 => up

下 => down

左 => left

右 => right

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

3.系统修饰键(用法特殊)：ctrl、alt、shift、meta

(1)配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

(2)配合keydown使用：正常触发事件

4.也可以使用keyCode去指定具体的按键(不推荐)

5.Vue.config.keyCodes.自定义键名 = 键码。 可以去定制按键别名

计算属性：

1.定义：要用的属性不存在，要通过已有属性计算得来

2.原理：底层借助了Object.defineproperty方法提供的getter和setter

3.get函数什么时候执行？

（1）初次读取时会执行一次

（2）当依赖的数据发生改变时会被再次调用

4.优势：与methods实现相比，内部有缓存机制(复用)。效率更高，调试方便

5.备注：

1.计算属性最终会出现在vm上，直接读取使用即可

2.如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生

监视属性

（侦听属性）监视属性watch：

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

2.监视的属性必须存在，才能进行监视

3.监视的两种写法：

（1）new Vue时传入watch配置

（2）通过vm.$watch监视

深度监视：

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

(2)配置deep:true可以监测对象内部值改变

注：

1.Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

2.使用watch时根据数据的具体结构，决定是否采用深度监测

computed和watch之间的区别:

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

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

两个重要的小原则：

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

2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等)，最好写成箭头函数

这样this的指向才是vm或 组件实例对象

key的原理

过滤器

定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

语法：

1.注册过滤器：Vue.filter(name,callback)或new Vue{filters:{ }}

2.使用过滤器：{{xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"

注:

1.过滤器也可以接受额外参数、多个过滤器也可以串联

2.并没有改变原本的数据，是产生新的对应的数据

v-text指令：

1.作用：向其所在的节点中渲染文本内容

2.与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

v-pre指令

1.跳过器所在节点的编译过程

2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

生命周期

生命周期：

1.又名：生命周期回调函数、生命周期函数、生命周期钩子

2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的

4.生命周期函数中的this指向是vm或组件实例对象

常用的生命周期钩子：

1.mounted:发送ajax请求、启动定时器、绑定自定义事件、订阅消息等【初始化操作】

2.beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

关于销毁Vue实例

1.销毁后借助Vue开发者工具看不到任何信息

2.销毁后自定义事件会失效，但原生DOM事件依然有效

3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了

关于VueComponent:

1school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的

2.我们只需要写<school/>或<school></school>,Vue解析时会帮我们创建school组件的实例对象

3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent

4.关于this指向：

（1)组件配置中：

data函数、method中的函数、watch中的函数、computed中的函数他们的this均是【VueComponent实例对象】

（2）new Vue(options)配置中：

data函数、method中的函数、watch中的函数、computed中的函数 他们的this均是【Vue实例对象】

5.VueComponent的实例对象，以后简称vc(也可称之为：组件实例对象)

Vue的实例对象。以后简称为vm

1.一个重要的内置关系：VueComponent.prototype.__proto === Vue.prototype

2.为什么要有这个关系：让组件实例对象(vc)可以访问到Vue原型上的属性、方法

安装vue脚手架

防止配置过于缓慢 先配置淘宝镜像

cd xxx 切换目录文件夹

关于不同版本的Vue：

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

（1）vue.js是完整版 Vue.包含：核心功能+模板解析器

（2）vue.runtime.xxx.js是运行版的Vue。只包含：核心功能:没有模板解析器

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

ref属性

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

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

3.使用方式：

打标识：<h1 ref="xxx" >...</h1>或 <School ref="xxx"></School>

获取：this.$refs.xxx

// props: ['name','age','sex'],

// 接收的同时对数据进行类型限制

// props:{

// name:String,

// age:Number,

// sex:String

// }

// 接收的同时对数据：进行类型限制+默认值的指定+必要性的限制

// props:{

// name:{

// type: String, //name的类型是字符串

// required: true //name是必要的

// },

// age: {

// type: Number,

// default: 99 //默认值

// },

// sex: {

// type: String,

// required: true

// }

// }

confirm(' ')

arr.reduce(()=>{

console.log('')

},0)

自定义事件

vue封装的过度与动画

1.准备好样式：

元素进入的样式：

1.v-enter：进入的起点

2.v-enter-active：进入过程中

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

元素离开的样式

1.v-leave：离开的起点

2.v-leave-active：离开过程中

3.v-leave-to：离开的终点

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

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

插槽

Vuex

1.vuex是什么

概念：专门在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

2.什么时候使用Vuex

1.多个组件依赖于同一状态

2.来自不同组件的行为需要变更同一状态

getters的使用