John的专栏

比如部署页面最终部署在https//fancylife.github.io/z-mindnote/下，就必须在vue-router中配置以下代码，否则确实会打开白屏。

为了方便大家写代码，vue.js给大家提供了很多方便的修饰符，比如我们经常用到的取消冒泡，阻止默认事件等等~目录 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符（实在不知道叫啥名字） 表单修饰符填写表单，最常用的是什么？input！v-model~而我们的修饰符正是为了简化这些东西而存在的 .lazy ...

两个日期选择框，不能大于今天，第二个日期选择框所选日期在第一个日期之后。效果如下图：官网链接：http://element.eleme.io/#/zh-CN/component/date-pickertemplate> div class="block"> span class="demonstration">默认span> el-date-pick

原因：在使用vuejs、angularjs开发时，经常会遇见在如Chrome这类能够快速解析的浏览器上出现表达式({{ express }} ),或者是模块(div)的闪烁。对于这个问题由于JavaScript去操作DOM，都会等待DOM加载完成（DOM ready）。对于vuejs、angularjs这些会在DOM ready完会才回去解析html view Template，所以对于C

转自：https://www.cnblogs.com/leaf930814/p/6807318.html一、简介看看官网的简介：“Promise based HTTP client for the browser and node.js” 译：基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用。二、特点：1、在浏览器中发送 XMLHttpRequests 请求...

vuejs取得URL中参数的值地址：http://localhost:3333/#/index?id=001结果：001console.log(this.$route.query.id)

转自：https://www.cnblogs.com/xiaojingyuan/p/7080768.html1 本地图片动态绑定img的src属性一般我们在html中或者vue组件文件中引用图片是这样，这是不需要做特别处理的我们将图片放入assets中或者重新建立个文件夹img什么的都可以，随意～但是我们这时候可能会有个需求就是我们要动态绑定一组本地图片1 将图片当成模块先引进来，再绑定 但是这种...

