Vue 核心基础知识梳理

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

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

据不完全统计目前国内哪些大厂在使用 Vue

小红书，微博，哔哩哔哩（B 站），爱奇艺，芒果 TV，手机搜狐

饿了么，小米商城，一加手机，乐视商城，滴滴开源、高德开放平台、京东拼购+领券+新人频道 H5+京东云，网易云信+手机网易+网易邮箱 H5，大麦网 H5、唯品会 H5、少数派、百度指数、微信公众平台、大鱼号，携程 H5 多个模块，创客贴、兑吧、国美电器 H5、聚美优品触屏版，理想汽车，途虎养车，雪球财经、电玩巴士等等

开源中国，CSDN，Gitee（码云），GitLab，掘金，简书，蓝湖，IT 桔子等等

1、Vue 实例（应用）相关

名称	描述
Vue.createApp()	创建 vue 实例（应用），参数可以决定根组件如何渲染
mount(){}	该方法可以将 vue 实例，挂载在 dom 元素上
template	模板，用来定义该 vue 应用的展示内容。
data(){}	用来定义数据
{{}}	插值表达式。 ① 可以用来将变量渲染到 dom 结构中。用于起始标签与闭合标签之间 ② {{}}中间可以写 js 表达式
$data	vue 实例的属性，可以用来操作 data 中定义的数据
methods:{}	里面可以书写方法（函数）
computed:{}	计算属性，当计算属性依赖的内容发生变更时，才会重新执行计算
watch:{}	监听器，可以监听数据的改变，做异步操作

2、Vue 样式相关

名称	描述
:class	v-bind:class 的简写形式，为元素绑定动态类名
$attrs	可以用来获取父组件绑定在子组件身上的属性（Non-Props 属性）
:style	v-bind:style 的简写形式，为元素绑定动态的行内样式

3、Vue 常见指令

名称	描述
v-on	绑定事件 ① “v-on:”可以简写成@ ② 可以使用“@[变量名]”，绑定动态事件。即，具体绑定哪个事件，由“变量名”决定 ③ 事件处理函数中，可以使用事件对象 event ④ 事件处理函数中，如果想传递多个参数，可以使用$event 指代事件对象
v-if ，v-else-if ，v-else	条件渲染： 通过控制 dom 结构的存在与否来实现区块的显示和隐藏 三者可以组合使用
v-show	条件渲染：>通过控制元素的 display 属性来控制区块的显示和隐藏
v-for	列表渲染：用来循环数组、对象 为了提高性能，可以使用 :key（前面没有出现:key,要不要考虑加上）为元素绑定唯一的 key 值
v-model	① 表单中的内容与 data 方法中的变量，进行双向数据绑定 ② 复选框，可以通过 true-value、false-value 属性指定选中、没选中时显示的值（不常用） ③ v-model 可以使用.lazy 修饰符，减少数据的变化频率（不常用） ④ v-model 可以使用.number 修饰符将数据转换成数字（不常用） ⑤ v-model 可以使用.trim 修饰符去除数据首尾的空格
v-bind	① 可以将标签/组件上的某个属性与数据变量进行绑定。 ② “v-bind:”可以简写成 “:” ③ 可以使用 “:[变量名]”，绑定动态属性。 即，具体绑定哪个属性，由“变量名”决定
v-html	识别变量中的 html 标签； 将变量中的 html 结构解析成 dom 结构
v-once	标签/组件只渲染一次； 渲染一次后，如果数据变化，标签/组件的内容不会跟随变化

4、Vue 事件修饰符

名称	描述
.prevent	阻止默认事件
.stop	阻止事件冒泡
.self	只有操作自身时，才会触发自身上的事件（常用于点击事件，即只有点击自己时，才会触发自身上绑定的点击事件）
.capture	把事件的运营模式变成捕获（不常用）
.once	事件只执行一次
.passive	提升事件性能，常用于滚动事件 scroll（不常用）

5、Vue 按键修饰符

名称	描述
.enter	触发事件的按键是 enter 键，才会真正触发事件。类似的按键修饰符还有.tab、.delete、.esc、.up、.down、.left、.right、.ctrl（不常用）

6、鼠标修饰符

名称	描述
.left	只有点击鼠标左键，才会触发事件。类似的鼠标修饰符还有.middle、.right（不常用）

7、精确修饰符

名称	描述
.exact	精确的按住指定键，才会触发事件（不常用）

8、Vue dom 相关

名称	描述
ref	标签、组件设置该属性后，可以通过“this.$refs.xxx”的形式获取到该标签的 dom 节点、该组件的引用

9、创建组件

名称	描述
app.component()	定义全局组件，其中“app”是保存 Vue 实例的变量
components:{}	注册局部组件

10、组件之间传值

名称	描述
props	父组件调用子组件时，可以通过标签属性的形式给子组件传值。 子组件内部通过 props 属性接收传过来的值。 子组件接收值时，可以进行校验： type 用来校验数据类型 default 用来设置默认值 require 用来设置必填
Non-Props	父组件给子组件传递内容的时候，子组件不通过 props 接收。 此时 vue 底层会把传递过来的属性，放在子组件最外层元素上，将其变成子组件的一个属性
inheritAttrs	用来设置子组件是否继承父组件传递过来的 Non-props 属性
$emit	子组件通过$emit 方法触发自定义事件，利用该事件可以给父组件传值
emits	声明组件会向外触发什么事件。通过 emits 属性我们就能知道该组件会向外触发什么事件
v-model	父子组件之间可以通过 v-model 实现双向数据绑定，子组件接收到的数据可以用 modelValue 表示父组件要通过 v-model 给子组件绑定数据（选学绑定多个数据）

11、动态组件

名称	描述
<component/>	定义动态组件。具体显示哪个组件，由“:is”属性的值决定
<keep-alive></keep-alive>	缓存标签。包裹动态组件后，可以保留上一个组件中的内容

12、异步组件

名称	描述
Vue.defineAsyncComponent()	该方法可以创建异步组件（了解即可）

13、依赖、注入

名称	描述
provide ，inject	祖先组件，通过 provide，可以向子孙组件注入依赖 孙子组件，通过 inject，可以在可用的注入内容中搜索需要使用的内容 二者配合，可以实现祖先组件向子孙组件传值（一次性的）

#