随笔分类 - Vue
摘要：Vue Router https://router.vuejs.org/zh/guide/ vue-router是基于路由和组件的 路由用于设定访问路径, 将路径和组件映射起来. 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换 使用vue-router 第一步：创建路由组件的
阅读全文
摘要：虚拟DOM的优势 对真实的元素节点进行抽象，抽象成VNode（虚拟节点），方便对其进行各种操作： 直接操作DOM来说是有很多的限制的，比如diff、clone等等； 可以使用JavaScript来表达非常多的逻辑，而对于DOM本身来说是非常不方便的； 其次是方便实现跨平台，包括你可以将VNode节点
阅读全文
摘要：自定义指令 | Vue.js https://v3.cn.vuejs.org/guide/migration/custom-directives.html#_3-x-%E8%AF%AD%E6%B3%95 注意：在Vue中，代码的复用和抽象主要还是通过组件；需要对DOM元素进行底层操作，就会用到自定义
阅读全文
摘要：h函数 全局 API | Vue.js https://v3.cn.vuejs.org/api/global-api.html#h Vue在生成真实的DOM之前，会将我们的节点转换成VNode，而VNode组合在一起形成一颗树结构，就是虚拟DOM（VDOM） h() 函数是一个用于创建 vnode
阅读全文
摘要：响应式计算和侦听 | Vue.js https://v3.cn.vuejs.org/guide/reactivity-computed-watchers.html#%E8%AE%A1%E7%AE%97%E5%80%BC computed 方式一：接收一个getter函数，并为 getter 函数返回
阅读全文
摘要：Setup | Vue.js https://v3.cn.vuejs.org/guide/composition-api-setup.html#setup 1、Setup中不能使用this，this并没有指向当前组件实例，并且在setup被调用之前，data、computed、methods等都没有
阅读全文
摘要：组件和组件之间有时候会存在相同的代码逻辑，我们希望对相同的代码逻辑进行抽取。 Mixin提供了一种非常灵活的方式，来分发Vue组件中的可复用功能； 一个Mixin对象可以包含任何组件选项；比如data,method,生命周期钩子函数 当组件使用Mixin对象时，所有Mixin对象的选项将被 混合 进
阅读全文
摘要：Vue的transition动画 可以给下列情形中任何元素和组件添加进入/离开过渡：【无name则默认以v开头，v-enter-from,v-enter-to,v-enter-active,v-leave-from,v-leave-to,v-leave-active】 条件渲染 (使用 v-if)条
阅读全文
摘要：v-model | Vue.js https://v3.cn.vuejs.org/guide/component-custom-events.html#v-model-%E5%8F%82%E6%95%B0 在input中可以使用v-model来完成双向绑定 <input v-model="messa
阅读全文
摘要：异步组件 | Vue.js https://v3.cn.vuejs.org/guide/component-dynamic-async.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6 Webpack的代码分包 默认的打包过程： 默认情况下，在构建整个组件树的过程中
阅读全文
摘要：动态组件 & 异步组件 | Vue.js https://v3.cn.vuejs.org/guide/component-dynamic-async.html#%E5%9C%A8%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%
阅读全文
摘要：定义插槽slot 插槽的使用过程其实是抽取共性、预留不同； 我们会将共同的元素、内容依然在组件内进行封装； 同时会将不同的元素使用slot作为占位，让外部决定到底显示什么样的元素； 插槽 | Vue.js https://v3.cn.vuejs.org/guide/component-slots.h
阅读全文
摘要：父子组件之间通信的方式 父组件传递给子组件：通过props属性； 子组件传递给父组件：通过$emit触发事件； Props | Vue.js https://v3.cn.vuejs.org/guide/component-props.html#prop-%E7%B1%BB%E5%9E%8B 什么是P
阅读全文
摘要：浏览器原生支持模块化 #index.html <script src="./src/main.js" type="module"></script> #main.js 可以使用 import导入 import {sum} from './js/math.js' 但是如果我们不借助于其他工具，直接使用
阅读全文
摘要：Vue CLI 安装和使用 安装Vue CLI（目前最新的版本是v4.5.13） 我们是进行全局安装，这样在任何时候都可以通过vue的命令来创建项目； npm install @vue/cli -g 升级Vue CLI： 如果是比较旧的版本，可以通过下面的命令来升级 npm update @vue/
阅读全文
