12 2021 档案
摘要：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/
阅读全文
摘要：启动时如何可以区分不同的配置呢？ 方案一：编写两个不同的配置文件，开发和生成时，分别加载不同的配置文件即可；方式二：使用相同的一个入口配置文件，通过设置参数来区分它们； 入口文件解析 我们之前编写入口文件的规则是这样的：./src/index.js，但是如果我们的配置文件所在的位置变成了 confi
阅读全文
摘要：webpack能解析三种文件路径： 绝对路径 由于已经获得文件的绝对路径，因此不需要再做进一步解析。相对路径 在这种情况下，使用 import 或 require 的资源文件所处的目录，被认为是上下文目录； 在 import/require 中给定的相对路径，会拼接此上下文路径，来生成模块的绝对路径
阅读全文
摘要：搭建本地服务器 目前我们开发的代码，为了运行需要有两个操作： 操作一：npm run build，编译相关的代码； 操作二：通过live server或者直接通过浏览器，打开index.html代码，查看效果；这个过程经常操作会影响我们的开发效率，我们希望可以做到，当文件发生变化时，可以自动的完成
阅读全文
摘要：Vue打包后不同版本解析 vue(.runtime).global(.prod).js： 通过浏览器中的 <script src=“...”> 直接使用； 我们之前通过CDN引入和下载的Vue版本就是这个版本； 会暴露一个全局的Vue来使用；vue(.runtime).esm-browser(.pr
阅读全文
摘要：Babel是一个工具链，主要用于旧浏览器或者环境中将ECMAScript 2015+代码转换为向后兼容版本的JavaScript；包括：语法转换、源代码转换等 babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用 #安装 npm install @
阅读全文
摘要：Loader是用于特定的模块类型进行转换； Plugin可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等； CleanWebpackPlugin 手动删除dist文件夹 #安装 npm install clean-webpack-plugin -D #配置 module.expor
阅读全文
摘要：加载Css css-loader #css-loader的安装 npm install css-loader -D #内联方式 import "css-loader!../css/style.css"; #配置方式 webpack.config.js module: { rules: [ { tes
阅读全文
摘要：安装webpack npm install webpack webpack-cli –g # 全局安装 npm install webpack webpack-cli –D # 局部安装 Webpack的默认打包 在目录下直接执行 webpack 命令，生成一个dist文件夹，里面存放一个main.
阅读全文
