Vue官网2文档笔记-CFANZ编程社区

文章目录

官网Vue2文档笔记

文档地址：https://cn.vuejs.org/v2/guide/

(注：可以使用csdn在线编辑发布编辑markdown的服务，导出为markdown文件后转存到坚果云，pc端无法显示目录，但是移动端可以。等待其完善功能，（不必将图片另存文件，更多功能，保存模板间断编辑

$event

更多枚举查看 Vue property API
或者查看收藏夹中速查文件夹中的 Vue Property API

在这里插入图片描述

$on

在这里插入图片描述

Class 与 Style 绑定

对象语法

(js 语法动态绑定与切换 style 属性
在这里插入图片描述

列表渲染

v-for 中使用对象

（可以循环对象
（index;name;value
在这里插入图片描述

事件处理

事件修饰符

（.stop:阻止事件的传播（冒泡、捕获）
（.prevent:提交事件不再重载界面
（.capture:两个 div 嵌套，外层 div.capture，发生点击事件会先执行外层 div 代码，与 self 相反
（.self:…先触发内部元素事件
（.once：只响应一次事件
（.passive:告诉浏览器，执行默认动作，不用再去查询是否执行默认动作的过程，提高响应速度
（.stop.prevent：
（.self.prevent:自会阻止对元素自身的点击
在这里插入图片描述

插槽

具名插槽

（格式

在这里插入图片描述

解构插槽 prop

（在父组件中使用 js 语法操作 prop

在这里插入图片描述

动态组件&异步组件

（动态组件<keep-alive)
（异步组件在于体现异步！！！具体看代码

在这里插入图片描述

访问元素&组件

访问根元素

（使用$root,$parent访问根元素（父元素

在这里插入图片描述

处理边界情况

访问子组件&子元素

（可以使用$refs 属性访问子组件
在这里插入图片描述

处理边界情况

依赖注入

（父、子组件通过 provide 与 inject 实现数据传输
（与 prop 的区别：代码结构，数据不能实时更新等

在这里插入图片描述

程序化事件监听器

（$on,$once,$off
在这里插入图片描述

组件之间的循环引用

（渲染时异步加载
在这里插入图片描述

模板定义的替代品

（内联模板：inline-templete,在 Vue 的 DON 元素内定义
（X-Template，在 Vue 的 DOM 元素外引用）
在这里插入图片描述

过渡&动画

新部分，注意使用和掌握、
（有类似 Element-ui 这样的库存在，可以直接引用，而不必自定义）
单独另编辑文件介绍使用

可复用性$组合

混入 mixin

(概念，语法，与组件的用法场景上的区别：分发 Vue 组件中的可复用功能
在这里插入图片描述

选项合并

（钩子函数：对象与组件元素冲突时的取舍
（methods 等：对象与组件元素冲突时的取舍
在这里插入图片描述

全局混入

（一般用不到，仅做了解

在这里插入图片描述

自定义函数

##简介
（directive 局部定义、全局定义
在这里插入图片描述

钩子函数

（各个钩子函数以及其参数

![在这里插入图片描述](https://img-blog.csdnimg.cn/08505d38ac75490ba6f80b9de9e3af54.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAcXFfNDI2OTQ0OTU=,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center

渲染函数&JSX

（看添加的注释，this.$slot.defulft 在这里增加了拓展性
（读懂代码逻辑与作用，前后对比结合文字导引你会发现理解跟使用起来很简单！！！！记得做笔记这部分
（需要掌握的是JSX部分，加载组件库快速实现功能）

基础

（涉及的基础可完全不止这一点，就是个导引）
在这里插入图片描述

使用JS代替模板功能

（了解）
在这里插入图片描述

事件&按键修饰符

（了解）

插槽

（了解）

JSX

（掌握）
在这里插入图片描述

函数式组件

内容比较多页，逻辑同前（不要被属性束缚，了解就好）
个人认为仅做了解，前半部分涉及了Render函数，后面有solts与children区别、引用的短小编译底层代码等可窥探一下深渊

等其他后续内容部分仅做了解，部分可能会被用到