Vue
文章平均质量分 70
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。而本专栏则从Vue最基础层面开始讲起,从简单的Vue的MVVM到Vue与后台的交互,到Vue的打包与发布,详细讲解Vue的整个开发流程。
张侦毅
The Minute You Think Of Giving Up, Think Of The Reason Why You Held On So Long.
展开
-
webpack打包vue-router
文章目录webpack打包vue-router示例源码运行结果webpack打包vue-router 在项目中加载vue-router依赖指令如下:cnpm i vue-router --save 这篇文章是在之前的一篇文章的源码基础上拆分而来的,所以说我们可以通过这篇文章和之前的文章做一下相应的对比,这样可以加深我们对其的了解。 之前的那篇文章如下:Vue中路由的传参...原创 2018-11-11 00:26:40 · 1236 阅读 · 0 评论 -
webpack解析和打包.vue组件页面
文章目录解析和打包.vue组件页面示例源码运行结果分析解析和打包.vue组件页面 Vue中的每个页面其实都是一个.vue的文件,这种文件,Vue称之为组件页面,其必须借助于webpack的vue-loader才能使用。 所需依赖vue: vue js核心包vue-loader: .vue文件编译loadervue-template-compiler:.vue模版编译,被vue-l...原创 2018-11-10 23:06:39 · 2527 阅读 · 0 评论 -
将ECMAScript6语法转换成ECMAScript5语法
文章目录将ECMAScript6语法转换成ECMAScript5语法转换原因所需依赖修改源码运行结果将ECMAScript6语法转换成ECMAScript5语法转换原因 由于并不是所有的浏览器都支持es6语法,但是基本上都支持es5语法,因而我们的项目在上线时有时需要将开发过程中的es6语法转换成es5语法发布,而这就是我写这篇文章的目的。 这篇文章是在上一篇文章的源码基础上进行修改的...原创 2018-11-10 18:11:10 · 1382 阅读 · 0 评论 -
webpack-dev-server实现项目热部署
文章目录webpack-dev-server作用修改源码webpack-dev-server作用 我们在修改了项目代码以后需要不断的重新执行webpack命令,重新打包然后回到浏览器去刷新页面,这种开发效率很低下,所以说为了省去这部分没必要的操作,因而我们在这里要使用webpack-dev-server来实现当代码更新时项目的自动打包发布,刷新浏览器页面的操作。 这一篇文章是在上一篇文章...原创 2018-11-10 17:09:10 · 2651 阅读 · 0 评论 -
利用webpack打包其它资源文件
文章目录打包sass文件项目结构修改源码运行结果打包less文件修改源码运行结果 webpack除了能够打包css资源文件外,其还可以打包众多的其它类型的文件。 这里为了减少重复代码的编写,所以说此处是在上一篇文章中代码的基础上所做的修改,上一篇文章的地址如下:利用webpack中的loader来打包css文件打包sass文件 webpack中使用sass-loader,css...原创 2018-11-09 22:01:38 · 1317 阅读 · 0 评论 -
利用webpack中的loader来打包css文件
loader介绍 webpack本身不支持css,less,sass,js,image等相关资源的打包工作,它仅仅提供了一个基础的框架,在这个框架上借助于相关的loader才可以实现css,less,sass,js,image等相关资源的打包工作。package.jsonpackage.json特点 package.json是Node.js的包管理文件,其在其中起到的作用类似于pom....原创 2018-11-09 16:03:26 · 1034 阅读 · 0 评论 -
webpack中webpack.config.js的使用
文章目录webpack.config.js的作用:示例源码运行结果分析webpack.config.js的作用: webpack.config.js是webpack打包的默认配置文件,其默认位于项目的根目录中。 比如说如果我们在控制台中输入webpack指令,后面不跟任何参数的话,则webpack默认查找位于根目录中的webpack.config.js文件,并根据该文件加载与执行相应的依...原创 2018-11-09 11:21:28 · 4342 阅读 · 0 评论 -
webpack的HelloWorld
文章目录webpack的语法示例源码运行结果分析webpack的语法 webpack的基本用法:webpack + 所需打包的文件名 + 打包后的文件名 比如说我们所打包的源文件名为main.js而其打包后的名为build.js,所以说其打包指令为:webpack main.js build.js示例 这里以简单的实现一个计算器为例来进行说明。 在项目根目录中,拷贝下面...原创 2018-11-09 10:23:00 · 247 阅读 · 0 评论 -
webpack
文章目录webpack介绍webpack官网webpack资源链接webpack官网示例安装webpack当前使用的版本安装环境搭建安装Node.js安装nrm——国内淘宝镜像源安装webpackwebpack介绍 webpack是一个资源的打包工具,可以将.js,.css,.image等静态资源当做一个模块来进行打包,那么每一种模块都有一个对应的loader来实现。webpack官网...原创 2018-11-09 09:15:33 · 248 阅读 · 0 评论 -
Vue的watch属性监控
文章目录示例监听data中属性的变化源码结果分析监听路由中的属性变化源码结果分析 watch可以用来监控程序员想要监控的对象,当这些对象发生改变以后,可以触发回调函数做一些逻辑处理。示例监听data中属性的变化源码<!DOCTYPE html><html lang="en"><head> &am原创 2018-11-08 10:03:48 · 740 阅读 · 0 评论 -
Vue中的computed计算属性
文章目录computed与watch的异同不同点相同点示例源码结果分析computed与watch的异同不同点触发条件不同 computed计算属性会依赖于使用它的data属性,只要是依赖的data属性值有变动,则自定义重新调用计算属性执行一次。 watch则是在监控的data属性值发生变动时,其会自动调用watch回调函数。执行速度不同 computed计算属性的值是...原创 2018-11-08 11:09:19 · 17543 阅读 · 0 评论 -
Vue中路由的传参
文章目录示例源码结果分析 在项目开发中,需要用到路由传参的地方往往很多,比如说根据新闻列表页面查询新闻详情,此时我们就需要将该条新闻的id信息传递给新闻详情页面。 而在vue-router中,传参所用的关键字为query,其后跟参数map对象。示例源码<!DOCTYPE html><html lang="en"><head&原创 2018-11-07 17:26:41 · 421 阅读 · 0 评论 -
Vue中路由的嵌套与重定向
文章目录路由的嵌套与重定向为什么要使用路由的嵌套为什么要使用路由的重定向用法示例源码结果分析路由的嵌套与重定向为什么要使用路由的嵌套 随着路由页面的增多,我们经常会用到页面嵌套的情况。比如说新闻模块路径为/news,新闻列表为/news/newslist,新闻详情为/news/newslist/newsinfo,新闻详情的评论为/news/newslist/newsinfo/newscom...原创 2018-11-07 16:52:53 · 3722 阅读 · 0 评论 -
Vue2.0的使用
文章目录为什么抛弃1.0版本软件版本更新前更新后示例源码运行结果分析为什么抛弃1.0版本 之前使用的Vue版本为v1.0.20而对其支持的比较好的Vue Devtools版本也往往不是最新版,比如说之前我在调试Vue的1.0版本时使用的Vue Devtools版本号为3.1.6,但是在GitHub上我们下载并安装的Vue Devtools其实已经摒弃了1.0版本,因而我们在使用新版本的Vue...原创 2018-11-06 14:21:09 · 310 阅读 · 0 评论 -
Vue Devtools的安装与使用
文章目录 Vue Devtools是Vue代码的浏览器调试插件。原创 2018-11-06 13:04:09 · 711 阅读 · 0 评论 -
Vue中的vue-router
文章目录官网vue-router的使用源码结果分析作用: 在一个系统中往往会有很多的页面组成,在Vue开发中,这些页面通常使用的是Vue中的组件来实现的。 当一个页面跳转到另一个页面时,其是通过改变url路径来实现的,那么这个时候Vue就需要知道当前url对应的是哪个组件页面,而控制这个的就是vue-router控件。官网 vue-router的官网GitHub地址为:vu...原创 2018-11-04 17:31:25 · 374 阅读 · 0 评论 -
Vue中的v-el与v-ref
v-el作用: 通过v-el我们可以获取到DOM对象。v-ref作用: 通过v-ref获取到整个组件(component)的对象。示例源码<!DOCTYPE html><html lang="en" xmlns:v-el="http://www.w3.org/1999/xhtml"><head> <meta char...原创 2018-11-04 16:20:01 · 9859 阅读 · 0 评论 -
Vue中组件的切换
文章目录示例源码结果分析 此处的组件切换使用的是Vue中的component组件中的is属性来实现的。该is属性实现的功能是根据组件名称的不同来切换显示不同的组件控件。示例源码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title&am原创 2018-11-04 15:36:54 · 5404 阅读 · 0 评论 -
Vue中在父组件中定义子组件与父子组件间传值
文章目录在父组件中定义子组件示例源码结果分析父组件向子组件传值示例源码结果分析子组件向父组件传值示例源码:结果分析在父组件中定义子组件 我们除了定义独立的组件之外,Vue还支持在父组件中定义子组件。示例源码&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt原创 2018-11-03 17:24:11 · 925 阅读 · 0 评论 -
Vue中组件的定义与注册
文章目录组件的用法先定义,后注册同时定义并注册组件使用HTML模版template使用HTML模版script源码结果作用: 组件,是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。组件的用法 组件一共有四种用法,分别是下面四种情况。先定义,后注册 这种方法的组件一共分为两步,第一步先定义一个组件,第二部再使用该定义的组件。 定义组件:ar d...原创 2018-11-03 15:45:19 · 689 阅读 · 0 评论 -
vue-resource中的jsonp跨域请求
文章目录jsonp的用法jsonp跨域原理示例源码运行结果分析jsonp的用法 jsonp请求主要是用来解决ajax跨域请求问题,使用jsonp实现跨域首先要保证服务器api支持jsonp请求的格式。 写法格式:this.$http.jsonp('url',[可选参数,使用{}传参]).then(成功回调函数,失败回调函数);jsonp跨域原理 由于当前页面所在的域名为http...原创 2018-11-03 14:55:58 · 4079 阅读 · 0 评论 -
Vue请求JSON Server服务器数据
这里就是内容。。。。原创 2018-11-02 11:40:15 · 1586 阅读 · 0 评论 -
JSON Server利用faker与lodash生成我们所需要的大数据
文章目录安装faker和lodash创建generate.js源码分析启动并查看项目 在我们会使用JSON Server之后,虽然我们能够使用json文件数据来模拟后台的数据请求操作,但是我们还往往会出现另一个问题,那就是“巧妇难为无米之炊”,假如说没有大量的数据,有时是很难真实的模拟后端数据的请求操作的,正因为如此,我们才需要让JSON Server来帮助我们生成所需要的大数据。 而这里...原创 2018-11-01 15:24:34 · 665 阅读 · 0 评论 -
使用WebStorm的REST Client操作JSON Server
文章目录创建`db.json`使用WebStorm的REST Client操作JSON Server数据查询插入数据修改数据删除操作生成数据存储快照创建db.json 在我们使用JSON Server时非常简单,只需要在项目根目录中创建一个独立的db.json文件即可。其源码如下:{ &quot;people&quot;:[ { &quot;id&quot;:0 ,&quot原创 2018-11-01 11:39:20 · 2090 阅读 · 0 评论 -
JSON Server的安装与使用
文章目录官网地址:安装指令:官网示例 在我们以往的前端开发中,经常会用到向后台请求数据的操作,而后台并非每时每刻都能提供我们所使用的数据,比如说假如后台还没有编写好该前端调用所需要的后台api接口,实际上这是前后端在交互时经常会遭遇到的事情。而在眼下越来越火的前后端分离式的开发中,这种问题出现的概率往往更改,而这也成了其制约项目开发周期的一个很严重的瓶颈,而此时的JSON Server就是为了...原创 2018-11-01 10:25:03 · 2333 阅读 · 0 评论 -
Node.js安装nrm与——国内淘宝镜像源的使用
文章目录为什么要使用nrm安装nrm将nrm的镜像源切换成淘宝镜像源为什么要使用nrm 在我们使用Node.js时经常会遇到下载各种Node.js依赖的情况,而由于中国国内防火墙的存在,因而我们在从外网上下载各种依赖时不仅仅要面临各种十分耗时,费劲的情况,而且还往往会出现网络中断而导致的下载失败的情况,为了方便与Node.js下载各种依赖,这里我推荐大家安装nrm。安装nrm 在nrm...原创 2018-10-31 20:41:51 · 1439 阅读 · 0 评论 -
Node.js的下载与安装
资源链接Node.js中文网 Node.js中文网的官方地址如下:Node.js中文网 Node.js中文网的界面如下: 在这里我们可以方便的查看Node.js的中文文档,并且由于其服务器是在国内,所以浏览该网站也不会面临被墙的问题,可以说这相交于其它的诸如Java之类的已经很友善了。在这里同时还提供了前段社区,方便前端开发人员进行学习和交流。Node.js官网 Nod...原创 2018-10-31 18:01:50 · 1515 阅读 · 0 评论 -
Vue的生命周期
文章目录initcreatedbeforeCompilecompiledactivatereadyattacheddetachedbeforeDestroydestroyed示例源码html源码:get.json运行结果分析 在1.0版本中,Vue的生命周期一共有九个步骤,分别是:init、created、beforeCompile、compiled、activate、ready、attach...原创 2018-10-31 15:27:02 · 1109 阅读 · 0 评论 -
Vue中的vue-resource
文章目录版本:vue-router v0.7.13作用: Vue与后台Api进行交互通常是利用vue-resource来实现的,本质上vue-resource是通过http来完成AJAX请求相应的。原创 2018-10-30 21:37:24 · 771 阅读 · 0 评论 -
Vue中的其它自定义项
自定义按键修饰符用法: 在Vue的1.0.17+中默认的按键修饰符是存储在Vue.directive('on').keyCodes中,我们可以通过该方法自定义自己的按键修饰符. 例如我当将a定义为按键修饰符,写法如下:Vue.directive('on').keyCodes.A=65源码<!DOCTYPE html><html lang="en">...原创 2018-10-29 22:35:09 · 187 阅读 · 0 评论 -
Vue中的自定义过滤器
文章目录自定义私有过滤器自定义私有过滤器原创 2018-10-28 18:05:47 · 622 阅读 · 0 评论 -
Vue中的系统过滤器
Vue提供了一系列的固定逻辑来使程序员更加容易的实现这些功能,这些过滤器称之为系统过滤器,Vue也提供了一个接口用来提供程序员定义属于自己的特殊逻辑,Vue称之为自定义过滤器。...原创 2018-10-28 10:20:29 · 280 阅读 · 0 评论 -
Vue的v-for、v-if与v-show
文章目录`v-for`源码结果分析`v-if`源码结果分析`v-show`完整代码v-for作用:通常是根据数组中的元素遍历指定模板内容生成内容预期:Array | Object | Number | String参数属性track-bystaggerenter-staggerleave-stagger源码<!DOCTYPE html><html ...原创 2018-10-27 17:19:04 · 530 阅读 · 0 评论 -
Vue中的数据绑定
v-bind缩写::预期:any (with argument) | Object (without argument)参数:attrOrProp (optional)主要作用:可以给html元素或者组件动态地绑定一个或多个特性,例如动态绑定style和class官方举例:&amp;lt;!-- bind an attribute --&amp;gt;&amp;lt;img v-bind:src=&quot;原创 2018-10-26 18:46:04 · 2002 阅读 · 0 评论 -
vue中页面信息的展示
v-text v-text可以将一个变量的值渲染到指定的元素中。 用法:<span v-text="hello"></span>var vm = new Vue({ el:'#app' ,data:{ hello:'<h1>Hello World !</h1>' ...原创 2018-10-26 15:54:55 · 4742 阅读 · 1 评论 -
Vue的插值表达式
#Vue的插值表达式{{}} 主要作用是进行数据绑定,最常见的形式是使用“Mustache”语法(双大括号)的文本插值。例如:&lt;span&gt;Message:{{msg}}&lt;/span&gt;Mustache标签将会被替代为对应数据对象上msg属性(msg定义在data对象中)的值。无论何时,绑定的数据对象上msg属性发生了改变,插值处的内容都会更新。{{}}对JavaScri...原创 2018-10-25 21:26:20 · 12225 阅读 · 1 评论 -
Vue的v-on注册事件
v-on v-on主要是用于给页面的dom元素注册事件。简写为:@使用方法:Function | Inline Statement参数: event (required)使用场景:参数使用说明.stop调用event.stopPropagation().prevent调用event.preventDefault().capture在captu...原创 2018-10-25 20:36:02 · 838 阅读 · 0 评论 -
什么是Vue.js
Vue.js是什么 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。Vue.js的工作模式 Vue.js的工作模式...原创 2018-10-25 17:05:09 · 299 阅读 · 2 评论 -
解决WebStorm使用Vue-webpack卡顿问题
我们在使用Vue时,经常会遇到项目卡顿的情况,这主要是因为Vue的webpack打包时会生成一个node_modules模块,该模块内含至少上万个文件,因而往往会造成WebStorm出现卡顿的情况。 该问题的解决方法有这么几种:增大WebStorm的内存 WebStorm的内存参数修改地址文件所在位置为:..\bin\WebStorm.exe.vmoptions 该文件内容如...原创 2018-10-20 11:24:13 · 2333 阅读 · 0 评论