今天来谈谈vue项目{vue,vue-router,component}三大神将之一的vue-router。作为我们前后端分离很重要的实践之一，router帮我们完成了SPA应用间的页面跳转。 并且，配合axios这样的第三方库，我们可以实现配合后台接口的拦截器功能。 对于一个小型项目而言,router这个文件夹里面就包含了一个router.js就足够了， 但是，当我们的页面比较多的时候，我们就需要分出两个文件出来：一个定义我们的路由和组件，另一个实例化组件，并将路由...
前言最近在研究 剖析Vue原理&实现双向绑定MVVM 这篇文章，一边学习一边总结一下自己的思考。 Vue是一个典型的MVVM框架，模型（Model）只是普通的JavaScript对象，修改它则视图（View）会自动更新。这种设计让状态管理变得非常简单而直观。那么Vue是如何把模型和视图建立起关联的呢？ 实现原理概述这是前言提到的文章里的代码，一段典型的体现了Vue特点的代码： <div id="mvvm-app"><input type="text" v-model="word"><p>{{word}}<...
这篇文章把小编前段时间做的vue项目，做个完整的总结，具体内容请参考本文。 这次算是详细总结，会从项目的搭建，一直到最后的服务器上部署。 废话不多说了。干货直接上。 一、 必须node环境, 这次就不写node环境的安装了。过两天我会写个node环境的安装随笔。 二、 node环境配好后。开整vue。 1. 安装vue脚手架。npm install -g vue-cli2. 用脚手架搭项目(只是一行命令) vue init webpack-simple (项目名字) 或 vue init web...
注意：vue-router 2只适用于Vue2.x版本，下面我们是基于vue2.0讲的如何使用vue-router 2实现路由功能。 推荐使用npm安装。 npm install vue-router一、使用路由在main.js中，需要明确安装路由功能：import Vue from vue import VueRouter from vue-router import App from ./App.vue Vue.use(VueRouter)1.定义组件，这里使用从其他文件import进来 import index from ./components/index.vue import hello from ./components/hello....
前言 最近太忙了，博客好久没有更新了。今天忙里偷闲，简单总结一下最近vue项目重构的一些技术要点。 vue数据更新， 视图未更新 这个问题我们经常会遇到，一般是vue数据赋值的时候，vue数据变化了，但是视图没有更新。这个不算是项目重构的技术要点，也和大家分享一下vue2.0通常的解决方案吧！ 解决方案如下： 1、通过vue.set方式赋值 Vue.set(数据源, key, newValue)2、 通过Array.prototype.splice方法 数据源.splice(indexOfIte...
最近在使用webpack + vue做个人娱乐项目时，发现npm run build后，css js img静态资源文件均找不到路径，报404错误。。。网上查找了一堆解决办法，总结如下 一、首先修改config目录下的index.js文件将其中build的配置项assetsPublicPath进行修改，改为目的是将资源文件的引入路径，改为相对地址（相对index.html） 二、此时html中的js、css、img引入均没有问题，但是css中的background-image还是报404 此时的问题原因是，使用了相对...
keep-alive 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。结合vue-router中使用，可以缓存某个view的整个内容。 基本使用如下： <keep-alive><component><!-- 该组件将被缓存！ --></component> </keep-alive> 一般有这样的需求，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页 有两个情况： 1. 直接点击浏览器的后退返回按钮。 2....
本文介绍了Vue.js中ref ($refs)用法举例总结，分享给大家，具体如下：看Vue.js文档中的ref部分，自己总结了下ref的使用方法以便后面查阅。 一、ref使用在外面的组件上 HTML 部分 <div id="ref-outside-component" v-on:click="consoleRef"><component-father ref="outsideComponentRef"></component-father><p>ref在外面的组件上</p> </div> js部分var refoutsidecomponentTem={template:"<div class=childComp><h5>我是子组件</h5...
前言 之前一段时间都在使用 vue 开发后台管理系统，在摸索的过程中对 vue 本身和模块化、规范化开发有了更深的认知，现在记录下来，希望对其他需要开发项目的人有帮助。基于 vue.js 的前端开发环境，用于前后端分离后的单页应用开发，可以在开发时使用 ES Next、scss 等最新语言特性。下面随着小编来一起学习学习吧。 项目配置首先，在确定好使用的框架和组件库后，先要大致了解它们，做到文档基本熟悉。本次开发使用到的有： vue ...
从前端的角度看，Vue可以说是目前最理想的前端MVVM框架，一切为界面服务，上手难度低，本文就将记录使用Vue全家桶（Vue+Vue-router+Vuex）重构一个jQuery+template项目的过程，以及期间的收获。 入门 Vue的官方文档就是学习Vue的最佳教程，没有之一，可能因为框架作者是设计出身，没有后端背景，因此各种抽象概念在Vue里都得以用最容易理解的方式被恰到好处的阐述，这里只简单介绍Vue、Vue-router、Vuex的概念，要全面学习建议去官...
官网上已经有的内容，我就不再赘述了，直接在官网上查看即可，这里蚊子想换个角度来讲解下vue的组件。 组件，顾名思义，就是把一个相对独立，而且会多次使用的功能抽象出来，成为一个组件！如果我们要把某个功能抽象为一个组件时，要做到这个组件对其他人来说是个黑盒子，他们不用关心里面是怎么实现的，只需要根据约定的接口调用即可！ 我用一张图稍微总结了下Vue中组件的构成：可以看到组件中包含的东西还是蛮多的，而且，还有很...
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。 <keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。 prop: include: 字符串或正则表达式。只有匹配的组件会被缓存。exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。在2.1.0版本Vue中 常见用法...
本文介绍了VUE实现表单元素双向绑定（总结） ，分享给大家，具体如下： checkbox最基本用法: <input type="checkbox" v-model="inputdata" checked/> <input type="checkbox" v-model="inputdata"/> <input type="checkbox" v-model="inputdata"/> new Vue({el:".......",data:{inputdata:false //逻辑类型}ready:function(){console.log(this.inputdata)//true} })规则1：如果v-model绑定的变量类型为boolean，若input被选中，thi...
之前关于vue事件修饰符和按键修饰符的一点分析，最近需要回顾，就顺便发到随笔上了 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。 .prevent .capture .self .once...
Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。他是基于AnjularJs 编写的，所以和前者的语法特别相似，却又使用简洁了很多。 那今天，我就给大家详细的说道说道这个 Vue.js ，以下是我们这次详解的目录，朋友们可以根据自己的情况选择性阅读，所有操作均附有代码...