李公子的博客

VeeValidate 是 Vue.js 表单验证框架。VeeValidatehttps://vee-validate.logaretm.com/第一步：安装npm i vee-validate@4.0.3第二步：导入// 导入组件import { Form, Field } from 'vee-validate'export default { name: 'LoginForm', components: { Form, Field }}第三步：使用 .

指定组件显示的内容：new Vue({选项})el 选项，通过一个选择器找到容器，容器内容就是组件内容提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。在实例挂载之后，元素可以用 vm.$el 访问。如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。项目中会有index.html 文件,里面会存在一个div<div id="ap

介绍一个webAPI：IntersectionObserverIntersectionObserver API，可以自动"观察"元素是否可见，Chrome 51+ 已经支持。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 API 叫做"交叉观察器"。检测某个元素是否进入了"视口"（viewport），即用户能不能看到它。// 创建观察对象实例const observer = new IntersectionObserver(callback[, options].

什么是插件扩展vue原有的功能：全局组件，自定义指令，挂载原型方法，注意：没有全局过滤器。这就是插件插件的语法要素vue2.0插件写法要素：导出一个对象，有install函数，默认传入了Vue构造函数，Vue基础之上扩展vue3.0插件写法要素：导出一个对象，有install函数，默认传入了app应用实例，app基础之上扩展// 导入组件import Skeleton from './skeleton.vue'// 向外暴露一个对象 需要有 install 方法export de

获取单个ref属性绑定的dom元素vue3需要借助生命周期方法，在setup执行时，template中的元素还没挂载到页面上，所以必须在mounted之后才能获取到元素。<template> <h1 ref="box">Ref属性获取dom</h1></template><script>import { ref, onMounted } from 'vue'export default { name: 'Ref',

创建路由模块在项目中创建router.js 路由模块，在其中按照如下4个步骤创建并得到路由的实例对象：1. 从vue-router中按需导入两个方法2. 导入需要使用路由控制的组件3. 创建路由实例对象4. 向外共享路由实例对象5. 在mian.js中导入并挂载路由模块// 1. 从vue-router 中按需导入两个方法// 2. createRouter 方法用于创建路由的实例对象// 3. createHashHistory 用于指定路由的工作模式（hash 模式）

全局API的转移 Vue 2.x 有许多全局 API 和配置。 例如：注册全局组件、注册全局指令等。 //注册全局组件Vue.component('MyButton', { data: () => ({ count: 0 }), template: '<button @click="count++">Clicked {{ count }} times.</button>'})//注册全局指令Vue.directive('fo

Fragment在Vue2中: 组件必须有一个根标签在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中好处: 减少标签层级, 减小内存占用<template> <h3>我是App组件</h3> <h3>我是App组件</h3> <h3>我是App组件</h3></template> ...

isRef: 检查一个值是否为一个 ref 对象isReactive: 检查一个对象是否是由 reactive 创建的响应式代理isReadonly: 检查一个对象是否是由 readonly 创建的只读代理isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理import {ref, reactive,toRefs,readonly,isRef,isReactive,isReadonly,isProxy } from 'vue'export de

作用：实现祖与后代组件间通信套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据用法： 用法很简我们需要引入方法 在祖组件中调用provide方法来提供数据 在子组件中调用inject方法来接收数据祖组件中：setup(){ ...... let car = reactive({name:'奔驰',price:'40万'}) provide('car'...

作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。<template> <div> <input type="text" v-model="keyWorld"> <h1>值是：{{keyWorld}}</h1> </div></template><script>import { customRef } from "vue";export default

toRaw： 作用：将一个由reactive生成的响应式对象转为普通对象。 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。 markRaw： 作用：标记一个对象，使其永远不会再成为响应式对象。 应用场景: 有些值不应被设置为响应式的，例如复杂的第三方类库等。 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。 代码演示大气...

readonly:让一个响应式数据变为只读的（深只读）。shallowReadonly：让一个响应式数据变为只读的（浅只读）。应用场景: 不希望数据被修改时。代码演示readonly 我们在代码中定义了一个响应式对象person 然后使用readonly(person )方法传入person 返回一个只读的对象 用p接收并返回<template> <div> <h1...

shallowReactive 与 shallowRef shallowReactive：只处理对象最外层属性的响应式（浅响应式）。 shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。 什么时候使用? 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。

了解toRef：创建一个 ref 对象，其value值指向另一个对象中的某个属性。语法：const name = toRef(person,'name')应用: 要将响应式对象中的某个属性单独提供给外部使用时。扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)代码演示 我们在组件中定义了一个人的信息 并将定义的信息返回 在页面中使用&lt...

什么是hook？本质是一个函数，把setup函数中使用的Composition API进行了封装。类似于vue2.x中的mixin。自定义hook一般放在src下面hooks文件夹里面 文件名使用use开头方法自定义 Hook 是一个函数，函数内部可以调用其他的 Hook。自定义hook的优势:复用代码, 让setup中的逻辑更清楚易懂。自定义hook相对于普通js复用逻辑的抽离...

什么是生命周期：vue中每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。vue2和vue3中生命周期的对比：对Vue2生命周期不熟悉的同学可以看我的另一篇文章Vue2的生命周期Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名： beforeDestroy改名为 beforeUnmount destroyed改名为 unmounted ...

computed函数 与Vue2.x中computed配置功能一致 写法：有两种形式 简写形式 和完整写法 不管是那种写法我们都需要在组件中先引入computed方法在使用 引入computed 方法import { computed } from 'vue' 下面我们通过代码来具体演示它的用法 我们在setup方法中声明了一个data对象, 对象中我们提供了一个人的姓（firstName） 和 名（lastName）...

ref函数作用: 定义一个响应式的数据语法: const xxx = ref(initValue) 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。 JS中操作数据： xxx.value 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div> <template> <div> <p>姓名：{{name}}</p> &.

Vue3简介 2020年9月18日，Vue.js发布3.0版本，代号：One Piece（海贼王） 耗时2年多、2600+次提交、30+个RFC、600+次PR、99位贡献者 github上的tags地址：https://github.com/vuejs/vue-next/releases/tag/v3.0.0 Vue3带来了什么： 1.性能的提升 打包大小减少41% 初次渲染快55%, 更新渲染快133% 内存减少54% .......

各位小伙伴大家好本篇文章教你如何安装vue3.0的开发者工具为什么要安装vue3的开发者工具？vue2.0的开发者工具中是不支持vue3.0的代码的 所以我们需要安装一个vue3专用的开发者工具 让我们在vue3的项目中更好更方便的去调试 有两种安装方式：在线安装、离线安装在线安装打开chrome网上应用商店搜索一下vue 选择添加至Chrome 下载完成之后就安装成功了离线安装 有很多小伙伴因为一些原因打不开Chrome应用商店，...

vue2.x的响应式 实现原理： 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）。 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹） Object.defineProperty(data, 'count', { get () {}, set () {}}) 具体可以看我的另一篇文章Vue2中的数据代理 存在问题： 新增属性、...

理解setup Vue3.0中一个新的配置项，值为一个函数。 setup是所有Composition API（组合API）“ 表演的舞台 ”。 组件中所用到的：数据、方法等等，均要配置在setup中。 setup函数的两种返回值： 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点关注！） 若返回一个渲染函数：则可以自定义渲染内容。（了解） <template> <div> <