摘要:一、NPM创建项目 1. 使用npm创建项目 在一个空文件夹下,通过终端执行下面的命令,完成后会生成一个package.json的配置文件。 # 项目初始化 npm init # 使用默认设置初始化项目 npm init -y 2. npm init详解 name 项目名称 version 项目
阅读全文
摘要:一、vue2.x的 h 函数(createElement) 使用方法及介绍: h函数第一个是标签名字 或者是组件名字,第二个参数是配置项,第三个参数是 innerText ,不会帮你转换节点,如果需要转换成节点(v-html)请去第二个参数中的 domProps 配置 innerHTML 当第二个参
阅读全文
摘要:一、概述 在了解vue render函数之前, 需要先了解下Vue的整体流程 通过上图, 应该可以理解一个Vue组件是如何运行起来的. 模板(template)通过编译生成AST树 AST树生成Vue的render渲染函数 render渲染函数结合数据生成vNode(Virtual DOM Node
阅读全文
摘要:⏰ 1、查看当前电脑是否安装node node -v 或者查看当前电脑通过brew安装的node路径 ls /usr/local/Cellar/node* ⏰ 2、查看可安装的node brew search node ⏰ 3、安装其他版本node 下载需要安装的node版本 brew instal
阅读全文
摘要:一、起因 🔉: 使用 n 工具切换 nodejs 版本时,会将 nodejs 的可执行文件链接到 /usr/local/bin 目录下,而 brew 安装的 nodejs 可执行文件在 /usr/local/opt/node@xxx/bin 目录下,所以切换版本后,brew 安装的 nodejs
阅读全文
摘要:⏰1. 查看当前node所在位置。如下: which node 结果如下: /usr/local/bin/node ⏰ 2.查看所有node所在位置, 如下: where node 结果如下 /opt/homebrew/bin/node /opt/homebrew/bin/node
阅读全文
摘要:一,async 函数 通过在函数声明前加上async关键字,可以将任何函数转换为返回Promise的异步函数。这意味着你可以使用.then()和.catch()来处理它们的结果。 <script> let result = async function myFn() { return 521 } /
阅读全文
摘要:一、初始化结构搭建 //1.定义 Promise 构造函数 // executor 外界传入的立即执行函数 function Promise(executor) { } //2.添加 then 方法 Promise.prototype.then = function (onResolved, onR
阅读全文
摘要:1、如何改变 promise 的状态 resolve(value): 如果当前是pending就会变成 resolved reject(reason): 如果当前是pending就会变成 rejected 抛出异常:如果当前是pending就会变为rejectd 🌰示例 <script> let
阅读全文
摘要:1. Promise 构造函数:Promise(excutor){ } executor函数:执行器 (resolve, reject) => { }resolve函数:内部定义成功是我们调用的函数 value => { }reject函数: 内部定义失败时我们调用的函数 reason => { }
阅读全文
摘要:一、Promise 产生的原因 在Promise未诞生以前,我们通过回调表达程序异步和管理并发,当然现在一些老的项目为了保证兼容性仍在使用。回调是JavaScript中实现异步最简单的方式,你可以将回调理解为程序的延续,即在当前同步代码执行完毕以后才会在未来某个时间执行。当我们的回调需要用到上一个回
阅读全文
摘要:scoped的由来 css一直有个令人困扰的作用域问题:即使是模块化编程下,在对应的模块的js中import css进来,这个css仍然是全局的。为了避免css样式之间的污染,vue中引入了scoped这个概念。 在vue文件中的style标签上,有一个特殊的属性:scoped。当一个style标签
阅读全文
摘要:export和import是ES6提出的模块化规范。这篇文章主要就是详细介绍export和import的用法。 export 模块是独立的文件,该文件内部的所有的变量外部都无法获取。如果希望获取某个变量,必须通过export输出。 1. 输入变量用法 ⏰ 方法1 export let a = 'zh
阅读全文
摘要:1、defineComponent 是什么? defineComponent 本身的功能很简单,但是最主要的功能是为了 ts 下的类型推到。对于一个 ts 文件,如果我们直接写 export default {} 这个时候,对于编辑器而言,{} 只是一个 Object 的类型,无法有针对性的提示我们
阅读全文
摘要:我们在使用vue3的时候常常使用props给父组件传值,但是在某些场景下,使用props传值会非常复杂,比如我们需要给某个子组件传值,同时这个子组件的某个隔了好几代的后代组件也需要使用到props里的某个属性,如果使用props来传递组件的话,需要按照父子关系一代代地写,这样很麻烦,而且容易传错。这
阅读全文
摘要:在vue2.x的插件那篇文章我们介绍过插件其实就是vue的增强功能。通常来为vue添加全局功能的。在vue3中插件的功能也是一样的,只是它们在定义上有所不同。 插件的作用场景 🐝 通过app.component()和app.directive()注册一到多个全局组件或自定义指令 🐝 通过app.
阅读全文
摘要:很多时候,我们可能会遇到一些需求,需要对某个元素或某类进行特殊的操作,这时候就可以使用自定义指令,自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。 自定义指令 vue3中的自定义指令和vue2中的自定义指令差不多,也有两种定义方式:局部定义和全局定义。在作用上是一样的,只是在具体定义
阅读全文
摘要:watchEffect 🔊 官网的介绍 为了根据响应式状态自动应用和重新应用副作用,我们可以使用watchEffect方法,它立即执行传入的一个函数,同时响应式追踪其依赖,并在其依赖变更时重新运行该函数。也就是说,我们并不需要传入一个特定的依赖源,而且它会立即执行一遍回调函数,如果函数产生了副作用
阅读全文
摘要:<script setup>是Vue3.2正式支持的一个语法糖,在<script setup>中的代码就像是在setup()函数中一样,所有顶级变量、函数、导入的组件都会暴露给模板使用(不用return) Vue3.0中:变量必须return出来才能在template中才能使用Vue3.2后:基于s
阅读全文
摘要:通过vue2, vue3两种形式实现同一个需求,理解vue3的compition api 带来的好处。✨两个独立的功能: 通过点击按钮来控制div的显示和隐藏通过点击按钮控制div内字体颜色的变化 用vue2实现 🌰 option Api 示例 <template> <div> <!-- 功能一模
阅读全文