vue专栏
关注
分享
扫一扫
逍遥的码农
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue-cli-service的使用
ue-cli-service build 会在dist/ 目录下面产生一个可用于生产环境的包，带有 JS/CSS/HTML 的压缩，和为更好地缓存而做的 vendor chunk splitting。vue-cli-service serve 会启动一个开发服务器（基于webpack-dev-server）并且附带了开箱即用的模块热重载（Hot-Module-Replacement）。除了通过命令行，可以使用vue.config.js中devServer字段配置开发服务器的参数；原创 2023-04-04 10:27:36 · 1148 阅读 · 0 评论 -
微信公众号H5音频视频自动播放(安卓，苹果)
微信公众号H5音视频自动播放，不需要用户跟页面交互原创 2022-07-08 10:36:35 · 8714 阅读 · 9 评论 -
vue引入个性化字体
一、首先在字体网选择下载自己喜欢的字体字体网链接二、在vue静态资源文件夹assets目录下创建一个font文件夹，把下载的ttf文件放在font文件夹里面三、在src目录下创建一个style文件夹，创建一个全局css变量文件（vue引用的less后缀为less，引用的是scss后缀为sass）四、在文件里写入代码（font-family为定义的名字，src为ttf文件路径）@font-face { font-family: "迷你简胖头鱼字体"; src: url("../asset原创 2021-12-21 10:19:10 · 2541 阅读 · 0 评论 -
原生js实现导航栏拖拽滑动(适用于pc端和手机端)
先贴一张动图看看效果吧下面把代码贴上注释都在代码边上<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale原创 2021-12-03 09:32:10 · 1535 阅读 · 0 评论 -
转义特殊字符防止xss攻击
function symbolEscape(text){ return text.replace(/[<>"&]/g, function(match, pos, originalText){ switch(match){ case "<": return "<"; case ">":return ">"; ..原创 2021-10-27 13:42:43 · 1546 阅读 · 0 评论 -
Vue3生命周期了解
Vue3生命周期在 setup 中，可以通过 onX 的方式注册 生命周期钩子。1、beforeCreate -> 使用 setup()2、created -> 使用 setup()3、beforeMount -> onBeforeMount4、mounted -> onMounted5、beforeUpdate -> onBeforeUpdate6、updated -> onUpdated7、beforeDestroy -> onBeforeUnm原创 2021-08-24 13:42:09 · 448 阅读 · 0 评论 -
js回调函数(callback)
回调函数，其实简单理解的话就是在一个函数执行完毕后，得到想要的特定数据后在去执行的函数，我门直接看示例 // 2. getdata(check) //运行getdata函数 实参为check函数 // 1. function getdata(callback) { //这边行参为callback回调 名字可以自己随便取 //这里我们假设是从后端获取数据 setTimeout(function () { //假设我们获取到数据i原创 2021-08-02 13:46:17 · 716 阅读 · 0 评论 -
强制Vue重新渲染组件的最佳方式(亲测完美解决问题)
有时候，依赖 Vue 响应方式来更新数据是不够的，相反，我们需要手动重新渲染组件来更新数据。或者，我们可能只想抛开当前的DOM，重新开始。那么，如何让Vue以正确的方式重新呈现组件呢？强制 Vue 重新渲染组件的最佳方法是在组件上设置:key。当我们需要重新渲染组件时，只需更 key 的值，Vue 就会重新渲染组件。这是一个非常简单的解决方案。当然，你可能会对其他方式会更感兴趣：简单粗暴的方式：重新加载整个页面不妥的方式：使用 v-if较好的方法：使用Vue的内置forceUpdat原创 2021-07-20 15:52:43 · 1458 阅读 · 0 评论 -
使用jq让页面滚动到顶部
以下是完整代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit原创 2021-05-25 16:42:52 · 815 阅读 · 1 评论 -
vue中的mixins生命周期比组件中的快！
vue中mixinsmixins.js// mixins.jsexport default { data () { return { name: 'mixins', minixName: 'mixinsObj', flag: false } }, mounted() { console.log('mixinsMounted'); }, meth原创 2021-05-11 14:06:32 · 1428 阅读 · 8 评论 -
vue-cli3中来配置路径别名
vue-cli3配置路径别名在日常开发中， 我们导入文件写的是相对位置， 和绝对位置但是有些人可能知道@/store 是什么意思， 但是自己启动一个自己的vue项目却发现不可以？？！！许多新手 可能不知道 vue.config.js 的vue配置文件，这个文件得自己创建的，创建到vue项目的根目录下面将如下代码复制到 vue.config.js 就可以在页面中 使用 @/api 就等于 绝对路径中的 根目录的/api// vue.config.jsconst path = require('p原创 2021-04-12 16:11:14 · 603 阅读 · 0 评论 -
vant ui 适配移动端rem自动换算
Vant UI 组件库的样式默认使用的单位是 px，若需要使用 rem，则需要使用插件进行进一步的处理插件安装使用 npm 或者 yarn 进行安装yarn add postcss-pxtorem --save-dev// ornpm install postcss-pxtorem --save-devyarn add lib-flexible --save// ornpm install lib-flexible --savePostCSS配置const autoprefixer原创 2020-12-29 20:12:43 · 700 阅读 · 0 评论 -
vue全屏事件（无需安装插件）
template(html)中写 <div class="btn-fullscreen" @click="handleFullScreen"> <el-tooltip effect="dark" :content="fullscreen ? `取消全屏`:`全屏`" placement="bottom"> <i class="el-icon-rank"></i> </el-tooltip></d原创 2020-12-18 10:39:49 · 346 阅读 · 0 评论 -
vue使用vant上传图片到服务器(vue修改头像)
html代码：<!-- vant代码 --><van-uploader :after-read="Uploader" > <img width="37px" :src="data.avatar" alt=""></van-uploader>用到vant的api函数 after-read 文件读取完成后的回调函数methods代码：methods: { // 上传图片 Uploader(e){ console.原创 2020-12-17 19:53:54 · 2711 阅读 · 2 评论 -
vuex刷新后数据不会保存？？解决办法在此
我们在写vue项目的时候，经常要用到vuex作为内存来储存，但是我们存放在vuex中的数据（用户数据，当前页面的数据等等）在刷新后就会丢失，那么如何解决呢？超级简单。1，安装vuex-persistedstatenpm install --save vuex-persistedstate2，修改store//store里导入createPersistedStateimport createPersistedState from 'vuex-persistedstate' const stor原创 2020-11-29 19:35:13 · 1072 阅读 · 0 评论 -
vue移动端绑定click事件失效问题
原因是使用了better-scroll，它会阻止touch事件。所以在配置中需要加上click: true例： this.scroll = new BScroll(this.$refs.search,{click:true})原创 2020-11-26 10:52:16 · 820 阅读 · 0 评论