随笔分类 - Vue
vue 深度选择器前世今生
摘要:node-sass 不支持 >>> 语法,推荐改用 /deep/。后来,node-sass 被 deprecated,推荐使用 dart-sass。但 dart-sass 又和 /deep/ 有冲突。所以,如果你使用 vue2 同时又使用 dart-sass,只剩一种选择 ::v-deep。 <st
vue3 component is 无效
摘要:<component :is="isGroup ? 'TransitionGroup' : 'Transition'"></component> 如果 :is 的值为字符串而不是导入的组件时,需要手动注册组件。 <script> import { Transition, TransitionGrou
节日礼物待签收,开箱国庆头像
摘要:🎁 点击这里 获取国庆头像。通过 Vue3 + Vant(组件库) + Vite 构建。 应用的流程 在做之前,先思考它的流程: 上传头像 选择头像模板 保存新头像 进入应用放出节日祝福与简单的使用介绍。 开始仅显示一个上传头像按钮。这样做的好处是,直接固定第一步操作。如果将模板和保存按钮显示出来
Vue3 style CSS 变量注入
摘要:摘要 在单文件组件样式中支持使用组件状态驱动的 CSS 变量( CSS 自定义属性)。 基础示例 <template> <div class="text">hello</div> </template> <script> export default { data() { return { colo
vue3 script setup 定稿
摘要:vue script setup 已经官宣定稿。本文主要翻译了来自 0040-script-setup 的内容。 摘要 在单文件组件(SFC)中引入一个新的 <script> 类型 setup。它向模板公开了所有的顶层绑定。 基础示例 <script setup> //imported compon
vue cli mockjs
摘要:npm i -D mockjs 根目录新建 mock 文件夹 mock/utils.js const fs = require('fs'); const path = require('path'); module.exports = { getJsonFile:function (filePath
vue fontawesome
摘要:使用步骤 1.安装 npm i --save @fortawesome/fontawesome-svg-core Using Vue 2.x $ npm i --save @fortawesome/vue-fontawesome@latest Using Vue 3.x npm i --save @
vue cli rem
摘要:使用步骤 npm i amfe-flexible postcss-px2rem -D /vue.config.js const px2rem = require('postcss-px2rem') module.exports = { // ... css: { loaderOptions: { p
Vue3 Teleport
摘要:为什么需要 Teleport? 以 Dialog 组件为例,通常需要在一个组件中引入 Dialog 组件。然而,有时一部分逻辑属于 Dialog 所在的组件中,从技术角度来看,最好将这一部分移动到根节点之外的位置。 另外一个问题, 当 Dialog 组件使用 position: absolute 相
Vue 3 Deep Dive with Evan You
摘要:什么是 DOM? 如果我们把这个 HTML 加载到浏览器中,浏览器创建这些节点,用来显示网页。所以这个HTML映射到一系列DOM节点,然后我们可以使用JavaScript进行操作。例如: let item = document.getElementByTagName('h1')[0] item.te
⚡ vue3 全家桶体验
摘要:前置 从创建一个简单浏览器导航首页项目展开,该篇随笔包含以下内容的简单上手: vite vue3 vuex4 vue-router next 预览效果有助于理清这些内容,限于篇幅,不容易展开叙述。由于项目逻辑简单,只使用了少量 API,我只是写这个小项目过把手瘾,所以对应标题 上手。如果您只是想学习
写一个扩展性较强的搜索主页
摘要:前置 点击按钮切换搜索引擎 搜索框跟随切换改变样式 使用 vue 最快了 template 为了方便扩展,使用 v-for 循环渲染出按钮,绑定切换搜索引擎的 method , 传入不同名称以区别搜索引擎。按钮的样式也动态绑定。 输入框动态绑定样式,在点击按钮切换搜索引擎时,搜索框绑定的样式对应的
[译] 制作 Vue 3 的过程
摘要:原文链接: https://increment.com/frontend/making-vue-3 在过去的一年里,Vue 团队一直在研究 Vue.js 的下一个主要版本,我们希望在 2020 年上半年发布。这项工作在撰写本文时还在进行中),关于 Vue 新的主要版本的想法是在 2018 年底形成的
vue 多种方法实现组件间传值
摘要:前置 大小 vue 项目都离不开组件通讯, 在这里总结一下vue组件通讯方式并列出, 下面是一些简单的例子。如有错误,欢迎指正。 温馨提示: 下文没有列出 vuex, vuex 也是重要的组件通讯方式。 props 最常用的组件通讯方式 值可以是数组或对象,使用对象时可以配置高级选项,如类型检测、自
vue3 createComponent
摘要:这个函数不是必须的,除非你想要完美结合 TypeScript 提供的类型推断来进行项目的开发。 这个函数仅仅提供了类型推断,方便在结合 TypeScript 书写代码时,能为 setup() 中的 props 提供完整的类型推断。 import { createComponent } from 'v
vue3 template refs dom的引用、组件的引用、获取子组件的值
摘要:介绍 通过 ref() 还可以引用页面上的元素或组件。 DOM 的引用 <template> <div> <h3 ref="h3Ref">TemplateRefOne</h3> </div> </template> <script> import { ref, onMounted } from '@
vue3 父组件给子组件传值 provide & inject
摘要:介绍 和 可以实现嵌套组件之间的数据传递。 这两个函数只能在 函数中使用。 父级组件中使用 函数向下传递数据。 子级组件中使用 获取上层传递过来的数据。 不限层级 下面来看一个简单的例子。 父组件 子组件 补充 父组件可以通过 创建 响应式数据 通过 共享给子组件