插件分类Vue.js 的插件应当有一个公开方法 install 。这个方法的第一个参数是 Vue 构造器 , 第二个参数是一个可选的选项对象:MyPlugin.install = function (Vue, options) { Vue.myGlobalMethod = function () { // 1. 添加全局方法或属性，如: vue-custom-element ...

计算属性是一个很邪门的东西，只要在它的函数里引用了 data 中的某个属性，当这个属性发生变化时，函数仿佛可以嗅探到这个变化，并自动重新执行。      上述代码会源源不断的打印出 b 的值。如果希望 a 依赖 data 中的 x 而变化，只需保证 a 函数中有 this.x 即可。如果函数中没有出现 data 中的属性，那么无论 data 中的属性怎么变，a 对应的函数一次也不会执行。...

vue + typescript 新项目起手式我知道你们早就想用上 vue + ts 强类型了还有后续 vue + typescript 进阶篇安装vue-cli 安装ts依赖 配置 webpack 添加 tsconfig.json 添加 tslint.json 让 ts 识别 .vue 改造 .vue文件什么是typescriptTypeScript 是 JavaS...

最近空闲一段时间，就没事看了看vue-router的一些知识，想起了之前做项目遇到的一些不解，也就是当初刚入门，文档看的不详细，理解的不全面导致的。现在虽然不怎么会犯这样的错误了，但是还是写下来，记录一下，也方便有需要的朋友查阅，共勉吧。如果能帮到你，那就更好了.../data/:id这个路由匹配/data/1,/data/2这里的 id 叫 params/data?id=1 /data?i...

vue中有一个较为特殊的API，nextTick。根据官方文档的解释，它可以在DOM更新完毕之后执行一个回调，用法如下：// 修改数据vm.msg='Hello'// DOM 还没有更新Vue.nextTick(function(){// DOM 更新了})尽管MVVM框架并不推荐访问DOM，但有时候确实会有这样的需求，尤其是和第三方插件进...

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性。// 在单独构建的版本中辅助函数为 Vuex.mapStateimport { mapState } from 'vuex' export default { // ... computed: mapState({ ...

前言我的目标是写一个非常详细的关于diff的干货，所以本文有点长。也会用到大量的图片以及代码举例，目的让看这篇文章的朋友一定弄明白diff的边边角角。先来了解几个点...1. 当数据发生变化时，vue是怎么更新节点的？要知道渲染真实DOM的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排，有没有可能我们只更新我们修改的那一小块do...

Vue中子组件调用父组件的方法，这里有三种方法提供参考第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法父组件<template> <div> <child></child> </div></template><script> import c...

一、加载渲染过程父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted二、子组件更新过程父beforeUpdate->子beforeUpdate->子updated->父updated...

转自：https://juejin.im/post/59a22e71518825242c422604前言不推荐完全copy过去,可以看看我是如何针对我这边业务;做的一个axios的封装及实现的思路需求及实现统一捕获接口报错弹窗提示报错重定向基础鉴权表单序列化实现的功能统一捕获接口报错 : 用的axios内置的拦截器弹窗提示: 引入 Element

当组件间传递对象时，由于此对象的引用类型指向的都是一个地址（除了基本类型跟null,对象之间的赋值，只是将地址指向同一个，而不是真正意义上的拷贝），如下数组：var a = [1,2,3];var b = a;b.push(4); // b中添加了一个4alert(a); // a变成了[1,2,3,4]对象：var obj = {a:10};var obj2 =

转自：http://blog.youkuaiyun.com/qq20004604/article/details/564965971、前置要求建议使用webpack；Browserify在默认情况下不支持；2、用法解释首先上官网说明：https://cn.vuejs.org/v2/guide/components.html#异步组件虽然说明是没问题的，但

vux github ui demo:https://github.com/airyland/vuxMint UI项目主页:http://mint-ui.github.io/#!/zh-cndemo:http://elemefe.github.io/mint-ui/#/github地址:https://github.com/ElemeFE/mint-ui中文文档地址:http:

转载自：http://www.cnblogs.com/lolDragon/p/6268345.html安装1.github下载地址：https://github.com/vuejs/vue-devtools2.下载好后进入vue-devtools-master工程  执行npm install -----&gt;npm run build.3.修改mainifest.json 中的persiste...

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 V

在组件上添加动态属性 this.$set(this.data,"obj",value');大概是这样

转自：http://blog.youkuaiyun.com/luckylqh/article/details/54584037在vue中已经不像jq那样直接操作dom了，如果要指向当前选中项时，就不能再用jq的思路来做了，方法如下： 例如 当指向一个状态的时候，只让指向的状态隐藏，其他项不变，如果项目中用了element-ui，那么操作起来会比较简单一些，这样设置：v-if="(row.i

转载自：http://blog.youkuaiyun.com/xiao_yu_liu/article/details/55515244div id="app">  p v-for='(data,key,index) in datas' v-on:click="addClassFun(index)" v-bind:class='{class1:index==qwerqwre}'>{{data.data}

和后端联调时总是会面对恼人的跨域问题，最近基于Vue开发项目时也遇到了这个问题，两边各自想了一堆办法，查了一堆资料，加了一堆参数，最后还得我把自己的localhost映射成上线时将要使用的域名。今天翻看代码时，突然发现vue-cli的config文件里有一个参数叫proxyTable，看这个名字就感觉能解决问题，于是我就去搜了一下，果然。在vuejs-templates，也就是vue-cli的

vue-cli默认生成的webpack配置文件，没有加入字体文件的几个扩展名，首先需安装url-loader：npm install url-loader --save-dev，然后在webpack.config.js里module.rules:输入{ test: /\.(png|jpg|gif|svg|woff|woff2|ttf|eot)$/, loader:

线上地址前言这半年来一直在用vue写管理后台，目前后台已经有七十多个页面，十几种权限，但维护成本依然很低，效率依然很高，所以准备开源分享一下后台开发的经验和成果。目前的技术栈主要的采用vue+element+axios.由于是个人项目，所以数据请求都是用了mockjs代替。后续会出一系列的教程配套文章，如如何从零构建后台项目框架，如何做完整的用户系统（如权限验证，二次登录等），如何...

keep-alive 简介keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。用法也很简单：keep-alive> component> component>keep-alive>propsinclude - 字符串或正则表达，只有匹配的组件会被缓存exclude - 字符串或正则表达式，任何匹配的组件都

转自：http://blog.youkuaiyun.com/amberwu/article/details/53067507Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。想了解更多，请戳→→→http://cn.vuejs.org/html代码：[html] view plain copydi

on和emit的事件必须是在一个公共的实例上，才能触发。我的解决方案是：新建bus.jsimport Vue from 'vue'export var bus = new Vue()App.vue里created方法里定义事件import { bus } from 'bus.js'// ...created () { bus.$on('tip', (

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的 watcher 。这是为什么 Vue 提供一个更通用的方法通过 watch 选项，来响应数据的变化。当你想要在数据变化响应时，执行异步操作或昂贵操作时，这是很有用的。例如：div id="watch-example"> p> Ask a yes/no question: input v-mod