vue | 易学教程

VUE路由继续改进

阅读更多关于 VUE路由继续改进

为了学习嵌套路由，我们将原来的路由器给抽取出来！抽取成一个单独的目录： index.js import Vue from 'vue' import VueRouter from "vue-router" Vue.use(VueRouter); let routes = [ { path:"/foo", component:()=>import("../views/Foo.vue") },{ path:"/bar", component:()=>import("../views/Bar.vue") },{ path:"/dynamic/:id", component:()=>import("../views/Dynamic.vue") } ]; // 路由器 (路由器中有路由列表) const router = new VueRouter({ routes }); // 到处路由器 export default router; 这样一抽取，main.js 瞬间整洁了很多！ ———————————————————————————————————————————————— 上面做出调整，主要是为了测试嵌套路由！上面是我从官网抄来的，我们照着它写就行了我准备给Bar组件添加连个子组件 1，配置路由列表 { path:"/bar", component:Bar, children:[

VUE实现Studio管理后台（八）：用右键菜单contextmenu，编辑树形结构

阅读更多关于 VUE实现Studio管理后台（八）：用右键菜单contextmenu，编辑树形结构

RXEdior预设会有文件管理功能，但是灵活性需求不大，目前的设想是文件夹不允许修改，只允许增删改文件。基于这样的设想，把界面实现成这个效果：这个功能并不是一个通用功能，并且我们做的代码，也没有按照类库的标准要求，这种编辑功能实现有些复杂，用了大量的js事件，代码不是很容易读。后期这个功能可能会有大的变化，所以我也没有让这些代码变的更优雅的动力。本篇作文就不详细展示代码，大致说说我的实现思路，以及编写过程中踩到的坑。需要源码的朋友，可以直接从Github下载。 1、这个项目中，两个树用的是同一套代码，添加editable属性props加以区分。 <NodeTree v-model="files" :openIcon="'fas fa-folder-open'" :closeIcon="'fas fa-folder'" :editable = 'true' > </NodeTree> 2、给节点数据添加三个变量，功能见注释： isFolder:true,//不能被编辑，只有该属性为True时可以新建子节点 leafIcon:'far fa-file-code',//子节点图标，构建新节点时使用 locked:true,//颜色变淡，不能被选中 3、弹出右键菜单，在DIV上监听事件contextmenu： @contextmenu.prevent = 'onContextMenu'

nodejs+webpack+vue之vue

阅读更多关于 nodejs+webpack+vue之vue

vue.js 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。vue-cli是vue官方提供的一个命令行工具，vue-cli主要是用于构建单页应用的脚手架。使用方法： 1、安装vue-cli： npm install -g vue-cli 2、安装webpack-simple模板： vue init webpack-simple 项目名称，如: vue init webpack-simple demo 3、安装项目依赖： npm install 4、执行代码：执行 webpack 命令，在dist目录下生成build.js文件，执行 npm run dev 命令，自动启动web服务127.0.0.1:8080 本项目则是基于vue-cli生成的单页应用进行改造成多页面模板。本项目用到了两个html模板页：index.html、users.html，因此，在webpack.config.js文件里entry节点则有两个入口文件/src/index.js、/src/user.js。 index.html模板，<router-view>把路由匹配到的组件渲染在这里 <body> <div id="app">　　　　　<!--

vue项目优化篇总结

阅读更多关于 vue项目优化篇总结

1，开发用到的log控制台打印设置为开发输出，运行不输出安装： babel-plugin-transform-remove-console 开发依赖 //babel.config.js文件中加入 //这是项目发布阶段需要使用的babel插件 const prodplugins = [] //判断是运行环境还是开发环境 if (process.env.NODE_ENV === 'production') { prodplugins.push('transform-remove-console') } module.exports = { // 根据判断运行环境配置清除log打印 ...prodplugins ] } 2、通过 chainWebpack 自定义打包入口开发完成后，可以根据需要将main.js分离成开发环境，生产环境 //创建vue.config.js文件 module.exports = { //设置打包入口文件,不同环境分离main.js文件，开发和实际运行有区别的时候 chainWebpack: config => { //生产环境，main-prod.js config.when(process.env.NODE_ENV === 'production', config => { config.entry('app').clear().add('./src

从网上下载一个vue项目，跑起来的全过程

阅读更多关于从网上下载一个vue项目，跑起来的全过程

一、首先从github上来一个项目下来，在这里我就不细说了。二、先查看项目所需要的Node版本和vue版本，进入到项目的主目录下点击package.json文件查看该项目所需要到的vue、node版本（node再带npm）三、开始下载node，官网：https://nodejs.org/zh-cn/，下载完安装包后，一直下一步，安装好后，使用代码测试一下安装好没有。 node -v 也顺便检擦一下npm版本（安装node会自带npm） npm -v 显示版本号说明就可以了，还不行的话重启试试。安装完node之后，最好配置成阿里源（不然外网的源卡的飞起。。。）直接在doc界面中输入代码即可。 npm config set registry https://registry.npm.taobao.org 四、安装vue-cli,直接在npm中下载即可，项目里的版本是2.5.16，我直接用代码下载的是2.9.6（项目启动成功，版本没有完成对应，应该不要紧） npm install -g vue-cl 下载成功后，直接在doc界面输入vue -V出现版本号说明安装成功。注意：发现npm install -g vue-cl下载的vue，也可以根据指定的版本号下载（这步可以不用理） npm install -g vue-cli@2.5.6 这个版本号要注意了

