vue.js
文章平均质量分 67
JovanDong
淡中安生 静中生长
展开
-
企业项目中md-loader项目组件文档实现
企业项目中md-loader项目组件文档实现原创 2023-08-02 16:50:05 · 213 阅读 · 0 评论 -
jest单元测试的代码覆盖率显示不出来
jest单元测试的代码覆盖率显示不出来原创 2023-08-02 16:03:56 · 590 阅读 · 0 评论 -
vue 路由跳转页面生命周期不执行的问题
vue 路由跳转页面生命周期不执行的问题原创 2023-01-12 11:35:30 · 2782 阅读 · 1 评论 -
手写vue实例中对数组拦截
在上一次的代码中,对于监听vue data 的构造函数里,对于数据的劫持,没有对数组进行特殊处理,那么出现的比较头疼的是,在实际开发中,是不对数组进行索引操作的,但是之前所定义的类是采用递归的思想对数据进行劫持的,如果出现数组数据量比较大,或者出现层级比较深的数组和对象互相包括的时候,这个时候是十分消耗性能的或者直接卡死。所以对于数组我们可以采用继承原有方法的基础上进行方法重写:添加array.js方法进行重写index.html呈现方式index.html对比得原创 2021-07-30 17:06:16 · 294 阅读 · 0 评论 -
手写Vue入口及实例
前言:在开始之前,我首先是问了自己vue 到底是个啥?我的潜意识觉得他就是一个为了更加快速的搭建UI而成的基于javascript上的一个渐进式框架之前觉得其是一个MVVM现在才知道Vue并不是一个纯粹的MVVM框架,只是在发展的长河中,借鉴了MVVM的设计模式1.MVVM什么是MVVM前提是只在数据改变的时候去更新视图层,视图层改变,数据改变,比如说form表单但是在vue中存在一个不符合如此规则的现象,就是$ref这是通过ref句柄对dom直接进行操作的,所以严格意义上来说,他不属于一个原创 2021-07-30 17:04:40 · 283 阅读 · 2 评论 -
知识点四:数据变更的监测方法
具体落实到 JavaScript 的技术上时,开发者会发现 JavaScript 在 ES6 之前并没有提供开箱即用的数据变更监测机制。这就使得开发者/框架只能自己提供一种可靠的机制来监测数据变更。JavaScript 曾有过Object.observe()的提案,并且 Chrome 有实现过该方法。该方法会监测数据的变动,然后触发回调。但因为一些原因,后来该提案被取消。ES6 ProxyES6 提供了Proxy,顾名思义,它可以为任何一个对象设置一个代理对象,并在代理对象中设置一些自定义的逻辑原创 2021-07-30 17:00:52 · 517 阅读 · 0 评论 -
知识点三:JavaScript 中的类和 Mixin
JavaScript 是一种弱类型的语言,且函数是一等公民,因此在代码的组织上非常灵活,有非常多的方法可以实现代码的复用。“函数是一等公民”的意思,即函数和其他的类型一样,并没有什么特殊。因此在 JavaScript 中,函数可以和其他类型的数据一样,被当成值返回、被当成参数传递、被不同的变量赋值/引用等。具体到代码复用方面,在 JavaScript 中被使用最广泛的就是类和 Mixin。JavaScript 中的类类,即 Class,在 Java 等语言中,类是最基本的概念,所有的代码都要原创 2021-07-30 16:58:20 · 237 阅读 · 0 评论 -
知识点二:组件化
在前文介绍 Vue 的时候,提到过一些组件化的好处:能让 web 前端代码也实现“高内聚 低耦合”,使得前端开发的过程变成搭积木的过程。web 领域的前辈们在组件化的概念落实中进行过非常多的尝试。例如 ext.js 之类的框架在组件化方面做得非常深入,但因为种种原因,受众有限,最终没有大规模地流行起来。jQuery 插件体系也算是一个比较庞大的组件化生态系统了,但 jQuery 对插件的支持并没有从组件化方面去着手考虑,只是因为插件需要被复用,因此被强制将所有逻辑打包到同一个插件中,被迫变成了一个“原创 2021-07-30 16:57:18 · 269 阅读 · 0 评论 -
知识点一:数据驱动
前端框架发展到今天,已经出现了很多被广泛认同的理念,也可以叫作它们的特征。在所有的特征中,最具代表性的特征之一即是数据驱动。用户交互的对象——界面不论 web 应用的内部逻辑如何组织,最终与用户产生交互的仍然是界面(User Interface,简称 UI)。对 web 应用来说,界面则主要由 DOM 元素来呈现。因此,归根到底,为了让用户通过 web 应用完成操作,DOM 元素需要根据实际需要来不断变化。例如,用户通过我们的页面来查询当天苹果的价格,页面上有一个“查询”按钮,还有一个显示苹果价原创 2021-07-30 16:55:47 · 2009 阅读 · 0 评论 -
vue源码分析之vue实例
Vue 在使用时都是以实例为单位来初始化运行,从我们最熟悉的根组件(const app = new Vue())到自定义组件,在运行时都是一个个 Vue 实例。因此要理解 Vue,就需要首先理解 Vue 实例。在实际开发过程中,我们可以用 Vue devtools 来查看 Vue 实例的结构:在这个例子中我们定义了一个组件 Hello,然后将它从 app 根组件中进行挂载,最后将 app 挂载到#app 上。在 Vue devtools 中可以清晰地看到两个 Vue 实例,且可以查看实例原创 2021-07-30 16:54:08 · 464 阅读 · 1 评论 -
vue源码分析之入口文件
不要急,我们首先从 core/instance/index.js 的上一层封装看起。Vue 全局 APIVue.js 首先在 core/index.js 中,对 Vue 构造函数做了一层包装,这个包装的作用,主要是提供一些全局 API:而 initGlobalAPI 则为 Vue 添加了如下成员:Vue.config Vue.utilVue.set Vue.deleteVue.nextTick Vue.observableVue.options Vue.useVue.mi原创 2021-07-30 16:52:57 · 354 阅读 · 1 评论 -
网易七鱼客服对接记录以及Vue项目里使用
网易七鱼客服对接记录之前是腾讯客服,因为业务关系,变更到七鱼,所以在这里记录一下1.第一步去http://help.qiyukf.com/官方注册一个账号2第二步找到自己需要的业务,我的是现在系统人工客服官方提供的文档是两种,我的是自定义7鱼客服入口属于异步加载。所以我的代码是第一种。<script> (function (w, d, n, a, j) { w[n] = w[n] || function () { (w[n].a = w[n].a |原创 2020-11-17 10:59:26 · 2546 阅读 · 4 评论 -
windows 运行vue项目 打开地址为 http://0.0.0.0:8080,浏览器显示无法访问,手动修改为 127.0.0.1:8080 可正常打开。
windows运行开发模式命令 npm run dev,启动后默认自动打开浏览器,但是打开地址为 http://0.0.0.0:8080,浏览器显示无法访问,手动修改为 127.0.0.1:8080 可正常打开。每次手动更改不是办法,所以需要调整下代码,能够自动打开后就能正常访问。...原创 2020-09-27 16:38:22 · 16062 阅读 · 1 评论 -
pdf H5 适用于(vue)
之前记录过一篇查看pdf的npm方法,但是在移动端去查看,翻页去加载的时候会出现卡顿,发现pdfh5用户体验会更加友好。推荐一下:import Pdfh5 from "pdfh5";export default {name: 'App', data() { return { pdfh5: null }; },mounted()...原创 2020-04-21 14:03:28 · 2213 阅读 · 0 评论 -
下载图片vue兼容火狐
<template> <div> <el-button @click='download()'>下载</el-button> </div></template><script>export default { name: 'dashboard', data(...原创 2020-03-26 15:03:10 · 500 阅读 · 0 评论 -
vue把localhost改成ip地址无法访问—解决方法
开发Vue spa 商城进行真机测试的时候,原本在/config下的index.js/host'use strict'// Template version: 1.3.1// see http://vuejs-templates.github.io/webpack for documentation.const path = require('path')module.expor...原创 2019-04-02 10:40:44 · 2664 阅读 · 1 评论 -
H5 vdeio 安卓端播放不了 记录
1.ios ,手机端都是可以正常播放2.安卓端和网页无法点击播放1)动态加载视频的时候,需要给video一个ref,通过 this.$refs.videos.src来获取url地址2)或者直接加一个src在video上记录一下 ...原创 2019-01-16 17:45:20 · 690 阅读 · 0 评论 -
vue -- v-cloak解决刷新或者加载出现闪烁(显示变量)
在使用vue绑定数据的时候,渲染页面时会出现变量闪烁,例如 <div class="#app"> <p>{{value.name}}</p></div> 在加载的时候会看到 {{value.name}}在页面出现,过了几秒之后才会渲染数据,在vue中有个指令可以解决这个问题,v-cloak 那么...转载 2018-12-27 17:08:03 · 256 阅读 · 0 评论 -
npm 报错 Module build failed: Error: No PostCSS Config found in:
自己想吧以前的项目复制粘贴到现在的一个项目文件夹里,但是有些文件是会被忽略的,所以,我用vscode打开文件,把一些英超那个文件拖过来了,但是运行的时候还是会报如下的错:npm 报错 Module build failed: Error: No PostCSS Config found in: 你在网上找的解决方案应该有提到webpack版本的问题。不要以为升级webpack版本,有些...原创 2018-08-09 11:46:52 · 3552 阅读 · 0 评论 -
vue 时间轴:效果图
时间轴:效果图代码:<!DOCTYPE HTML><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title&a原创 2018-08-08 14:20:04 · 19509 阅读 · 4 评论 -
如果出现Do not use built-in or reserved HTML elements as component id警告处理方式
这样的报错原因是因为在App.vue父组件里有<component></component>标签,有重名了。所以要把原来的标签名换掉,例:<componentHello>。这里尽量不要设置为component。这样的报错还有一个点就是,在子组件里使用console.log(msg)。在控制台是接收不到父组件的参数的。控制台会显示:undefault...原创 2018-08-07 18:35:08 · 3798 阅读 · 0 评论 -
Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)
前言文章内容覆盖范围,芝麻绿豆的破问题都有,不止于vue;给出的是方案,但不是手把手一字一句的给你说十万个为什么!有三类人不适合此篇文章:"喜欢站在道德制高点的圣母婊" -- 适合去教堂"无理取闹的键盘侠" -- 国际新闻版块欢迎你去"有一定基础但又喜欢逼逼的人"得得得,老子知道你厉害了,你好牛逼,这些问题那么简单,都是小白看的这种傻瓜文,简直浪费老子的时间!对于以上三类人,走吧,这里不是你来装逼...转载 2018-07-09 10:15:27 · 1322 阅读 · 0 评论 -
vue+vue-router+vuex,利用vue-router2.2.0新增特性addRoutes实现路由动态加载,菜单动态加载,运用于后台管理系统,路由数据取自数据库
此案例主要实现了一个功能是,在vue实例首次运行时,在加载了login和404两个路由规则,登录成功后,根据登录用户角色权限获取该角色相应菜单权限,生成新的路由规则添加进去。做过后台管理系统都一定做过这个功能,在对菜单权限进行粗粒度权限控制的时候,通过角色获取菜单后,异步生成菜单,所以一开始拿到需求的时候,我也以为这和平常的没什么不同,不过做起来就发现了很多问题,1.vue-router的实例,在...转载 2018-07-06 10:55:11 · 1016 阅读 · 0 评论 -
1232312
123213原创 2018-06-22 19:48:15 · 6250 阅读 · 1 评论 -
基于element-ui 拖拽组件封装
地址:https://www.npmjs.com/package/medmeeting-componentsPC_Component依赖于element-ui的PC端业务拓展ui组件DocumentationPC-Component APIInstallnpm install medmeeting-components -SQuick Startimport Vue from 'vue'impor...原创 2018-06-22 19:19:11 · 4723 阅读 · 0 评论 -
element -ui 表单重置
1、这是一个vue弹出对话框2、如图,element-ui【如何把已经触发的验证在点关闭按钮的时候取消掉】。1、重置样式的请看采纳的回答2、当提交成功的时候可以执行下面重置的语句,来重置一下。解决了提交成功的时候,再次点击没有重置的问题。this.$refs['Form'].resetFields()...原创 2018-06-22 15:09:22 · 5071 阅读 · 1 评论 -
Vue小记(1)——输入框之文本框的大小改变
官方文档:input Attributes参数说明类型可选值默认值type类型stringtext,textarea 和其他 原生 input 的 type 值textvalue绑定值string / number——maxlength原生属性,最大输入长度number——minlength原生属性,最小输入长度number——placeholder输入框占位文本string——clearable...原创 2018-06-19 13:51:00 · 31970 阅读 · 1 评论 -
vue2.0+Element-ui后台管理系统
希望可以交流,若有不足,请指出,我会加以改进:GitHub地址: https://github.com/yayunD/vue2.0-element-ui-.git如果有用,谢谢Star原创 2018-02-04 16:48:08 · 3503 阅读 · 0 评论 -
vue-cli的webpack模板项目配置文件简析
一、文件结构本文主要分析开发(dev)和构建(build)两个过程涉及到的文件,故下面文件结构仅列出相应的内容。├─build│ ├─build.js│ ├─check-versions.js│ ├─dev-client.js│ ├─dev-server.js│ ├─utils.js│ ├─vue-loader.conf.js│ ├─webpack.bas原创 2017-12-20 14:48:42 · 438 阅读 · 0 评论 -
Vue + TypeScript 新项目起手式
Vue + TypeScript 新项目起手式我知道你们早就想用上 vue + ts 强类型了还有后续vue + typescript 进阶篇安装vue-cli 安装ts依赖 配置webpack 添加tsconfig.json 添加tslint.json 让ts识别.vue 改造.vue文件什么是typescriptTypeScript是Jav...转载 2019-10-15 11:44:15 · 273 阅读 · 0 评论 -
vue-touch在ios上无法上下移动的问题
添加一个:swipe-options="{direction: 'horizontal'}"<template> <div class="experts-wrapp iosScroll"> <div class="experts-content"> <new-gifts></new-gifts原创 2019-03-16 20:22:33 · 1708 阅读 · 2 评论 -
VueJs 监听 window.resize 方法---窗口变化
Vuejs 本身就是一个 MVVM 的框架。但是在监听 window 上的 事件 时,往往会显得 力不从心。比如 这次是 window.resize恩,我做之前也是百度了一下。看到大家伙都为这个问题而发愁。问题: 今天我也 遇到了这样一个问题, 是关于canvas 自适应。 根据窗口的变化去变化 canvas 的宽度备注: 重要的问题说三遍 解决 框架内的bug 先说 框架 版本 版本 版本 (这...转载 2018-07-02 14:02:06 · 977 阅读 · 2 评论