vue
关注
分享
扫一扫
小强有个dream
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue3: setup语法糖
官网链接成员setup中定义的变量会默认导出使用propsconst props = defineProps<{msg: string}>()<template> <h1 ref="title"> {{ props.msg }} </h1></template>使用事件给props设置默认值const props = withDefaults(defineProps<Props>(原创 2022-06-02 21:14:23 · 321 阅读 · 0 评论 -
vue： vue2.0 + ts + vuex 项目
vue对ts的支持： 链接原创 2022-05-22 10:49:09 · 2261 阅读 · 0 评论 -
js/vue：video 视频播放器
一： 原生方式实现视频播放// 设置视频播放速率（倍速播放）var video = document.getElementById(‘video’)video.playbackRate = this.value// 设置视频亮度-webkit-filter: brightness(0.2) 取值范围0-1（数字为0时为正常样式，为1时表示的是100%亮度，无法看到图片）videojs 也是用video标签播放的，用video标签就会调用系统自带的播放器。移动端浏览器劫持了你自己的播放器原创 2022-04-13 20:12:26 · 1095 阅读 · 0 评论 -
vite:见解
在开发环境下，vite 相比vue-cli create-react-cli 这些集成webpack的工具相比，原样文件加载 就是不打包vite的项目 直接启动服务，加载index.html然后按模块化规范加载main.js然后依次加载模块2. vite更新代码vite启动的服务，采用websocket监听文件的改变，文件一改变通知浏览器去更新对应的文件支持sass?支持ts?打包支持es6语法// 这个插件内部使用了babel之类的插件来处理兼容3. 支持三方插件据.原创 2022-04-01 21:55:16 · 747 阅读 · 0 评论 -
npm: vue实现原理（最小版本的vue）
vue模板用法<!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"> <title>Do原创 2022-03-27 18:18:10 · 1200 阅读 · 0 评论 -
vue: vueRouter实现原理
vuerouter的使用根据类图进行分析options记录构造函数传递的对象 routersdata中有个属性current，用来记录当前路由地址（data是响应式的）routeMap 记录组件和路由的关系install静态方法constructor用来初始化属性initEvent用来注册popState事件，监听浏览器地址的变化createRouteMap 把构造函数中的路由规则以键值对存储在routerMap对象中initComponents用来创建 router-link和r原创 2022-03-19 20:51:42 · 1132 阅读 · 0 评论 -
vue: /deep/ ＞＞＞ ::v-deep 深度选择器干了什么
scoped本质上是给当前页面所有元素添加一个唯一的属性（类似data-v-），然后利用这个属性作为属性选择器设置样式达到模块化的目的（这里的属性值是vue-template-complier编译时动态添加的，具体看下源码）；/deep/为了解决scoped引发的父组件修改子组件内部样式问题出现的；>如.parent { /deep/ .child { font-size: 20px } }最终生成为 .parent[data-v-5ad691e8] .child { font-s.原创 2021-09-20 23:50:23 · 342 阅读 · 0 评论 -
vue： ast语法树
@babel/parser Code转AST@babel/traverse 遍历AST@babel/types 操作AST@bable/generator AST转Code原创 2021-07-03 12:02:58 · 524 阅读 · 0 评论 -
vue源码：钩子hook
vue callhook的源码const hookRE = /^hook:/ // 以hook:开头Vue.prototype.KaTeX parse error: Expected '}', got 'EOF' at end of input: …++) { vm.on(event[i], fn)}} else {(vm._events[event] || (vm._events[event] = [])).push(fn)// optimize hook:event cost b原创 2021-05-26 09:56:45 · 401 阅读 · 0 评论 -
vue: vue源码，diff算法
深度优先遍历算法网址1网址2vue的diff算法虚拟Dom: 对象的形式模拟树形结构，是根据真实的dom生成的。当数据发生改变，会生成一个新的虚拟dom。开始比较两个虚拟dom。首先对同层级进行比较，如果有子级节点再递归比较。比较如下： 新老节点一样，直接返回；老节点有子节点，新节点没有：删除老节点的子节点；老节点没有子节点，新节点有子节点：新节点的子节点直接append到老节点；都只有文本节点：直接用新节点的文本节点替换老的文本节点；都有子节点：updateChildren原创 2021-05-25 16:33:21 · 112 阅读 · 0 评论 -
vue底层原理： v-if
这是一个递归遍历dom的属性（v-if）根据值进行删除元素，连接vue中vue实现原理：Vue进行了如下转化template —> ast语法树 —> render函数，最后根据生成的render函数来生成相应的DOM，这里就不拓展讲了。在生成ast和render函数的时候，Vue对v-if这一类指令进行了解析。参考连接...原创 2021-05-19 18:22:45 · 2002 阅读 · 0 评论 -
vue报错： Cannot read property ‘_withTask‘ of undefined
切换路由页面时 ，控制台报错：Cannot read property ‘_withTask’ of undefined网页一直在加载导致，窗口卡速点不了线上环境和预发环境没出现问题，对比了test环境代码和本地代码一致，test没毛病，本地就不行，靠。原来是未定有函数原因：template中的出现的绑定事件在methods中没有定义...原创 2021-05-13 10:29:00 · 576 阅读 · 0 评论 -
vue：多个axios实例
参考链接 https://www.cnblogs.com/cl1998/p/13117956.html#/c/subject/p/13117956.html这样就可以使用当前实例了 this.$axios('Api/Manage/adminLogin',{ mobile: '', password: '' }).then(res=>{ console.log(res) })...原创 2020-11-12 11:19:28 · 2387 阅读 · 1 评论 -
vue: 动态路由
参考文章：链接 https://www.cnblogs.com/jj123/p/12784100.html需求：pc后台项目-根据权限动态生成路由1.generateRoutes.js导出的实例对象，解构后作为new Vuex.Store()的参数对象2.后台接口返回的路由表数组 eg.const list = [ { "id": 125, "authName": "用户管理", "path": "", "children": [ { "id":原创 2020-09-20 15:29:09 · 141 阅读 · 0 评论 -
vue: vue3和vue2用法区别
diff算法优化：在一个组件下，对有插值表达式和动态属性的dom做了标记。虚拟Dom的diff比较时就不用比较所有页面的所有的dom元素差异tree shaking (去掉了未使用的api):不适用不会引入v-model,transition相关代码1）Composition API90%的vue2代码在vue3中不受影响// 能用compositioin抽逻辑就不要用mixin2）Fragment碎片不再限制单文件组件只能有一个根节点3)teleport4)suspese5)支.原创 2020-09-20 01:43:13 · 1501 阅读 · 0 评论 -
vue： vant组件适配
按照官网要求按需导入组件（此处看我之前的文章或官网）根目录下postcss.config.jsmodule.exports = { plugins: { 'autoprefixer': { browsers: ['Android >= 4.0', 'iOS >= 7'] }, 'postcss-pxtorem': { rootValue: 37.5, //这是基准值，在375px的屏幕变大rem的值会变大，小于这个大小元素的.原创 2020-09-09 11:07:57 · 1237 阅读 · 1 评论 -
vue:点击a链接跳转一个嵌套iframe的页面
有这么一个需求：后台给的html字符串，v-html渲染出来了（左1），用户点击链接后放在iframe嵌套下的新页面思路1：查找所有的a标签添加οnclick="consoel.log(1234567);return false;"或@click.prevent=“consoel.log(1234567);return false;” let html = this.$route.query.content // 1.查找所有a链接的位置 var index =.原创 2020-08-14 12:25:53 · 3275 阅读 · 0 评论 -
vue:单元测试 jest
vue add @vue/cli-plugin-unit-jest // vue项目添加单元测试测试文件1 tests/unit/example.spec.jsimport { shallowMount } from '@vue/test-utils'// 引用测试用例import ZPage from '@/components/ZPage.vue'// 一般一个组件写一个测试套件（即一个.spec.js就一个套件）let alet b// 钩子函数 beforeAll可以放.原创 2020-08-09 20:19:33 · 703 阅读 · 0 评论 -
vue:使用toast
配置axios.js使用toast时需要单独引入Toast，只能清除当前文件的的toast而无法清除.vue页面使用的$toast（因为是vue实例）//1. 挂在vue实例的prototype上import { Toast } from 'mint-ui'Vue.prototype.$toast = Toast//home.vue等vue文件使用 this.$toast({ message: '1234', position: 'midlle', .原创 2020-08-01 00:04:47 · 1632 阅读 · 0 评论 -
vue报错： Uncaught TypeError: Cannot assign to read only property ‘exports‘ of object ‘#＜Object＞‘
vue会经过webpack编译处理，但是webpack不允许你同时使用(import export)和(require module.exports)原创 2020-07-30 09:24:02 · 183 阅读 · 0 评论 -
uniapp开发:选择项目类型和组件库
uniapp组件库全端兼容ui库 =》 colorUi微信，h5，app => vant webappvue移动端组件库=》 vant, mintui, vux用uniapp其实和用vue开发没什么区别，vue能用的插件，uniapp也能用。一般的网页能做的uniapp都能做，uniapp不能做的，一般的网页也做不了。区别在于unapp不支持dom操作（H5端有dom对象）、不支持过滤器，这和微信小程序是一致的。如果只开发h5用不用uni-app没什么区别吧地址：原创 2020-07-28 17:13:09 · 1156 阅读 · 0 评论 -
vue：实现连接超时和连接异常的界面提醒
发送请求的文件内// response 拦截器// 导入vue实例import vueExample from '../main.js'service.interceptors.response.use( response => { const code = response.status if (code < 200 || code > 300) { console.log(response.message) return Pro原创 2020-05-29 15:12:45 · 2381 阅读 · 0 评论 -
移除vue项目线上环境的console.log
1)下载插件：npm install babel-plugin-transform-remove-console --save-dev2)项目根目录新建babel.config.js// 项目发布阶段需要用到的babel插件const prodPlugins = []if (process.env.NODE_ENV === 'production') { prodPlugins.push('transform-remove-console')}module.exports = { plu原创 2020-05-19 11:08:07 · 851 阅读 · 0 评论 -
后台接收不到：axios传递的数据（post）
如果请求头是这种类型：Content-Type: application/x-www-form-urlencoded强烈推荐这篇文章：链接Qs下载不了可以用qs模块前端：import axios from 'axios'import qs from 'qs'axios.post('/f/equipment/securityEquipment/dutyEquipmentList;JSESSIONID=',qs.stringify(params),{ headers:{'Content原创 2020-05-10 20:47:16 · 691 阅读 · 0 评论 -
vue: mockjs模拟数据
vue-cli3.0下根目录创建vue.config.jsmodule.exports = { // mock模拟数据 devServer: { before: require('./mock/index.js') }}项目目录-mock-index.js (模拟数据)var Mock = require('mockjs')var data = [{ id: Mock.mock('@id'), text: 'ִ执勤点一'}, { id: M原创 2020-05-10 11:20:08 · 378 阅读 · 0 评论 -
swiper:vue中使用swiper,图片不回弹
1.看图之前是这个结构 <div class="banner swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="(item,index) in bannerList" :key="index"> ...原创 2020-01-18 15:42:32 · 1054 阅读 · 1 评论 -
vue: 新修改element-ui的样式
element-ui样式是很难修改的。修改表格滚动条样式 <el-table :data="tableData" height="250" border class="your-table" style="width: 100%"> <el-table-column prop="date" lab...原创 2020-01-10 13:44:20 · 619 阅读 · 0 评论 -
vue: 实现移动端tabbar组件
步骤看代码思路描述1.tabbar单文件组件2 在根组件中注册引入使用3.1 watch监听$route，切换路由控制显示隐藏3.2 mounted中，页面刷新时控制显示隐藏一： 组件<template > <!-- 一：写好tabar组件单文件组件--> <div class="tabbar">...原创 2019-12-27 11:34:21 · 1133 阅读 · 0 评论 -
vue报错: vuex 访问报错“TypeError: Cannot read property ‘setAll‘ of undefined“
//访问不到数据还报错了解决方式：this.$store.commit(‘setAll’,‘参数’)才能访问mutations中定义的方法，直接访问不行原创 2019-12-26 16:46:39 · 1753 阅读 · 0 评论 -
vue: vue : 无法加载文件 C:\Users\goodDream\AppData\Roaming\npm\vue.ps1，因为在此系统上禁止运行脚本
powershell没有权限管理员打开powershell,set-ExecutionPolicy RemoteSigned输入Y 或者 A原创 2019-12-21 18:11:56 · 698 阅读 · 0 评论 -
vue: 路由跳转并传递参数
query方式 (地址栏并不会看到参数，推荐)// 路由配置文件 { // query方式 path: '/certificateInfo', name: 'certificateInfo', component: CertificateInfo } // A页面-要跳转的页面 this.$router.push({ ...原创 2019-12-17 16:39:32 · 189 阅读 · 0 评论 -
vue：注册并使用单文件组件
先写好子组件页面父组件中引入，注册并使用import MHeader from '@/components/MHeader.vue' components: { 'MHeader': MHeader }, <MHeader />原创 2019-12-16 17:29:45 · 354 阅读 · 0 评论 -
vue报错: npm run serve报错 ‘vue-cli-service‘ 不是内部或外部命令，也不是可运行的程序
原因：该目录下node_modules > .bin > 没有vue-cli-service文件这个时候运行npm run serve 或 npm run dev就会报错解决方法（重新安装）：npm view @vue/cli versions // 选择一个比较稳定的版本下载npm i -g @vue/[email protected] // 比如这个............原创 2019-12-16 11:25:58 · 27390 阅读 · 1 评论 -
vue:为项目引入封装的发请求
文件层级config.jsapi(文件夹) > config.jsurls.jsapi(文件夹) > urls.jshttp.jsapi(文件夹) > http.jshttp-ie.jsapi(文件夹) > http-ie.jsmixin.jstools(文件夹) > mixin.jsconfig....原创 2019-12-14 23:48:56 · 464 阅读 · 0 评论 -
vue:为项目引入基础的样式文件
一般在vue的app.vue根组件中引入基础样式，而不是直接写样式vue-cli3.X方式// 这里是stylus的引入的方式原创 2019-12-13 10:33:13 · 343 阅读 · 0 评论 -
js / vue：时间戳 倒计时 和 格式化时间 及时间戳转换
// 获取当前时间 格式:yyyy-MM-dd HH:MM:SS function getCurrentTime(timeStamp) { /** * 补零 */ function zeroFill(i) { if (i >= 0 && i <= 9) { return "0" + i; } e...原创 2019-11-19 21:59:48 · 2689 阅读 · 0 评论 -
Vue和JQuery: 单文件/图片视频音频上传
三步逻辑：//手动或是自动触发input:file的上传// 用户选中图片或是文件后，会自动触发change事件// this.files[0]拿到选中的文件，URL.createObjectURL()可以创造出一个url <link rel="stylesheet" href="./font/iconfont.css" /> <style> ...原创 2019-09-26 19:44:06 · 543 阅读 · 0 评论 -
vue / js: 格式化
在settings.json"vetur.format.defaultFormatter.js": "vscode-typescript", "javascript.format.insertSpaceBeforeFunctionParenthesis": true, // 这两行，添加函数后的空格2. 项目根目录，配置文件prettier.config.jsmodule.exports...原创 2019-11-28 11:13:00 · 1462 阅读 · 0 评论 -
vue:项目优化
一：CDN引入1.引入vue-router和axios的cdn,报错// 这是问题的原因 转载自：链接//webpack.config.jsmodule.exports = { //... externals: { jquery: 'jQuery' //将需要忽略打包的都写在这个里面，但前提是index.html文件里面必须script引入 }};/...原创 2019-11-04 11:17:40 · 171 阅读 · 0 评论 -
vue报错:执行vue ui时报错
// 在vscode及powershell执行都报了这个错误转发自 链接简述：以管理员打开powershell,输入下面内容回车后输入Y或Aset-ExecutionPolicy RemoteSigned原创 2019-11-03 17:54:50 · 4759 阅读 · 0 评论