Vue知识点汇总【持更】(vue知识点总结)

Vue知识点汇总【持更】

目录

1 vue的两个特性

1.1 数据驱动视图

1.2 双向数据绑定 

2 MVVM工作原理

3 vue 的指令

3.1 内容渲染指令

3.2 属性绑定指令

3.3 事件绑定指令

3.4 事件修饰符 

3.5 按钮修饰符

3.6 双向数据绑定指令

3.7 条件渲染指令

3.8 列表渲染指令 

4 vue 的生命周期和生命周期函数 

4.1 生命周期&生命周期函数

4.2 组件生命周期函数的分类

4.3 生命周期函数特点

5 keep-alive

5.1 keep-alive的基本使用

5.2 keep-alive属性

6 计算属性和侦听器

6.1 侦听器

6.1.1 作用

6.1.2 侦听器的格式

6.2 计算属性

6.2.1 使用

6.2.2 注意

6.3 Computed 和 Watch 的区别

7 获取组件/元素——refs

 7.1 ref的概念

 7.2 使用ref引用组件实例

8 绑定Class

8.1 对象语法：

8.1.1 传给v-bind:class一个对象，以动态切换class

8.1.2  在对象中传入更多字段来动态切换多个 class

8.1.3 绑定的数据对象不必内联定义在模板里

8.2 数组语法

8.2.1 把一个数组传给 v-bind:class，以应用一个 class 列表

8.2.2 根据条件切换列表中的 class

8.3 用在组件上

8.4 总结

9 绑定内联样式

9.1 对象语法

9.2 数组语法

10 组件通讯

10.1 父传子用props

10.2 子传父用$emit

10.3 兄弟组件之间的数据共享

11 插槽的使用

11.1 插槽基本用法

11.2  v-slot: 将内容放在指定插槽

11.3 插槽后背（默认）内容

11.4 具名插槽 

11.5 作用域插槽 

11.6 独占默认插槽的缩写语法

11.7 动态插槽名

11.8 带有 slot attribute 的具名插槽

12 路由的使用

12.1 前端路由的概念和原理

12.2 配置

12.3 把router对象挂载到main.js上

12.4 路由的基本使用

12.5  路由重定向

12.6 嵌套路由

12.7 动态路由匹配

12.8 捕获所有路由或 404 Not found 路由

12.9 编程式导航跳转

12.10 路由守卫

12.10.1 全局前置守卫

12.10.2 next 函数的 3 种调用方式

12.10.3 关于path和fullpath

12.11 路由传参

12.11.1 query传参

12.11.2 params传参

12.11.3 路由props配置

13 状态管理

13.1 状态管理简介

13.2 Vuex 的思想

13.3 核心状态管理

13.4 在项目中使用

13.4.1 store一般有以下6个文件

13.4.2 vuex中 this.$store.dispatch() 与 this.$store.commit()方法的区别

13.4.3 实例1

13.4.4 实例2

---

推荐整理分享Vue知识点汇总【持更】(vue知识点总结)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vuex知识点,vue项目知识点详解,vue项目知识点详解,vue3知识点,vuex知识点,vuejs知识点总结,vue 知识点,vue 知识点,内容如对您有帮助，希望把文章链接给更多的朋友！

（部分图例引用黑马教程及其他文章来源）

1 vue的两个特性1.1 数据驱动视图

数据的变化会驱动视图自动更新。

1.2 双向数据绑定 

在网页中，form负责采集数据，Ajax负责提交数据。数据源的变化，会被自动渲染到页面上；页面上表单采集的数据发生变化的时候，会被 vue 自动获取到，并更新到数据源中。

 

2 MVVM工作原理

 MVVM 是 vue 实现数据驱动视图和双向数据绑定的核心原理。MVVM 指的是 Model、View 和 ViewModel，它把每个 HTML 页面都拆分成了这三个部分，如图所示：

 

注：

1、当数据源发生变化时，会被 ViewModel 监听到，VM会根据最新的数据源自动更新页面的结构。