Vue响应式原理踩坑

阅读更多关于 Vue响应式原理踩坑

同事遇到了一个视图层未更新的问题，操作是onLoad时从store中取出storeList，对storeList forEach操作新增属性 a，然后将更改后的storeList赋值给该组件data中的 dataList。经检查最后dataList中的a属性，没有setter，初以为在赋值操作时触发 dataList的setter 后应该重新响应式被赋值的数据，但结果没有。思考了会，觉得是dataList只是对storeList的引用，所以要对源数据 storeList进行 $set(storeList, 'a', false)。吃完午饭才意识到跟引用没有半毛钱关系，既然dataList有setter了就会重新响应式赋值切断引用。根本原因是因为 store中拿出的storeList 已经是一个响应式数据了(在某个时机保存的)，先前学vue源码时提到，响应式时会对每个对象包括数组添加一个 __ob__ 属性返回的是当前observer实例, 当触发setter的时候要去走响应式的方法了，接着判断这个属性有没有被响应式过（即有无__ob__ 属性），如果有的话就原样返回，没有的话就响应式普通属性再返回。所以这里要先对源数据$set, 再赋值。最后总结下会触发响应式的几种操作，对属性赋值，数组push pop splice等一系列操作

Vue 下拉刷新及无限加载组件

阅读更多关于 Vue 下拉刷新及无限加载组件

原文 https://github.com/wangdahoo/vue-scroller 主题 Vue.js Vue Scroller Vue Scroller is a foundational component ofVonic UI. In purpose of smooth scrolling, pull to refresh and infinite loading. Demo Change Logs v0.3.9 add getPosition method for scroller instance. v0.3.8 fix bug v0.3.7 publish bower version v0.3.6 support mouse events v0.3.4 change required property 'delegate-id' to non-required. v0.3.3 support multi scrollers in one page. How To Use Step 1: create vue project and install vue-scroller via npm. (we use vue webpack-simple template here) $ vue init webpack-simple#1.0 my-project $ cd

使用vue版本地dataV组件库

阅读更多关于使用vue版本地dataV组件库

dataV 这个库主要是用来写监控大屏得，提供了很多好看得图表供选择，也有vue版本和react版本。官方文档正常按照官方文档下载库，然后导入组件，传入文档中要求的配置项就可以成功得渲染出来，下次简单写一点我的使用过程 <div class="full-screen"> <dv-border-box-11 title="污染物监管系统"> <dv-loading v-if="loading">Loading...</dv-loading> <div v-else class="body"> <div class="item"> <dv-active-ring-chart :config="config1" style="width:200px;height:200px" /> </div> </div> </dv-border-box-11> </div> 效果这个库的全屏组件不太好用，自己实现一个即可，然后布局调整一下，组件多用填满屏幕，针对需求使用组件，这样就会像一个专业的监控大屏了，另外大屏数据往往都是不停刷新的，我知道的有两种方案，一种是轮询，就是不断地请求接口获取数据，另一种是websocket协议，建议学习。来源： CSDN 作者： Ritchie___ 链接： https://blog.csdn.net/qq_40278455/article/details

vue学习总结--引入reset.css与border.css

阅读更多关于 vue学习总结--引入reset.css与border.css

1. reset.css ，初始化整体样式，去除某些标签的默认样式，比如 <li></li> 的小黑点；因为每个人用的初始化样式都有所区别，但都大同小异，所以这里我只放我目前在用的代码，大家也可以自行搜索其他开发者发布的版本 html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio,

VUE自定义事件中，关于子组件传递多个参数的同时，父组件又要传递额外的参数的实践

阅读更多关于 VUE自定义事件中，关于子组件传递多个参数的同时，父组件又要传递额外的参数的实践

//Super.vue < template > < div > < child-event @ getEvent = "handlerEvent1" > </ child-event > < child-event @ getEvent = "handlerEvent2($event)" > </ child-event > < child-event @ getEvent = "handlerEvent3(1)" > </ child-event > < child-event @ getEvent = "handlerEvent4($event,1)" > </ child-event > < child-event @ getEvent = "handlerEvent5($event,1,2)" > </ child-event > </ div > </ template > < script > import ChildEvent from "./Child.vue" ; export default { components : { ChildEvent }, methods : { handlerEvent1(ar1, ar2) { console .log(ar1, ar2); //参数一参数二 }, handlerEvent2($event) {

订阅 vue