随笔分类 - Vue
notes for Vue
摘要：前面文章有讲到 svg 图标按需加载的优势以及 Vue 如何使用 vue-svg-icon 实现 svg 图标按需载入 今天来学习一下使用 svg-sprite-loader 在 Vue3 项目中实现图标按需加载 ###1、将 email.svg 文件导入项目 <svg width="24" hei
阅读全文
摘要：composition API 中实现一键复制 <input type="text" ... onfocus="this.select()" ref="inputLink" > ... const inputLink = ref({} as unknown); ... const copyLink
阅读全文
摘要：###vue2.x 通用写法: ... this.$message({ type: 'success', message: '删除成功' }) ... ###vue composition API 写法： ... setup(props, ctx) { ... const { $message }
阅读全文
摘要：computed 类型声明需要用泛型 ###错误写法 const a: Xx[] = computed(()=>{}) ###正确写法 const a = computed<Xx[]>(()=>{}) 直接使用时需要加上 .value 例如 a.value HTML 中可直接使用 :xx="a"
阅读全文
摘要：###一、通过 $emit 实现 这里以 mounted 为例，在父组件 Parent 和子组件 Child 中，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现： // Parent.vue <Child @mounted="doSomething"/> // C
阅读全文
摘要：###为什么 Vue 中的 data 必须是个函数？ 官方文档的解释如下： ###为什么会出现上述“影响到其它所有实例”的情况呢？ 其实这个问题取决于 JS 原型链知识，而非 Vue 我们先来看不是函数的情况： function Component() { } Component.prototype
阅读全文
摘要：Vue.js 的源码都在 src 目录下，其目录结构如下： src ├── compiler # 编译相关 ├── core # 核心代码 ├── platforms # 不同平台的支持 ├── server # 服务端渲染 ├── sfc # .vue 文件解析 ├── shared # 共享代码
阅读全文
摘要：###一、什么是 Flow Flow 是 facebook 出品的 JavaScript 静态类型检查工具 Vue.js 的源码利用了 Flow 做了静态类型检查，所以了解 Flow 有助于我们阅读源码 ###二、为什么用 Flow JavaScript 是动态类型语言，它的灵活性有目共睹，但是过于
阅读全文
摘要：###一、JS 实现方式 实现代码： <input type="text" /> <button>一键复制</button> const inputText = document.getElementsByTagName("input")[0]; const copyButton = documen
阅读全文
摘要：一、立即触发回调 watch 最初绑定时是不会执行的，需要等监听的内容改变时才执行监听计算 那我们想要一开始绑定的时候就执行该怎么办呢？ 可以修改一下 watch 写法，如下： watch: { firstName: { handler(newName, oldName) { this.fullNa
阅读全文
摘要：一、svg 在网页中的一般用法 svg 使用 XML 格式定义图像，基本使用如下： <body> <svg width="50" height="50" version="1.1" xmlns="http://www.w3.org/2000/svg"> <rect width="100%" heig
阅读全文
摘要：原来的状态（页面刷新数据会重置） state: { teamA: '主队' }, mutations: { data_teamA(state, x) { state.teamA = x } }, 解决后（页面刷新保留store数据） state: { teamA: JSON.parse(sessio
阅读全文
摘要：HTML 特殊字符写法要用原始码，例如： ‘<’ 原始码为 < ‘>’ 原始码为 > 解决示例： 原错误代码 <div><</div> 修改后代码 <div><</div>
阅读全文
摘要：一、配置与安装步骤： 1、在 src 文件夹中创建 rem.js： 2、将以下代码复制到 rem.js 中： // 基准大小 const baseSize = 16 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 1920 宽的缩放比例，可根据自己需要修
阅读全文
摘要：一、什么是 Mint UI 1、Mint UI 包含丰富的 CSS 和 JS 组件，可以提升移动端开发效率 2、Mint UI 按需加载组件 3、Mint UI 轻量化 二、Mint UI 的安装 1、在项目根目录终端引入： 2、在 main.js 中加入： 同时在 main.js 中通过全局方法
阅读全文
摘要：一、组件的创建 在 components 文件夹下新建一个组件 runoob.vue 二、组件的引用 1、通过 import 导入组件 runoob.vue 2、在 components 下注册该组件 3、在标签中引用 完整示例： 运行结果： 三、组件的自定义属性 1、Prop 传属性值 prop
阅读全文
摘要：一、什么是 Vuex 1、Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 2、Vuex 采用集中式存储和管理应用中所有组件的状态 3、Vuex 应用的核心是 store（仓库）-- 包含 state（组件中的共享状态）和 mutations（改变状态的方法） 二、Vuex 的安装 1
阅读全文
摘要：一个简单的 Vue 计数应用： 该状态自管理应用包含以下几个部分： state：驱动应用的数据源 view：以声明方式将 state 映射到视图 actions：响应在 view 上的用户输入导致的状态变化 state：驱动应用的数据源 view：以声明方式将 state 映射到视图 actions
阅读全文
摘要：Vue.js 路由可以通过不同的 URL 访问不同的内容，实现多视图的单页 Web 应用 1、通过 <router-link> 实现 <router-link> 组件用于设置一个导航链接，切换不同 HTML 内容 使用方法： 简单写法 简单写法 使用 v-bind 的写法 使用 v-bind 的写法
阅读全文
摘要：1、Vue 过渡组件 Vue 在插入、更新或者移除 DOM 时，使用内置的过渡封装组件可以实现过渡效果 语法格式： 2、过渡的类名 在进入/离开的过渡中，会有 6 个 class 切换： v-enter：进入过渡的开始状态 v-enter：进入过渡的开始状态 v-enter-active：进入过渡生
阅读全文
浙公网安备 33010602011771号