Vue
文章平均质量分 72
haoyanyu_
这个作者很懒,什么都没留下…
展开
-
vue-cli3搭建的项目遇到Syntax Error: **/path/:Missing class properties transform.
事情经过是这个样子的:????有一天下午,天气晴朗,肚子有点饿,但是还不到下班时间,没心思敲业务代码了,于是灵机一动,在vue-cli3搭建的项目里动手实现一个event bus类吧。于是一顿猛敲class EventBus { constructor() { this._events = this._events ?? new Map(); } // 触发事件 fire = (event, ...args) => { // ... } // 添加事件监听原创 2020-08-03 17:46:27 · 2486 阅读 · 1 评论 -
vue组件间通信技巧--父子组件,兄弟组件,隔代组件
1. 父子组件方法一:父组件传递参数给子组件通过props如下:// 父组件<template> <div> <hello-world msg="hello world"/> </div></template><script>import HelloWorld from './components/HelloWorld.vue';export default { name: 'App', co原创 2020-07-15 16:08:57 · 757 阅读 · 0 评论 -
Vue—nextTick的实现原理
使用nextTick全局使用:// DOM 还没有更新Vue.nextTick(function () { // DOM 更新了})// 作为一个 Promise 使用Vue.nextTick().then(function () { // DOM 更新了})实例方法:new Vue({ // ... methods: { // ... e...原创 2019-10-09 16:50:10 · 347 阅读 · 0 评论 -
VueRouter源码(三)--RouterView, RouterLink
注册为vue组件RouterView 和RouterLink组件在install方法中注册成了Vue的组件function install (Vue) { ... Vue.component('RouterView', View); Vue.component('RouterLink', Link); ...}RouterViewvue-router.js line4...原创 2019-09-12 13:42:57 · 505 阅读 · 0 评论 -
vue-router源码分析(二)--HTML5History
首先:HTML5History也继承自Historyvar HTML5History = (function(History$$1){...})(History)function getLocation (base) { //处理url var path = decodeURI(window.location.pathname); if (base && pa...原创 2019-09-12 13:43:31 · 249 阅读 · 0 评论 -
vue里使用bpmn绘制流程图(一)
安装1.HTML中使用,通过script标签引入<script src="https://unpkg.com/bpmn-js@5.0.3/dist/bpmn-modeler.development.js"></script>2.npm安装bpmn-jsnpm install bpmn-jsnpm install bpmn-js-properties-panel ...原创 2019-09-10 16:51:26 · 35044 阅读 · 9 评论 -
Vue双向数据绑定的原理源码解析
vue的双向数据绑定通过数据劫持+发布订阅实现的数据劫持的实现vuejs里定义了一个observe(value, asRootData)方法, 该方法会检测传入的value是否已经被劫持过,如果是直接返回,如果不是,会用value实例化一个Observer实例,Observer方法中,通过Object.defineProperty对对象属性的get和set方法进行了重写,从而在数据发生变化时...原创 2019-08-19 10:51:56 · 275 阅读 · 0 评论 -
vue2项目从webpack3升级到webpack4过程全记录以及多页面打包
升级各种插件,尤其是babel系列,从6升级到了7babel7系列的安装大多是@babel/开头,至少需要安装以下插件 "@babel/core": "^7.4.5", //核心包 "@babel/plugin-syntax-dynamic-import": "^7.2.0", "@babel/plugin-transform-runtime": "^7.4.4", ...原创 2019-07-29 15:08:00 · 989 阅读 · 0 评论 -
H5嵌入APP后,通过window.WebViewJavascriptBridge原生APP与H5之间交互
原生APP跳转到H5页面时,往往需要携带一些用户信息,之前做法是在跳转的地址中拼接H5页面需要的参数,现在通过window.WebViewJavascriptBridge悄悄的进行数据交互。本文主要从H5的角度记录交互思路:1:安卓环境和ios环境稍微有点不同,需要根据navigator.userAgent判断一下当前环境2:仍然是APP环境不同,安卓需要进行兼容性判断,如果不存在wi...原创 2019-04-12 15:13:44 · 13433 阅读 · 3 评论 -
vue-router源码浅显分析(一)--Vue.use(VueRouter), new VueRouter(options),HashHistory
1,vue中使用vueRouter需要通过vue.use(vueRouter),众所周知,这里实际上调用了VueRouter的install方法,对Vue进行了扩展,vueRouter的install方法如下:function install (Vue) {//如果已经挂载了,跳过 if (install.installed && _Vue === Vue) { ret...原创 2019-02-21 09:42:00 · 3256 阅读 · 0 评论 -
在H5中使用qrcode, qrcodejs2生成二维码
在H5中使用qrcode生成二维码安装插件```javascriptnpm install --save qrcode```使用插件按需引入 //index.html &lt;html&gt; &lt;head&gt;···&lt;/head&gt; &lt;body&gt; &lt;canv原创 2019-03-01 10:49:39 · 9657 阅读 · 0 评论 -
在vue项目里使用Monaco Editor
项目中本来使用的是codemirror,但是index.html中需要引入很多js和css,使用起来感觉不太方便(可能是水平有限,用的不对)1,安装monaco-editor和monaco-editor-webpack-pluginnpm install monaco-editor monaco-editor-webpack-plugin2,引入项目参照官网GitHub(https...原创 2019-01-24 14:49:08 · 5616 阅读 · 0 评论 -
vue + webpack +vue-cli@2.0打包注意事项总结(打包路径、打包后文件大小,组件引入等)
以下是用vue-cli@2.0构建的后台管理系统中总结出来的打包注意事项1,运行已有发布环境打包命令 npm run build 以后,的dist文件夹放到本地部署的tomcat中运行,找不到文件 原因是,官方配置文件 config/index.js中配置的 ‘assetsPublicPath‘属性(即打包时,output的文件路径),将build中的assetsPublic...原创 2018-11-05 18:14:01 · 4331 阅读 · 0 评论 -
vue 路由钩子们
vue里路由钩子分为三种:1.全局路由钩子;2.单个路由钩子;3.组件内路由钩子;下面总结一下使用方法:1》全局路由钩子是在初始化VueRouter以后,直接使用router实例进行注册;包括两个钩子: beforeEach 和 afterEach,即每个路由切换前和切换后调用。注: 路由对象时在使用vue-router启动应用时,每个匹配的组件实例都会被注入router的...原创 2018-10-19 10:46:52 · 290 阅读 · 0 评论 -
webpack 打包Vue项目时,报错vue-loader was used without the corresponding plugin.
以前写的Vue项目都是通过vue-cli脚手架自动生成,webpack默认配置完整的。最近想试着手写一遍webpack配置,结果第一步就遇到问题,新建了app.vue文件后,webpack配置好module,打包时,报错vue-loader使用的不是匹配的,查了一下发现是版本的问题1.此时发现,node是8.7.0 版本,webpack安装的是4.0.0 版本,vue-loader是15.6.0版...原创 2018-05-07 12:10:22 · 1395 阅读 · 0 评论