分类：VUE

2020
09-28

Vue简单实现原理详解

本文实例讲述了Vue实现原理。分享给大家供大家参考，具体如下：用了Vue也有两年时间了，一直以来都是只知其然，不知其所以然，为了能更好的使用Vue不被Vue所奴役，学习一下Vue底层的基本原理。Vue官网有一段这样的介绍：当你把一个普通的JavaScript对象传给Vue实例的data选项，Vue将遍历此对象所有的属性，并使用Object.defineProperty把这些属性全部转为getter/setter。Object.defineProperty是ES5中一个无法shim的特性，这也就是... 继续阅读 >
2020
09-28

Vue双向绑定实现原理与方法详解

本文实例讲述了Vue双向绑定实现原理与方法。分享给大家供大家参考，具体如下：昨天接到一个电话面试，上来第一个问题就是Vue双向绑定的原理。当时我并不知道如何监听数据层到视图层的变化，于是没答上来，挂电话后，我赶忙查了下资料，主要思路有如下三种。1.发布者-订阅者模式（backbone.js）思路：使用自定义的data属性在HTML代码中指明绑定。所有绑定起来的JavaScript对象以及DOM元素都将“订阅”一个发布者对象。任何时候如果J... 继续阅读 >
2020
09-28

Vue SSR 即时编译技术的实现

Vue SSR 即时编译技术的实现 当我们在服务端渲染Vue应用时，无论服务器执行多少次渲染，大部分VNode渲染出的字符串是不变的，它们有一些来自于模板的静态html，另一些则来自模板动态渲染的节点（虽然在客户端动态节点有可能会变化，但是在服务端它们是不变的）。将这两种类型的节点提取出来，仅在服务端渲染真正动态的节点（serverPrefetch预取数据相关联的节点），可以显著的提升服务端的渲染性能。提取模板中静态的html只需在编译期对模板结构做解析... 继续阅读 >
2020
09-28

将Vue组件库更换为按需加载的方法步骤

本文介绍了将Vue组件库更换为按需加载的方法步骤，分享给大家，具体如下：按需加载DEMO仓库地址背景我司前端团队拥有一套支撑公司业务系统的UI组件库，经过多次迭代后，组件库体积非常庞大。组件库依赖在npm上管理，组件库以项目根目录的index.js作为出口导出，文件中导入了项目中所有的组件，并提供组件安装方法。index.jsimportButtonfrom"./button";importTablefrom"./table";importMusicPlayerfrom"./musicPlayer";... 继续阅读 >
2020
09-28

Vue 的双向绑定原理与用法揭秘

本文实例讲述了Vue的双向绑定原理与用法。分享给大家供大家参考，具体如下：Vue中需要输入什么内容的时候，自然会想到使用<inputv-model="xxx"/>的方式来实现双向绑定。下面是一个最简单的示例<divid="app"><h2>What'syourname:</h2><inputv-model="name"/><div>Hello{{name}}</div></div>newVue({el:"#app",data:{name:""}});在这个示例的输入框中输入的内容，会随后呈现出来。这是Vue原生... 继续阅读 >
2020
09-28

vue自定义标签和单页面多路由的实现代码

1.自定义组件标签（如在主页插入顶栏/侧边栏等）  比如说要将Header.vue插入Home.vue中显示：定义好Header.vue，然后在Home.vue的script中导入Header.vue：importvHeadfrom"./Header.vue";#导入Header.vue为vHead，注意路径，Header.vue和Home.vue在同一路径下用./然后导出组件：exportdefault{components:{vHead,}};然后即可在Home.vue的<template>中直接插入使用了：<vHead></vHead>2.单页面多路由实... 继续阅读 >
2020
09-28

vue 输入电话号码自动按3-4-4分割功能的实现代码

