前端
文章平均质量分 67
中二Devil
这个作者很懒,什么都没留下…
展开
-
【vue-cli3】各版本 sass-loader 配置全局变量
V8 以下版本找到vue.config.js文件,如果没有的话,则自己在根目录新建一个即可在文件内编写如下代码:module.exports = { css: { loaderOptions: { sass: { data: `@import "@/styles/variable.scss";` } } }}V8 以上 V10 以下版本找到vue.config.js文件,如果没有的话,则自己在根目录新建一个即可在文件内编写原创 2021-07-19 08:45:53 · 992 阅读 · 0 评论 -
CSS 引入字体
文章目录涉及知识@font-face特点用法属性解析font-family用法简单应用更多应用网络/本地引入本地引入网络引入引入其他格式字体引入系列字体涉及知识@font-face@font-face 定义一个用于文本显示的自定义字体。详细内容可以参考 MDN文档 。特点可以自定义字体名称和与名称对应的字体文件可以消除用户对电脑字体的依赖可以用于字体图标的引入用法@font-face { font-family: "myFont"; src: url("/fonts/OpenS原创 2021-07-18 21:24:27 · 10241 阅读 · 0 评论 -
【nvue】分段滚动长列表相关问题
文章目录下拉刷新触底加载分段滚动长列表页面结构首先参考文档为uni-app官方文档和weex官方文档。吐槽一下,可能是因为有 weex 官方文档的存在,uni-app 在 nvue 这块有些文档写的很简洁 =。=nvue 是 uni-app 基于 weex 改进的原生渲染引擎,全称为 native vue,简称 nvue。在学习伊始我忽视了 nvue 的重要性,初次运行大量的爆红让我退缩了(没有认真读文档T T),导致后期重构代码。重点来了,nvue 有哪些是让我认为是很重要的功能呢?如下:原创 2021-05-16 11:55:38 · 1261 阅读 · 0 评论 -
【vue】列表渲染实战心得及方案推荐
渲染在做列表数据渲染的时候需要先构思好合适的数据结构,合适的数据结构能够方便页面的构建、功能实现、后期维护。我列举了下面几种列表渲染的数据结构:注意:数据列表里的每一项数据都推荐有id,在vue中的列表渲染中key值绑定为数据id,这样可以方便之后的数据更新。Vue官方文档数组形式如果是简短的数据列表,没有复杂的操作(增删改),没有下拉刷新和触底加载、分页查询(数据分页查询),那么推荐直接使用数组形式:dataList: [ { id: 0, name:原创 2021-04-30 20:28:12 · 243 阅读 · 1 评论 -
【Vue】事件修饰符
Vue 事件修饰符Vue 事件修饰符前言事件修饰符们stoppreventcaptureselfoncepassive顺序绑定空函数前言事件修饰符是比 event.preventDefault() 或 event.stopPropagation() 更“好”的写法,事件修饰符能够更轻松的实现前面两种方法的功能。事件修饰符能够让我们只需考虑纯粹的数据逻辑,而不是去处理 DOM 事件细节。事件修饰符们stop<!-- 阻止单击事件继续传播 -->&l原创 2021-04-18 14:07:39 · 97 阅读 · 0 评论 -
Vue watch() 的用法和 nextTick的用法
Vue watch的深度监听watch监听有两种方式:普通监听、深度监听。他们的区别是:普通监听只能监听变量值的变化(如Boolean、Number、String等),不能监听数组和变量属性的改变。写法上的区别: watch:{ // 普通的watch监听 a(val, oldVal){ console.log("a: "+val, oldVal); }, // 深度监听,可监听到对象、数组的变化 b:{原创 2021-04-11 11:48:55 · 1233 阅读 · 0 评论 -
uni-app(app端)元素样式问题
前言uni-app不支持使用js控制元素样式,仅支持获取样式。解决方法动态绑定class向目标元素动态绑定class,然后给该class添加css样式。如html部分:<userInfo :class="{'show': scrollSwitch}"></userInfo>动态绑定style向该元素直接绑定样式,此方法好处是可以使用变量。如html部分:<view :style="{ 'width': lW + 'px',原创 2021-03-28 14:43:09 · 2457 阅读 · 0 评论 -
前端优化 - externals 实现运行时加载依赖
webpack(vue-cli 自带) 中的 externals 配置选项提供了从输出的 bundle 中排除依赖的方法。防止将某些(自己配置)依赖打包,而是在项目运行时(runtime)从外部加载这些依赖。最直观的:减小 vue 项目 build 后的体积。配置 index.html配置项目中的 public/index.html 文件,在其中的 head 标签中添加如下:<!-- 使用CDN的CSS文件 --><% for (var i in htmlWebpackPlu原创 2021-01-23 21:39:31 · 933 阅读 · 1 评论 -
Ant-Design-Vue 自定义上传和图片预览功能
前端页面代码部分<template> <a-upload list-type="picture-card" :customRequest="imgAdd" :remove="imgDel" :file-list="fileList" @preview="handlePreview" @change="handleChange"> <div v-if="fileList.length < 9">原创 2020-11-03 21:15:26 · 10579 阅读 · 3 评论 -
vue中assets与static文件夹的区别
static该目录下的资源不会被 webpack 处理,它们会被直接复制到最终的打包目录下(默认地址是 dist/static),所以引用时需要使用绝对路径。这是通过在 config.js 文件中的 build.assetsPublicPath 和 build.assetsSubDirectory 链接来确定的。该目录下文件的绝对路径写法:/static/[filename]assets该目录下的文件会被 webpack 打包,引用时需要使用相对路径或者模块路径。动态引用路径时写法:requir原创 2020-10-31 15:58:04 · 686 阅读 · 0 评论 -
阿里图标库iconfont的使用(font-cclass方式、symbol方式、动态创建方法)
iconfont的使用font-class引用特点兼容性良好,支持ie8+,及所有现代浏览器。使用class来定义图标,替换图标时,只需要修改class里面的unicode引用。本质上是使用字体,所以多色图标不支持。使用方法网络引用第一步:拷贝项目下面生成的fontclass代码://at.alicdn.com/t/font_8d5l8fzk5b87iudi.css第二步:挑选相应图标并获取类名,应用于页面:<i class="iconfont icon-xxx原创 2020-10-31 15:41:29 · 2125 阅读 · 0 评论