冲啊！ - 博客园

690 vue3源码：虚拟DOM，Compiler，Runtime，Reactivity，Mini-Vue，Proxy，createApp，挂载根组件，组件的始化，Compile，Block Tree

该文被密码保护。阅读全文

posted @ 2021-06-30 13:49 冲啊！阅读(0) 评论(0) 推荐(0)

689 vue3自定义指令，Teleport组件，插件编写，nexttick

摘要：认识自定义指令实现方式一：聚焦的默认实现实现方式二：局部自定义指令方式三：自定义全局指令指令的生命周期指令的参数和修饰符自定义指令练习时间格式化指令 main.js import { createApp } from 'vue' import App from './04_telepo 阅读全文

posted @ 2021-06-26 10:12 冲啊！阅读(356) 评论(0) 推荐(0)

688 vue3 Composition API：生命周期，provide，inject，hooks，render，h函数，jsx

摘要：生命周期钩子 App.vue <template> <div> <button @click="increment">{{ counter }}</button> </div> </template> <script> import { onMounted, onUpdated, onUnmount 阅读全文

posted @ 2021-06-22 21:29 冲啊！阅读(331) 评论(0) 推荐(0)

687 vue3 Composition API：computed，watchEffect，watch

摘要： computed 01_computed的使用.vue <template> <div> <h2>{{ fullName }}</h2> <button @click="changeName">修改firstName</button> </div> </template> <script> impo 阅读全文

posted @ 2021-06-22 17:37 冲啊！阅读(154) 评论(0) 推荐(0)

686 vue3 Composition API：setup的this、参数、返回值，reactive ，ref，readonly，toRefs，toRef，shallowRef

摘要： Options API的弊端大组件的逻辑分散认识Composition API setup函数的参数 setup函数的返回值 setup不可以使用this App.vue <template> <div> <home message="hahahaha" id="aaa" class="bbbb 阅读全文

posted @ 2021-06-18 22:21 冲啊！阅读(314) 评论(0) 推荐(0)

685 vue3 mixin，extends

摘要：认识Mixin Mixin的基本使用 Mixin的合并规则全局混入Mixin extends import { createApp } from 'vue'; import App from './01_mixin和extends/App.vue'; // import App from './0 阅读全文

posted @ 2021-06-18 16:27 冲啊！阅读(903) 评论(0) 推荐(0)

684 Vue3过渡、动画：transition，transition-group，过渡动画class，animate.css，gsap，列表的过渡

摘要：认识动画 Vue的transition动画 Transition组件的原理过渡动画class class添加的时机和命名规则过渡css动画同时设置过渡和动画显示的指定动画时间过渡的模式mode 动态组件的切换 appear初次渲染 01_过渡动画的使用.vue <template> <di 阅读全文

posted @ 2021-06-12 21:02 冲啊！阅读(774) 评论(0) 推荐(0)

683 vue3的动态组件，keep-alive，异步组件和Suspense，$refs，$parent和$root，生命周期，组件的v-model

摘要：切换组件案例 v-if显示不同的组件动态组件的实现动态组件的传值认识keep-alive keep-alive属性缓存组件的生命周期 App.vue <template> <div> <button v-for="item in tabs" :key="item" @click="itemC 阅读全文

posted @ 2021-06-12 18:40 冲啊！阅读(409) 评论(0) 推荐(0)

682 vue3非父子组件的通信之插槽Slot：多个插槽，具名插槽，动态插槽名，渲染作用域

摘要：认识插槽Slot 如何使用插槽slot？插槽的基本使用插槽的默认内容多个插槽的效果 App.vue <template> <div> <my-slot-cpn> <button>我是按钮</button> </my-slot-cpn> <my-slot-cpn> 我是普通的文本 </my-sl 阅读全文

posted @ 2021-06-10 14:02 冲啊！阅读(1319) 评论(0) 推荐(0)

681 vue3非父子组件的通信：Provide、Inject，Mitt

摘要：非父子组件的通信 Provide和Inject Provide和Inject基本使用 Provide和Inject函数的写法处理响应式数据 A pp.vue <template> <div> <home></home> <button @click="addName">+name</button> 阅读全文

posted @ 2021-06-10 11:41 冲啊！阅读(329) 评论(0) 推荐(0)

680 vue3组件的通信：过props，$emit，非Prop的Attribute

摘要：组件的通信父子组件之间通信的方式父组件传递给子组件 Props的数组用法 Props的对象用法细节一：type的类型都可以是哪些呢？细节二：对象类型的其他写法细节三：Prop 的大小写命名非Prop的Attribute 禁用Attribute继承和多根节点 App.vue <templa 阅读全文

posted @ 2021-06-06 14:59 冲啊！阅读(161) 评论(0) 推荐(0)

679 vue3组件的拆分和嵌套，组件的css作用域

摘要：认识组件的嵌套组件的拆分 App.vue <template> <div> <Header></Header> <MyMain></MyMain> <Myooter></Myooter> </div> </template> <script> import Header from './Heade 阅读全文

posted @ 2021-06-05 11:50 冲啊！阅读(392) 评论(0) 推荐(0)

678 Vue CLI，vite

摘要： Vue CLI脚手架 Vue CLI 安装和使用 npm install @vue/cli -g vue create 项目的过程项目的目录结构认识Vite Vite的构造浏览器原生支持模块化 Vite的安装和使用 npm install vite –g # 全局安装 npm install 阅读全文

posted @ 2021-06-04 20:50 冲啊！阅读(118) 评论(0) 推荐(0)

677 vue3组件化开发初体验：组件的名称，全局组件，局部组件

摘要：认识组件化开发组件化开发 Vue的组件化注册组件的方式注册全局组件全局组件的逻辑组件的名称注册局部组件布局组件注册代码 02_注册全局组件.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <me 阅读全文

posted @ 2021-05-23 16:20 冲啊！阅读(238) 评论(0) 推荐(0)

676 vue3 v-model：原理，绑定input、textarea、checkbox、radio、select，修饰符lazy、number、trim

摘要： v-model的基本使用 v-model的原理事实上v-model 01_v-model的基本使用.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib 阅读全文

posted @ 2021-05-22 21:00 冲啊！阅读(941) 评论(0) 推荐(0)

675 对象的引用-浅拷贝-深拷贝

摘要： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi 阅读全文

posted @ 2021-05-22 13:45 冲啊！阅读(61) 评论(0) 推荐(0)

674 vue3侦听器watch

摘要：认识侦听器watch 侦听器案例 01_侦听器的基本使用.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> 阅读全文

posted @ 2021-05-21 15:25 冲啊！阅读(142) 评论(0) 推荐(0)

673 vue计算属性：缓存，setter和getter

摘要：复杂data的处理方式认识计算属性computed 案例实现思路实现思路一：模板语法实现思路二：method实现思路三的实现：computed实现计算属性 vs methods 计算属性的缓存计算属性的setter和getter 源码如何对setter和getter处理 01_三个案例的阅读全文

posted @ 2021-05-19 12:07 冲啊！阅读(129) 评论(0) 推荐(0)

672 vue列表渲染：v-for支持的类型，template元素，数组更新检测，v-for中的key，VNode

摘要：列表渲染 v-for基本使用 v-for支持的类型 01_v-for的基本使用.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content 阅读全文

posted @ 2021-05-19 11:10 冲啊！阅读(224) 评论(0) 推荐(0)

671 vue条件渲染

摘要：条件渲染 v-if、v-else、v-else-if template元素 v-show v-show和v-if的区别 01_条件渲染的基本使用.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta htt 阅读全文

posted @ 2021-05-18 10:50 冲啊！阅读(47) 评论(0) 推荐(0)