2、当表单元素的值发生变化时，也会被VM监听到，VM会把变化过后最新的数据自动同步到Model数据源中。

3 vue 的指令3.1 内容渲染指令

内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个：

{{}}插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容！

 （注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中！）

v-text：会覆盖元素内部原有的内容！v-html：不仅会覆盖原来的内容，而且可以把带有标签的字符串，渲染成真正的HTML内容！

3.2 属性绑定指令

 v-bind：为元素的属性动态绑定属性值，则需要用到 v-bind 属性绑定指令。

在 vue 中，可以使用v-bind:属性为元素的属性动态绑定值。简写是英文的 " : "。在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：<!--html--><a :href="'https://www.runoob.com/vue2/'+url">点击跳转vue菜鸟教程</a><!--script-->const vm2=new Vue({ el:'#box2', data:{ url:'vue-tutorial.html' }})3.3 事件绑定指令

vue提供了v-on事件绑定指令，用于为DOM元素绑定事件监听。

注意：原生DOM对象有onclick、oninput、onkeyup等原生事件，替换为vue的事件绑定形式后，分别为v-on:click、v-on:input、v-on:keyup。在v-on指令所绑定的事件处理函数，可以接收事件参数对象event。$event是vue提供的特殊变量，用来表示原生的事件参数对象event。<button @click="add">自增</botton><button @click="changeColor">变色</botton>data(){ return{ count:'', }}methods:{ add(){ this.count++; }, changeColor(e){ e.target.style.backgroundColor='red'; }}3.4 事件修饰符 

3.5 按钮修饰符

3.6 双向数据绑定指令

3.7 条件渲染指令

v-if、v-else、v-else-if条件性的渲染某元素，判定为true时渲染，否则不渲染两者区别：v-if条件不满足不渲染，v-show条件不满足令其display为none<div v-if="score<60">不及格</div><div v-else-if="60<=score&&score<90">中等</div><div v-else="score>=90">优秀</div><div v-show="true">display:block显示</div><div v-show="false">display:none隐藏</div>3.8 列表渲染指令 

 

 注意：不推荐在同一元素上使用 v-if 和 v-for （详情请查看官网）

4 vue 的生命周期和生命周期函数 4.1 生命周期&生命周期函数

生命周期概念：生命周期是指一个组件从创建 > 运行 > 销毁的整个过程，强调的是一个时间段。

生命周期函数概念：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。

（注意：生命周期强调的是时间段，生命周期函数强调的是时间点 。）

4.2 组件生命周期函数的分类

4.3 生命周期函数特点

