vue
武东10号
developer for ninjia
展开
-
vue2.x---vue-router如何在router-link标签绑定click点击事件、keyup、change等事件
<template> <div id="app"> <h1>hello app!</h1> <p> <router-link to='/page1' tag='a'>page1</router-link> <router-link to='/page1/page2' tag='a' @click='jump' >p原创 2017-08-16 22:14:12 · 15377 阅读 · 0 评论 -
vue---vue2.x中如何异步加载路由组件,webpack+vue实现组件懒加载
一、 什么是懒加载 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。二、为什么需要懒加载 在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大,造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验,而运用懒加载则可以将页面进行划分,需要的时候加载页面,可以有效的分担首页所承担的加载压力,减少首页加载用时三、如何与webpack配合实现组件懒加载 1、在转载 2017-12-25 21:08:26 · 6573 阅读 · 0 评论 -
vue---使用vue编写插件,基于vue2.x编写常用toast loading插件,一键复用组件
一直都觉得vue的插件生涩难懂,但是又很好奇,在看了几篇文章,试着写了写之后觉得也没那么难,这篇文就是总结一下这个过程,加深记忆,也可以帮助后来的人。why在学习之前,先问问自己,为什么要编写vue的插件。在一个项目中,尤其是大型项目,有很多部分需要复用,比如加载的loading动画,弹出框。如果一个一个的引用也稍显麻烦,而且在一个vue文件中引用的组件多了,会显得代码臃肿,所以才有了封装vue插件转载 2017-12-23 17:55:54 · 2587 阅读 · 0 评论 -
vue---vue2.x自定义plugin,给vue添加全局方法,原型上增加全局方法
1. 自定义plugin.jsexport default{ install(Vue,options); { Vue.prototype.toStringTwo=(str)=>( ('0000'+String(str)).slice(-2) ) }}2.入口jsimport Vue from 'vue';import MyPlugin fr原创 2017-11-15 21:08:20 · 5318 阅读 · 0 评论 -
vue---vue2.x中父组件如何触发子组件事件方法?
1. 父组件中获取子组件方法$children<template> <div> <v-header></v-header> <v-content></v-content> <v-footer></v-footer> </div></template><script> import vHeader from './Head原创 2017-09-29 23:43:36 · 12821 阅读 · 2 评论 -
vue---vue中如何操作dom获取节点?.vue组件中通过mounted获取节点操作
选择器获取<template> <div> <canvas id='cvs' > </div></template><script> export default{ mounted(){ let canvas=document.querySelector('#cvs'); } }</scr原创 2017-09-02 10:30:18 · 53692 阅读 · 1 评论 -
vue---报错Error:ENOENT:no such file or directory,chmod.....js-beautify@1.7.0\**\css-beautify.js
vue—使用vue-cli/webpack构建项目cnpm install安装依赖时候报错:Error:ENOENT:no such file or directory,chmod.....js-beautify@1.7.0\**\css-beautify.js;cannot find module 'opn'/async-each/anymatch等等如图: 网上并没有多少相关解决方案,通过搜索原创 2017-09-18 23:54:54 · 8925 阅读 · 0 评论 -
vue---Vue2.x中的Render函数,render核心函数createElement()
Render函数是Vue2.x版本新增的一个函数;使用虚拟dom来渲染节点提升性能,因为它是基于JavaScript计算。通过使用createElement(h)来创建dom节点。createElement是render的核心方法。其Vue编译的时候会把template里面的节点解析成虚拟dom;什么是虚拟dom?虚拟dom不同于真正的dom,它是一个JavaScript对象。当状态发生变化的时候转载 2017-09-08 15:03:38 · 13391 阅读 · 1 评论 -
webpack---webpack构建vue多页面框架(一、工程布局)
webpack+vue已经成为单页面程序标配!其实webpack构建vue多页面程序也是相当出色! 1. 工程布局; 2. webpak.config.js; 3. 生产环境与开发环境; 4. 自动化构建; 5. 源码GitHub;1.工程布局理想中的工程目录如下:-app webpack.config.js //webpack入口配置 postcss.confi原创 2017-08-14 22:24:30 · 2958 阅读 · 0 评论 -
webpack---webpack构建vue多页面框架(二、webpak.config.js)
webpack+vue已经成为单页面程序标配!其实webpack构建vue多页面程序也是相当出色!工程布局;webpak.config.js;生产环境与开发环境;自动化构建;源码GitHub;2.webpak.config.jswebpak.config.js基本配置如下:const webpack=require('webpack'); //webpack必要条件 const原创 2017-08-14 22:49:48 · 1855 阅读 · 0 评论 -
webpack---webpack构建vue多页面框架(四、自动化构建)
webpack+vue已经成为单页面程序标配!其实webpack构建vue多页面程序也是相当出色!工程布局;webpak.config.js;生产环境与开发环境;自动化构建;源码GitHub自动读取src中所有页面入口,并打包生成相应的页面,用到node相关模块!webpack.config.jsconst webpack = require('webpack');const path原创 2017-08-15 21:09:20 · 2814 阅读 · 0 评论 -
webpack---webpack构建vue多页面框架(三、生产环境与开发环境)
webpack+vue已经成为单页面程序标配!其实webpack构建vue多页面程序也是相当出色!工程布局;webpak.config.js;生产环境与开发环境;自动化构建;源码GitHub3.生产环境与开发环境const webpack = require('webpack');const path = require('path');const ExtractTextPlugin原创 2017-08-15 20:54:13 · 3054 阅读 · 0 评论 -
vue---vue中常用指令,以及如何自定义指令vue.directive进行节点操作?
- vue官方指令:v-model///双向绑定,常用于表单中。///<p>zhiwei:{{md}}</p><input type="text" v-model.trim='md'></li>代码中trim为v-model指令修饰符;trim:去除表单value中首位空格;number:字符串转为数字;lazy:化同步双向为change双向v-show,v-if,v-else-if,v-els原创 2017-08-30 23:50:14 · 2968 阅读 · 0 评论 -
vue---vue中如何自定义事件?子组件事件如何向上触发父组件事件?
vue的自定义事件非常有趣,大意为子组件使用了一个事件,比如click然后产生了一个效果,这样的效果便可以为自定义事件了。然后将这样的效果命名放入父组件中,当做一个事件来触发,每当这样的效果发生一次时,这样父组件的事件也被触发了,即可以产生另一种效果,这样可以加强这两个效果的紧密联系,并且这样有趣又好用的方式也可以用在自己想要的地方。自定义事件的强大算是初步体会到了。例子:<div id="coun转载 2017-09-04 11:10:27 · 4352 阅读 · 0 评论 -
vue2.x---在vue2.x中,父组件怎么响应式向子组件传值,子组件怎么通过prop修改父组件数据?
从 2.3.0 起我们重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 侦听器。这是目前vue最新版文档描述,子组件修改父组件状态的方法。包括两部分代码填充:父组件<comp :foo="bar" @update:foo="val => bar = val"></comp>子组件:this.$emit('update:f原创 2017-08-14 20:59:18 · 5793 阅读 · 0 评论 -
vue---vuex中modules中action如何调用state、兄弟模块state、根state,以及调用相关action、mutation,getters?
vuex中modules可以将项目state进行分块,互补干扰。那么在单个module中,action如何调用其他module中action或者根action/mutation/state?打印action参数:const actions={ editName(options,payload){ console.log(options) }}运行editName方法...原创 2018-06-13 21:36:26 · 38546 阅读 · 3 评论