随笔分类 - Vue
摘要：特点： 快速冷启动 即时的热模块更新 真正的按需编译 Vite，一个基于浏览器原生 ES imports 的开发服务器。利用浏览器去解析 imports，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随起随用。同时不仅有 Vue 文件支持，还搞定了热更新，而且热更新的速度不会随着模块增多而变
阅读全文
摘要：1.css 只在当前组件起作用？ 答： 在 style 标签中写入 scoped 即可 例如：<style scoped></style> 2.v-if 和 v-show 区别？ 答：v-if 按照条件是否渲染，v-show 是 display 的 block 或 none； v-if 操作的是元素
阅读全文
摘要：全局 API 修改 Global API Change Vue2 的全局配置 import Vue from 'vue' import App from './App.vue' Vue.config.ignoredElements = [/^app-/] Vue.use(/* ... */) Vue
阅读全文
摘要：Suspense - 异步请求好帮手第二部分 使用 async await 改造一下异步请求, 新建一个 DogShow.vue 组件 <template> <img :src="result && result.message"> </template> <script lang="ts"> im
阅读全文
摘要：Suspense - 异步请求好帮手第一部分 定义一个异步组件，在 setup 返回一个 Promise，AsyncShow.vue <template> <h1>{{result}}</h1> </template> <script lang="ts"> import { defineCompon
阅读全文
摘要：Teleport - 瞬间移动 第二部分 Modal 组件 <template> <teleport to="#modal"> <div id="center" v-if="isOpen"> <h2><slot>this is a modal</slot></h2> <button @click="
阅读全文
摘要：Teleport - 瞬间移动 第一部分 Teleport 文档地址 <template> // vue3 新添加了一个默认的组件就叫 Teleport，我们可以拿过来直接使用，它上面有一个 to 的属性，它接受一个css query selector 作为参数，这就是代表要把这个组件渲染到哪个 d
阅读全文
摘要：使用 defineComponent 包裹组件 defineComponent 文档地址
阅读全文
摘要：模块化结合typescript - 泛型改造 // 为函数添加泛型 function useURLLoader<T>(url: string) { const result = ref<T | null>(null) // 在应用中的使用，可以定义不同的数据类型 interface DogResul
阅读全文
摘要：模块化难度上升 - useURLLoader axios 文档地址 // 安装 axios 注意它是自带 type 文件的，所以我们不需要给它另外安装 typescript 的定义文件 npm install axios --save import { ref } from 'vue' import
阅读全文
摘要：模块化开发 第一部分 鼠标追踪器 // 在单组件内添加对应逻辑 const x = ref(0) const y = ref(0) const updateMouse = (e: MouseEvent) => { x.value = e.pageX y.value = e.pageY } onMou
阅读全文
摘要：侦测变化 - watch Watch 文档地址 // watch 简单应用 watch(data, () => { document.title = 'updated ' + data.count }) // watch 的两个参数，代表新的值和旧的值 watch(refData.count, (n
阅读全文
摘要：Vue3 生命周期 生命周期 在 setup 中使用的 hook 名称和原来生命周期的对应关系 beforeCreate → 不需要 created → 不需要 beforeMount → onBeforeMount mounted → onMounted beforeUpdate → onBefo
阅读全文
摘要：Reactive 函数 Reactive 函数 import { ref, computed, reactive, toRefs } from 'vue' interface DataProps { count: number; double: number; increase: () => voi
阅读全文
摘要：Ref 语法 setup 方法 ref 函数 <template> <h1>{{count}}</h1> <h1>{{double}}</h1> <button @click="increase">+1</button> </template> import { ref } from "vue" s
阅读全文
摘要：项目结构和插件 Eslint 插件 如果 eslint 不生效，可以在根目录创建 .vscode 文件夹，然后在文件夹中创建 settings.json 然后输入 { "eslint.validate": [ "typescript" ] } Vetur 插件
阅读全文
摘要：配置 vue3 开发环境 Vue cli // 安装或者升级 npm install -g @vue/cli # OR yarn global add @vue/cli // 保证 vue cli 版本在 4.5.0 以上 vue --version // 创建项目 vue create my-pr
阅读全文
浙公网安备 33010602011771号