<template> <div class="test-container"> <h3 id="myh3">Test.vue 组件 --- {{ books.length }} 本图书</h3> <p id="pppp">message 的值是：{{ message }}</p> <button @click="message += '~'">修改 message 的值</button> </div></template><script>export default { props: ['info'], data() { return { message: 'hello vue.js', books: [] } }, watch: { message(newVal) { console.log('监视到了 message 的变化：' + newVal) } }, methods: { }, beforeCreate() { // 创建阶段的第1个生命周期函数。在这个函数无法访问data、prors、methods //很少有 }, created() { // 组件只是在内存中被创建好，但还未被渲染到页面 // 经常在它里面，调用 methods 中的方法，利用Ajax请求服务器的数据。并且，把请求到的数据，转存到 data 中，供 template 模板渲染的时候使用！ //可以访问data、prors、methods this.initBookList() }, beforeMount() { //只是在内存上编译好HTML //将在渲染组件时执行的操作 //很少用 }, mounted() { //在此之前DOM还没被渲染，但此时在mounted()时DOM已经被渲染 // 如果要操作当前组件的 DOM，最早只能在 mounted 阶段执行 //组件创建阶段到此结束 }, beforeUpdate() { //已经根据拿到最新数据，还没完成组件DOM结构的渲染 }, // 当数据变化之后，为了能够操作到最新的 DOM 结构，必须把代码写到 updated 生命周期函数中 updated() { //已经根据最新数据，完成组件DOM结构的渲染。可以被执行多次（因为数据会变化多次） //组件运行阶段到此结束 }, beforeDestroy() { this.message = 'aaa' }, destroyed() { //组件销毁阶段到此结束 }}</script>5 keep-alive5.1 keep-alive的基本使用

 当组件第一次被创建，会执行created生命周期函数，也会执行activated生命周期函数。之后组件再被激活，只会触发activated而不会触发created。

使用： 

<keep-alive> <组件名></组件名><keep-alive>5.2 keep-alive属性include包含的组件(可以为字符串，数组，以及正则表达式，只有名称匹配的组件会被缓存)。exclude排除的组件(可以为字符串，数组，以及正则表达式，任何匹配的组件都不会被缓存)。max缓存组件的最大值(类型为字符或者数字,可以控制缓存组件的个数)。// 只缓存组件name为a和b的组件<keep-alive include="a,b"> <component /></keep-alive>// 组件name为c的组件不缓存(可以保留它的状态或避免重新渲染)<keep-alive exclude="c"> <component /></keep-alive>// 如果同时使用include,exclude,那么exclude优先于include， 下面的例子只缓存a组件<keep-alive include="a,b" exclude="b"> <component /></keep-alive>// 如果缓存的组件超过了max设定的值5，那么将删除第一个缓存的组件<keep-alive exclude="c" max="5"> <component /></keep-alive>

 注意：若组件没有定义自己的name，则默认以注册组件时的名称作为匹配条件。如果定义了name，会以name作为匹配条件。

6 计算属性和侦听器6.1 侦听器6.1.1 作用

watch侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。

6.1.2 侦听器的格式

1、方法格式的侦听器（watch:{……}）：

缺点1：无法在刚进入页面的时候自动触发。缺点2：如果侦听的是一个对象，当对象里的属性值发生变化时，不会触发侦听器。

2、对象格式的侦听器 （watch（）{……}）：

 好处1：可以通过immediate选项让侦听器自动触发。

 

 好处2：可以通过deep选项，让侦听器深度监听对象中每个属性的变化。

 

 

如果要侦听对象里属性的变化，可以如以下操作：

6.2 计算属性6.2.1 使用

1、定义计算属性：

new Vue({ el:"#app", data:{ ... }, methods:{ ... }, watch:{ ... }, computed:{ 计算属性名(){ 计算过程 return 属性值 } }})

2、在页面上使用计算属性：

<p>{{计算属性名}}</p>6.2.2 注意

1、computed 和 data同级，计算属性写在computed中；

2、写起来像方法，用起来像属性；

3、计算属性虽然称为属性，但其本质是一个函数；

4、虽然计算属性本质是一个函数，但是在页面中使用计算属性时，不要加()；

5、一定要有返回值；

6、可以使用data中的已知值；

7、只要跟计算属性相关的数据发生了变化，计算属性就会重新计算，不相关的属性无论如何变化，都不会导致计算属性变化；

8、计算属性名不能和data中的数据重名（因为要使用data中的数据）。

【页面上使用】{{reversedMessage}}【data中定义】msg:'New York'【计算属性】computed:{ reversedMsg (){ return this.msg.split('').reverse().join('') }}6.3 Computed 和 Watch 的区别

1、computed计算属性：作用： （1）解决模板中放入过多的逻辑会让模板过重且难以维护的问题。例如两个数据的拼接或字体颜色的判断。

（2）它支持缓存，只有依赖的数据发生了变化，才会重新计算。例如模板中多次用到数据拼接可以用计算属性，只执行一次计算，除非数据发生变化。

（3）不支持异步，如果有异步操作，无法监听数据的变化。

（4）如果属性值是函数，默认使用get方法，函数的返回值就是属性的属性值。还有一个set方法，当数据变化时就会调用set方法。

（5）computed的值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data