Vue学习文档

Vue学习文档

https://cdn.jsdelivr.net/npm/vue/dist/vue.js

vue是构建用户界面的前端框架 s渐进式的JavaScript框架

vue特点：

易用：基础只需HTML、CSS、JAvaScript

灵活：可以只在一个库和一套完整框架之间伸缩自如（渐进式）

高效：运行大小20kb，超快的虚拟DOM

面试题：

Web界面由DOM树(树的意思是数据结构)来构建，当其中一部分发

生变化时，其实就是对应某个DOM节点发生了变化

虚拟DOM就是为了解决浏览器性能问题而被设计出来的。如前，

若一次操作中有10次更新DOM的动作，虚拟DOM不会立即操作DOM，

而是将这10次更新的diff内容保存到本地一个JS对象中，最终将

这个JS对象一次性attch到DOM树上，再进行后续操作，避免大量

无谓的计算量。所以，用JS对象模拟DOM节点的好处是，页面的

更新可以先全部反映在JS对象(虚拟DOM)上，操作内存中的JS对

象的速度显然要更快，等更新完成后，再将最终的JS对象映射成

真实的DOM，交由浏览器去绘制

Vue的底层原理 mvvm模式

MVVM：model、view、ViewModel。MVVM架构一样是M、V分离，但

中间是以VM（ViewModel）来串接，这个VM就像View 的一个代理

程序，它负责直接对Model做沟通。而View可以通过一些机制例

如双向数据绑定来和VM沟通以获取资料，再抛给model做存储工

作。

面试题：讲一讲mvvm

MVVM是Model-View-ViewModel缩写，也就是把MVC中的

Controller演变成ViewModel。Model层代表数据模型，View代表 UI组件，ViewModel是View和Model层的桥梁，数据会绑定到

viewModel层并自动将数据渲染到页面中，视图变化的时候会通

知viewModel层更新数据。

Vue优势：

轻量级：vue只关注视图层，是一个构建数据的视图集

合，大小只有几十kb,angular学习成本高，使用复杂。

Vue相对简单，直接所以vue使用更加友好

数据绑定：vue是一个MVVM框架，数据发生变化时，视

图就会发生变化，视图变化相应的数据也会变化，保

留了angular的特点，双向数据绑定

指令：指令有内置指令和自定义指令，以“v-”开头，

作用于html元素，将指令绑定在元素上，会给绑定的

元素添加一些特殊行为

插件：常用的扩展插件vue-router、Vuex等

视图，数据，结构分离：使数据的更改更为简单，不

需要进行逻辑代码的修改，只需要操作数据就能完成

相关操作；

虚拟DOM：dom操作是非常耗费性能的， 不再使用原生

的dom操作节点，极大解放dom操作，但具体操作的还

是dom不过是换了另一种方式；

运行速度更快:相比较与react而言，同样是操作虚拟

欣知大数据—孙也

dom，就性能而言，vue存在很大的优势。

data  vue实例数据对象

methods    vue中的方法

components  定义子组件

computed   计算属性

filters  过滤器

el  唯一根标签

watch  监听数据变化

{{}} 模板渲染

不能写语句、不能解析html、不能放属性上面。

v-text

设置标签的内容，元素的innerText 必须是双标签、会替换{{}}中的标签内容，可以内部写表达式

事件绑定属性

v-on    v-on：事件名=“方法（）”

绑定的方法在methods属性里 可以在方法中通过this获取data中的值

v-on可以简写成@

事件绑定且传参

计数器

$event

是vue提供的特殊变量，用来表示原生事件的参数对象event，可以解决事件参数对象event被覆盖的问题

事件修饰符

.Stop：阻止事件冒泡

.prevent：阻止默认事件行为

.capture：事件捕获

.self：将事件绑定到自身，只有自身才能触发

.once：事件只能绑定一次

条件渲染显示切换

v-show 条件渲染判断是否隐藏，true是显示false是隐藏。原理：修改display属性

v-if，v-else判断是否插值 根据条件的真假判断是否显示数据

v-for 列表渲染

v-for=“intem in 数组”  根据数组生成列表结构，隐式遍历

