
vue2.0
AndyLizh
这个作者很懒,什么都没留下…
展开
-
SuperAgent使用简介
SuperAgentSuperAgent是轻量级更为优化的ajax API,对比大量糟糕的现存的API,SuperAgent是灵活的、易读的、并且非常易学,同时SuperAgent可用于Node.js!?123456789101112reque转载 2017-02-28 09:36:47 · 2397 阅读 · 0 评论 -
Vue.js——60分钟快速入门
Vue.js介绍Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM。它通过转载 2017-02-24 14:50:54 · 1007 阅读 · 0 评论 -
vuejs怎么在服务器部署?
通过vue-cli搭建的基于webpack结构的工程项目1、build前的配置,防止js、css文件路径错误在目录build下面找到webpack.prod.conf.js文件,找到output节点,添加【publicPath:'./'】2、执行命令【npm run build】build项目3、在跟目录下会生成dist目录,里面的内容就是构建的结果,包含html、css、js文件原创 2017-02-24 10:55:50 · 16897 阅读 · 3 评论 -
Vue.js2.0从入门到放弃---入门实例
最近,vue.js越来越火。在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了),经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api。。。废话不多说了,把我踩过的坑,在转载 2017-02-23 15:31:58 · 2753 阅读 · 0 评论 -
Vue.js的常见用法及基本原理
Vue.js 快速入门什么是Vue.jsvue是法语中视图的意思,Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。作者是尤雨溪,写下这篇文章时vue.js版本为1.0.7准备我推荐使用sublime text作为编辑器,关于这个编辑器可以看我这篇文章。在package con转载 2017-02-23 13:48:22 · 1255 阅读 · 0 评论 -
Sublime Text插件
一、插件安装方法:1、快捷键【Ctrl+Shift+P】显示命令行工具输入框2、输入Install Package3、输入需要安装的插件,然后回车即可。二、常用插件:1、Emmet:http://blog.youkuaiyun.com/gebitan505/article/details/562897502、HTMLBeautify:格式化Html代码,快捷键【Ctrl+Shift+A转载 2017-02-21 17:11:13 · 655 阅读 · 0 评论 -
Vue.js 入门指南之“前传”(含sublime text 3 配置)
题记:关注Vue.js 很久了,但就是没有动手写过一行代码,今天准备入手,却发现自己比菜鸟还菜,于是四方寻找大牛指点,才终于找到了入门的“入门”,就算是“入门指南”的“前传”吧。此文献给跟我一样“白痴级别”的前端开发人员,大牛请绕过。1,下载安装Node.js去 Node.js 官网下载一个Windows环节的安装包 node-v6.2.0-x64.rar 文件,一路安装下去即可。官网转载 2017-02-22 18:22:13 · 2110 阅读 · 0 评论 -
vue-loader
vue-loader的概念其他loader:css-loader、url-loader、html-loader等 先来了解一下模块的概念,比如在nodeJS中,有require和exports关键字。很早有个broserify,是个js模块加载器。 现在流行的是webpack,因为它不光你能加载js文件,还可以是css文件或图片等资源。 webpack,我们可以认为也是转载 2017-03-02 16:20:40 · 656 阅读 · 0 评论 -
vue-router: 路由传参
路由传参数。在很多时候我们需要路由上面传递参数,比如新闻列表页,我们需要传递新闻ID,给新闻详细页。 1.新闻列表页模板 template id="news"> div> h2>新闻列表h2> ul> li> router-link to="/new转载 2017-03-02 16:13:44 · 908 阅读 · 0 评论 -
Vue.js系列之项目搭建(1)
说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题。 本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正。欢迎大家批评指出错误。今天要讲讲Vue2.0了。最近将公司App3转载 2017-02-24 15:23:07 · 573 阅读 · 0 评论 -
Vue.js系列之项目结构说明(2)
说明: 我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题。 本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正。欢迎大家批评指出错误。以下是已完成的文章列表。 1.Vue.js系列之项目转载 2017-02-24 16:30:17 · 1209 阅读 · 0 评论 -
VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址
VUE 利用 webpack 给生产环境和发布环境配置不同的接口地址前言我们在开发项目的时候,往往会在同一个局域网进行开发,前后端分离同时进行开发。我们前端调用后端给的接口也是在局域网内部的。但是,当项目推到线上的时候,我们会从真实服务器上获取接口,因此,我们可能在测试接口和真实接口之间频繁切换,让人十分恶心。因此,我们有必要想办法解决这个问题。本文是 Vue2转载 2017-02-27 17:50:05 · 39866 阅读 · 5 评论 -
Vue2+VueRouter2+webpack 构建项目实战(六)修复代码并通过验证,另发布代码
Vue2+VueRouter2+webpack 构建项目实战(六)修复代码并通过验证,另发布代码前言去年11月份写了一系列教程。但是当时的代码并不能通过验证。我现在已经完全适应了这种能够通过验证的编码规范,并且写了一篇博文,如何Atom 编辑器安装 linter-eslint 插件,并配置使其支持 vue 文件中的 js 格式校验。让自己的编辑器可以随时提醒自己代码的规范格式。转载 2017-02-27 17:47:33 · 722 阅读 · 0 评论 -
Vue2+VueRouter2+webpack 构建项目实战(五)配置子路由
Vue2+VueRouter2+webpack 构建项目实战(五)配置子路由前情回顾《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》《Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构》《Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先》《Vue2+VueRo转载 2017-02-27 17:41:29 · 693 阅读 · 0 评论 -
Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表
Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表目录索引《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》《Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构》《Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先》《Vue转载 2017-02-27 17:10:39 · 429 阅读 · 0 评论 -
Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先
Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先目录索引《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》《Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构》《Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先》《Vue2+转载 2017-02-27 16:46:24 · 510 阅读 · 0 评论 -
Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构
Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构目录索引《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》《Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构》《Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先》《Vue2+Vu转载 2017-02-27 16:14:40 · 1068 阅读 · 0 评论 -
Vue2+VueRouter2+webpack 构建项目实战(一)准备工作
Vue2+VueRouter2+webpack 构建项目实战(一)准备工作目录索引《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》《Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构》《Vue2+VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先》《Vue2+VueRou转载 2017-02-27 14:57:45 · 626 阅读 · 0 评论 -
Vue.js系列之vue-router(上)(3)
说明:我们项目现在用的是:vue2.0 + vue-cli + webpack + vue-router2.0 + vue-resource1.0.3 如果大家在实践的过程中与本文所说的内容有较大区别的话看看是不是版本问题。本文是一系列文章,在我对Vue有了更深刻的理解认识之后会对文章及时进行修改或更正。欢迎大家批评指出错误。以下是已完成的文章列表。 1.Vue.j转载 2017-02-24 16:36:39 · 1566 阅读 · 2 评论 -
vue-router: 嵌套路由
模板抽离我们已经学习过了Vue模板的另外定义形式,使用。 template id="home"> div>首页div> template> template id="news"> div>新闻div> template>1234567812345678然后js里定义路由组件的时候: //转载 2017-03-02 16:12:54 · 2116 阅读 · 0 评论 -
vue-router路由的基础使用
文档:http://router.vuejs.org/zh-cn/html>head> title>title> meta charset="utf-8"> script src="http://unpkg.com/vue/dist/vue.js">script> script src="https://unpkg.com/vue-router/dist/v转载 2017-03-02 16:11:04 · 1491 阅读 · 0 评论 -
元素的隐藏和显示(v-show指令)
除了click单击事件,还有mouseover,mouseover等鼠标事件。 dbclick双击事件。v-on:click/mouseover/mouseover/mousedown/dbclick/...11v-show指令v-show="true/false" 控制元素显示/隐藏11示例代码:html>head> title>title>转载 2017-03-01 16:36:00 · 1035 阅读 · 0 评论 -
点击事件(v-on:click)
点击事件v-on:clickhtml>head> title>title> meta charset="utf-8"> script src="http://unpkg.com/vue/dist/vue.js">script> script type="text/javascript"> window.onload = function()转载 2017-03-01 16:35:08 · 2555 阅读 · 0 评论 -
v-model和v-for指令
http://cn.vuejs.org/v2/guide/ 1.基本雏形html>head> title>title> script src="https://unpkg.com/vue/dist/vue.js">script> script type="text/javascript"> window.onload = function(){转载 2017-03-01 16:21:26 · 1108 阅读 · 0 评论 -
Vue-cli是何物?创建项目脚手架
介绍Vue-cli是Vue的脚手架工具主要作用:目录结构、本地调试、代码部署、热加载、单元测试地址:https://github.com/vuejs/vue-cli安装安装Vue-clinpm install -g vue-cli11安装成功之后,可以执行vue list 命令查看: 举例出了我们可以用的哪些模板。然后我转载 2017-03-01 15:48:17 · 2106 阅读 · 0 评论 -
Vue.js UI框架 - element
Vue.js UI框架 - element文档:http://element.eleme.io/#/zh-CN/component/installation安装:npm i element-ui -D配置:http://element.eleme.io/#/zh-CN/component/quickstart引入:import ElementUI转载 2017-03-01 14:54:46 · 8955 阅读 · 0 评论 -
ElementUI案例演示:导航、布局、加载动画
1转载 2017-03-01 14:53:39 · 4731 阅读 · 0 评论 -
vue-resource插件使用
本文的主要内容如下:介绍vue-resource的特点介绍vue-resource的基本使用方法基于this.$http的增删查改示例基于this.$resource的增删查改示例基于inteceptor实现请求等待时的loading画面基于inteceptor实现请求错误时的提示画面本文11个示例的源码已放到GitHub,如果您觉得本篇内容不错,请点个赞,或在GitHub上加个星转载 2017-02-28 17:42:41 · 611 阅读 · 0 评论 -
[译] SuperAgent中文使用文档
题外话superagent是nodejs里一个非常方便的客户端请求代理模块,当你想处理get,post,put,delete,head请求时,你就应该想起该用它了:)SuperAgentsuperagent 是一个轻量的,渐进式的ajax api,可读性好,学习曲线低,内部依赖nodejs原生的请求api,适用于nodejs环境下.一个简单的post请求,并设置请求转载 2017-02-28 09:39:37 · 3269 阅读 · 0 评论 -
事件对象(event)、事件冒泡、默认行为
1.点击事件的event(事件对象) div id="box"> input type="button" value="按钮" @click="show($event)"> div>123123 var vm = new Vue({ el:'#box', methods:{转载 2017-03-01 16:41:48 · 373 阅读 · 0 评论 -
键盘事件
html>head> title>title> meta charset="utf-8"> script src="http://unpkg.com/vue/dist/vue.js">script> script type="text/javascript"> window.onload = function(){ var转载 2017-03-01 16:43:14 · 383 阅读 · 0 评论 -
Vue过渡(动画)- transition组件
Vue过度(动画),本质走的是CSS3:transtion,animation。控制器div显示/隐藏,代码如下: div id="box"> input type="button" value="按钮" @click="toggle"> div id="div1" v-show="isShow">div> div> script转载 2017-03-02 11:09:53 · 660 阅读 · 0 评论 -
Vue自定义指令
除了核心指令(v-model和v-for)等外,Vue也允许我们自定义指令。 "box"> span v-text="msg">span> div> script type="text/javascript"> var vm = new Vue({ data:{ msg:'hello'转载 2017-03-02 09:58:16 · 2347 阅读 · 0 评论 -
Vue实例的一些简单方法
html>head> title>title> meta charset="utf-8"> script src="http://unpkg.com/vue/dist/vue.js">script>head>body> div id="box"> {{a}} div> script type="text/javascript"转载 2017-03-02 09:44:08 · 1019 阅读 · 0 评论 -
计算属性(computed)
需求:数据msg值为Hello,我们现在需要反向显示成olleH。 方式1:模板中绑定表达式 div id="box"> {{msg}} hr> {{ msg.split('').reverse().join('') }} div> script type="text/javascript"> new V转载 2017-03-02 09:20:08 · 3149 阅读 · 0 评论 -
Vue的生命周期
http://cn.vuejs.org/v2/guide/instance.html#实例生命周期Vue实例(new出来)在被创建之前要经过一系列初始化过程,在这个过程中,实例也会调用一些生命周期钩子。 例如:created这个钩子在实例被创建之后就会自动调用:html>head> title>title> meta charset="utf-8"> s转载 2017-03-01 18:39:45 · 670 阅读 · 0 评论 -
vue与后端数据交互(ajax):vue-resource
必须引入一个库:vue-resource1.获取普通文本数据 比如:a.txt:welcomet to vue!!!11html>head> title>title> meta charset="utf-8"> script src="http://unpkg.com/vue/dist/vue.js">script> script src="ht转载 2017-03-01 18:27:15 · 9370 阅读 · 0 评论 -
过滤器filters
http://cn.vuejs.org/v2/guide/syntax.html#Filters Vue.js 允许你自定义过滤器,被用作一些常见的文本格式化。 系统提供了一些过滤器html>head> title>title> meta charset="utf-8"> script src="http://unpkg.com/vue/dist/vue.j转载 2017-03-01 16:55:30 · 465 阅读 · 0 评论 -
Class和Style绑定
Vue的属性html>head> title>title> meta charset="utf-8"> script src="http://unpkg.com/vue/dist/vue.js">script> script type="text/javascript"> window.onload = function(){转载 2017-03-01 16:48:53 · 560 阅读 · 0 评论 -
让webpack+vue-cil项目不再自动打开浏览器
让webpack+vue-cil项目不再自动打开浏览器当我们用vue-cil建立一个完整的webpack+vue的项目之后,它的设置选项还是蛮多的。比如,当我们输入npm run dev开始跑起项目之后,就会自动的打开浏览器,并把页面打开。按理说,这是一个很方便的配置。问题是,我们在调试的过程中,可能需要不断的重启项目。每一次重启,就会开一个网页,让我非常头疼。查看了一转载 2017-02-27 17:55:37 · 4050 阅读 · 0 评论