vue 输入电话号码自动按3-4-4分割功能的实现代码 输入框绑定<inputclass="inputBox"type="phone"placeholder="请输入手机号"maxlength="13"v-model="phoneNum"/>监听事件，每次号码发生改变时触发大体的逻辑是：先比较号码变化前后的长度，判断是输入还是删除，如果是输入的话，利用正则表达式改变号码格式。watch:{phoneNum(newValue,oldValue){//监听电话号码this.phoneNum=newValue.length>oldValue.length?newValue.replace(/\s/g,'').replace(/(\d{... 继续阅读 >
2020
09-28

vue项目中使用bpmn为节点添加颜色的方法

vue项目中使用bpmn为节点添加颜色的方法 内容概述bpmn是比较方便的绘制流程图的插件，官方demohttps://github.com/bpmn-io/bpmn-js-examples本文主要包括vue项目中bpmn使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。前情提要上文我们已经实现了在外部更改节点名。此时又有新玩法：在流程图中，根据节点状态为其标记不同颜色。例如：已完成：黄色，正在进行：绿色，本次我们通过两种方式来实现该需求。效果：方式1：mo... 继续阅读 >
2020
09-28

vue使用map代替Aarry数组循环遍历的方法

vue使用map代替Aarry数组循环遍历的方法 需求：根据主键id来找到对应的数组下标原本的方法是使用for循环遍历该数组，变量i就是下标，问题在于，如果有多重for循环，就会导致性能大大下降，数据也容易出错因此使用map，让数组（原本是list）变成一个map集合（key-value形式），把主键id当做key，下标当做value，一一对应，需要的时候直接使用map.get(key)就可以获取到对应的value1.在data{}中先定义一个map全局变量2.在数据回显或有全部数据的地方把数组list变成map该例... 继续阅读 >
2020
09-28

Vue中通过属性绑定为元素绑定style行内样式的实例代码

1.直接在元素上通过:style的形式，书写样式对象<h1:style="{color:'red','font-weight':200}">这是一个H1</h1>2.将样式对象定义在data中，并直接引用到:style中1:在data上定义样式data:{styleObj1:{color:'blue','font-weight':200,'font-size':'40px'},}2:在元素中，通过属性绑定的形式，将样式对象应用到元素中<h1:style="styleObj1">这是一个H1</h1>3.在:style中通过数组，引用多个data上的样式对象1:在data上定义样式data:... 继续阅读 >
2020
09-28

Vue发布订阅模式实现过程图解

Vue发布订阅模式实现过程图解 vue项目中不同组件间通信一般使用vuex，通常情况下vuex和EventBus不应该混用，不过某些场景下不同组件间只有消息的交互，这时使用EventBus消息通知的方式就更合适一些。图解html<body><scriptsrc="./Dvue.js"></script><script>constapp=newDVue({data:{test:"Iamtest",foo:{bar:"bar"}}})app.$data.test="helloworld!"//app.$data.foo.bar="hello!"</script></body>Dvue.jscl... 继续阅读 >
2020
09-28

Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解

本文实例讲述了Vue+Node.js+MongoDB图片上传组件实现图片预览和删除功能。分享给大家供大家参考，具体如下：公司要写一些为自身业务量身定制的的组件，要基于Vue,写完后扩展了一下功能，选择写图片上传是因为自己之前一直对这个功能比较迷糊，所以这次好好了解了一下。演示在网址打开后的show.gif中。使用技术：Vue.js|node.js|express|MongoDB。github网址：https://github.com/neroneroffy/private-project/tree/maste... 继续阅读 >
2020
09-28

Vue 3.0 全家桶抢先体验

序Vue3.0全家桶发布内容包括：vue:Betavue-router:Alphavuex:Alphavue-class-component:Alphavue-cli:Experimentalsupportviavue-cli-plugin-vue-nexteslint-plugin-vue:Alphavue-test-utils:Alphavue-devtools:WIPjsx:WIP可以看到Vue3.0beta版本是一个项目系列，包含了我们在开发过程中需要的套件、webpack插件等等，本文将带大家快速搭建基于Vue3.0的项目框架，这和之前很多Vue3.0的... 继续阅读 >
2020
09-28

vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解

vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解 在开发过程中发现vue-baidu-map封装的BmPolyline折线组件不能顺利绘制出带箭头的纹理。原因是BmPolyline文档中虽然有icons属性，但是对应的源文件中并没有props接收icons最初的开发思路：根据vue-baidu-map折线组件的官方文档，在vue中通过Prop，为BmPolyline组件传递一个icons数组，数组的元素必须为IconSequence类的实例对象。而IconSequence类的实例对象则是在BaiduMap组件的ready事件中拿到BMap类和... 继续阅读 >
2020
09-28

Vue + Scss 动态切换主题颜色实现换肤的示例代码

根据预设的配色方案，在前端实现动态切换系统主题颜色。大概的思路就是给html根标签设置一个data-theme属性，然后通过js切换data-theme的属性值，Scss根据此属性来判断使用对应主题变量。这里可以选择持久化Vux或接口来保存用户选择的主题。一、首先需要给项目下载配置Scss1.安装依赖npminstallnode-sasssass-loader--save-dev2.找到build中webpack.base.conf.js,在rules中添加scss规则{test:/\.scss$/,loaders:['style','c... 继续阅读 >