可以通过语法获取item子项，也可以获取到索引index

v-model 控制列表单产生数据，双向绑定数据

初始化的选择器

.选择器只能选中一个范围，默认选择第一个，所以建议使用id

选择器

2.根标签不能用body（el挂载不能用Boby也不可以用HTML），一

般都在body里面放一个根标签

3.能够使用vue的标签只能是双目标签

4.new Vue可以在一个页面用多次（后面的组件化也能够支撑这

一点

新的插件volar

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，是 Vue 的生命周期。

Vue生命周期中有多个事件钩子，在控制整个Vue实例过程时更容易形成好的逻辑

Vue生命周期为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/后。

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

DOM 渲染在 mounted 中就已经完成了。

生命周期钩子的一些使用方法：

beforecreate : 可以在此阶段加loading事件，在加载实例时触发；

created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用；

mounted : 挂载元素，获取到DOM节点；

updated : 如果对数据统一处理，在这里写上相应函数；

beforeDestroy : 可以做一个确认停止事件的确认框；

nextTick : 更新数据后立即操作dom；

显示数据(v-text和v-html)

v-text和v-html专门用来展示数据, 作用和插值表达式类似。v-text和v-html可以避免插值闪烁问题.当网速比较慢时, 使用{{}}来展示数据, 有可能会产生插值闪烁问题。

数据双向绑定数据(v-model)

Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

1. 注：双向绑定, 只能绑定**“文本框,单选按钮,复选框,文本域,下拉列表”**等
2. 文本框/单选按钮/textarea, 绑定的数据是字符串类型
3. 单个复选框, 绑定的是boolean类型
4. 多个复选框, 绑定的是数组
5. select单选对应字符串，多选对应也是数组

事件绑定(v-on)

​ Vue中也可以给页面元素绑定事件。

注：Vue支持html中所有已知事件. 如: @click, @submit等, 只不过事件的名字不带on

事件修饰符

事件修饰符主要对事件的发生范围进行限定

.stop ：阻止事件冒泡, 也就是当前元素发生事件,但当前元素的父元素不发生该事件

.prevent ：阻止默认事件发生

.capture ：使用事件捕获模式, 主动获取子元素发生事件, 把获取到的事件当自己的事件执行

.self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）

.once ：只执行一次

循环遍历(v-for)

items：要迭代的数组

item：存储数组元素的变量名

index：迭代到的当前元素索引，从0开始。

遍历对象

value，对象的值

key， 对象的键

index, 索引，从0开始

key 一般配合v-for一起使用. 用来在特定情况下, 保证被遍历的数组中的元素的顺序

prpos父传子

props主要用于父组件向子组件通信。在父组件中通过用 :msg="msg" 绑定需要传给子组件的属性值，然后再在子组件中用 props 接收该属性值。

注：props中数据流是单项的，即子组件不可改变父组件传来的值

在组合式API中，如果想在子组件中用其它变量接收props的值时需要使用toRef将props中的属性转为响应式。

emit(子传父)

emit 也就是通过自定义事件传值，主要用于子组件向父组件通信。

在子组件的点击事件中，通过触发父组件中的自定义事件，把想传给父组件的信息以参数的形式带过去，父组件便可以拿到子组件传过来的参数值。

它接受两个参数：

• props: 组件传入的属性
• context

setup 中接受的props是响应式的当传入新的props时，会及时被更新。

在vue3中得setup()中得第二个参数content对象中就有emit，那么要在setup()接收第二个参数中使用分解对象法取出emit就可以在setup方法中随意使用了。

Expose/ref

expose与ref 主要用于父组件获取子组件的属性或方法。在子组件中，向外暴露出属性或方法，父组件便可以使用 ref 获取到子组件身上暴露的属性或方法。

provide / inject

provide与inject 主要为父组件向子组件或多级嵌套的子组件通信。

provide：在父组件中可以通过 provide 提供需要向后代组件传送的信息。

inject：从父组件到该组件无论嵌套多少层都可以直接用 inject 拿到父组件传送的信息。

父组件或者可以说成祖组件