Vue.js 前端开发 快速入门与专业应用(txt+pdf+epub+mobi电子书下载)


发布时间:2020-08-01 08:26:50

点击下载

作者:陈陆扬

出版社:人民邮电出版社

格式: AZW3, DOCX, EPUB, MOBI, PDF, TXT

Vue.js 前端开发 快速入门与专业应用

Vue.js 前端开发 快速入门与专业应用试读:

前言

近年来,前端框架的发展依旧火热,新的框架和名词依旧不停地出现在开发者眼前,而且开发模式也产生了一定的变化。目前来看,前端MVVM框架的出现给开发者带来了不小的便利,其中的代表就有Angular.js、React.js以及本书中将要介绍的Vue.js。这些框架的产生使得开发者能从过去手动维护DOM状态的繁琐操作中解脱出来,尽可能地让DOM的更新操作是自动的,状态变化的时候就自动更新到正确的状态。不过,新框架的引入不可避免的就是学习成本的增加以及框架普及性的问题,相对于Angular.js和React.js而言,Vue.js的学习曲线则比较平稳。目前在GitHub上已经获得了超过30000的star,成为了时下无论从实用性还是普遍性来说都是可靠的MVVM框架选择之一。

首次听说Vue.js的时候,都是介绍说体积小、适合移动端、使用简单,等等。但一开始对于新框架我一直持观望态度,毕竟前端框架更新太快,而且这又是个个人项目,仅由作者尤雨溪一人维护,不像Angular.js和React.js那样有公司支持。后来为了解决一个移动端的项目,我才正式接触了Vue.js。由于项目本身天然存在组件这个概念,并且需要在手机上运行,调研后觉得应该没有比Vue.js更适合的工具了。在使用过程中,逐渐体会到了Vue.js的便利,数据绑定及组件系统对于提高开发效率和代码复用性来说都有相当大的帮助,并且初期对线上项目使用这种新框架的顾虑也渐渐消除了,即使随着后期复杂度的增加也并没有对项目的开发和维护成本造成影响。

本书主要从我自身的学习和开发经验出发,介绍了Vue.js的基础用法和特性,包括Vue.js的一些插件用法,用于解决客户端路由和大规模状态管理,以及打包发布等构建工具,便于正式用于线上环境。

最后,感谢Vue.js作者尤雨溪先生为前端开发者提供了这款优秀的框架,使得开发者能够更好地应对项目复杂度;也感谢人民邮电出版社的大力支持,写书的过程的确对人是一种折磨和考验;最后感谢每天早上4点多就开始叫我起床的两只猫,它们对本书的进度的确起到了很好的推动作用。第1章Vue.js简介

近几年,互联网前端行业发展得依旧迅猛,涌现出了很多优秀的框架,同时这些框架也正在逐渐改变我们传统的前端开发方式。Google的AngularJS、Facebook的ReactJS,这些前端MVC(MVVM)框架的出现和组件化开发的普及和规范化,既改变了原有的开发思维和方式,也使得前端开发者加快脚步,更新自己的知识结构。2014年2月,原Google员工尤雨溪公开发布了自己的前端库——Vue.js,时至今日,Vue.js在GitHub上已经收获超过30000star,而且也有越来越多的开发者在实际的生产环境中运用它。

本书主要以Vue.js 1.0.26版本为基准进行说明,Vue.js 2.0版本与之不同的地方,会在对应章节中说明。1.1 Vue.js是什么

单独来讲,Vue.js被定义成一个用来开发Web界面的前端库,是个非常轻量级的工具。Vue.js本身具有响应式编程和组件化的特点。

所谓响应式编程,即为保持状态和视图的同步,这个在大多数前端MV*(MVC/MVVM/MVW)框架,不管是早期的backbone.js还是现在AngularJS都对这一特性进行了实现(也称之为数据绑定),但这几者的实现方式和使用方式都不相同。相比而言,Vue.js使用起来更为简单,也无需引入太多的新概念,声明实例new Vue({ data : data })后自然对data里面的数据进行了视图上的绑定。修改data的数据,视图中对应数据也会随之更改。

Vue.js的组件化理念和ReactJS异曲同工——“一切都是组件”,可以将任意封装好的代码注册成标签,例如:Vue.component('example', Example),可以在模板中以的形式调用。如果组件抽象得合理,这在很大程度上能减少重复开发,而且配合Vue.js的周边工具vue-loader,我们可以将一个组件的CSS、HTML和js都写在一个文件里,做到模块化的开发。

除此之外,Vue.js也可以和一些周边工具配合起来,例如vue-router和vue-resource,支持了路由和异步请求,这样就满足了开发单页面应用的基本条件。1.2 为什么要用Vue.js

相比较Angularjs和ReactJS,Vue.js一直以轻量级,易上手被称道。MVVM的开发模式也使前端从原先的DOM操作中解放出来,我们不再需要在维护视图和数据的统一上花大量的时间,只需要关注于data的变化,代码变得更加容易维护。虽然社区和插件并没有一些老牌的开源项目那么丰富,但满足日常的开发是没有问题的。Vue.js 2.0也已经发布了beta版本,渲染层基于一个轻量级的 virtual-DOM 实现,在大多数场景下初始化渲染速度和内存消耗都提升了 2~4 倍。而阿里也开源了weex(可以理解成ReactJS-Native和ReacJS的关系),这也意味着Vue.js在移动端有了更多的可能性。

不过,对于为什么要选择使用一个框架,都需要建立在一定的项目基础上。如果脱离实际项目情况我们来谈某个框架的优劣,以及是否采用这种框架,我觉得是不够严谨的。

作为新兴的前端框架,Vue.js也抛弃了对IE8的支持,在移动端支持到Android 4.2+和iOS 7+。所以如果你在一家比较传统,还需要支持IE6的公司的话,你或许就可以考虑其他的解决方案了(或者说服你的老板)。另外,在传统的前后端混合(通过后端模板引擎渲染)的项目中,Vue.js也会受到一定的限制,Vue实例只能和后端模板文件混合在一起,获取的数据也需要依赖于后端的渲染,这在处理一些JSON对象和数组的时候会有些麻烦。

理想状态下,我们能直接在前后端分离的新项目中使用Vue.js最合适。这能最大程度上发挥Vue.js的优势和特性,熟悉后能极大的提升我们的开发效率以及代码的复用率。尤其是移动浏览器上,Vue.js压缩后只有18KB,而且没有其他的依赖。1.3 Vue.js的Hello world

现在来看一下我们第一个Vue.js项目,按照传统,我们来写一个Hello World。

首先,引入Vue.js的方式有很多,你可以采用直接使用CDN,例如:

也可以通过NPM进行安装:npm install vue // 最新稳定版本

正确引入Vue.js之后,我们在HTML文件中的内容为:

 

{{message}}

应用的js如下:var vm = new Vue({ el : '#app', data: {  message : 'Hello world, I am Vue.js' }});

输出结果为:

这种形式类似于前端模板引擎,我们把js中message值替换了HTML模板中{{message}}这部分。

不过,如果仅仅是这样的例子,我相信你也不会有什么兴趣去使用Vue.js。根据上文对Vue.js的说明,我们继续写两个有关于它特性的例子。

第一个特性是数据绑定,我们可以在运行上述例子的浏览器控制台(console)环境中输入vm.message = 'Hello Vue.js',输出结果就变为了Hello Vue.js。也就说明vm.message和视图中的{{message}}是绑定的,我们无需手动去获取

标签来修改里面的innerHTML。

同样,我们也可以绑定用户输入的数据,视图会随着用户的输入而变化,例如:

 

Your input is {{ message }}

 

vm.message的值会随着用户在input中输入的值的变化而变化,而无需我们手动去获取DOM元素的值再同步到js中。

第二个特性是组件化,简单来说我们可以自己定义HTML标签,并在模板中使用它,例如:

 
 

我们在浏览器里最终看到的HTML结果为:

可以看到自定义的标签被替换成了

Hello World

,当然,实际中的组件化远比示例复杂,我们会给组件添加参数及方法,使之能更好地被复用。

如果说这几个例子引起了你对Vue.js的兴趣的话,那接下来我们就会详细地说明它的基础用法和应用场景,以及最终我们如何将它真实地运用到生产环境中。第2章基础特性

其实,无论前端框架如何变化,它需要处理的事情依旧是模板渲染、事件绑定、处理用户交互(输入信息或鼠标操作),只不过提供了不同的写法和理念。Vue.js则会通过声明一个实例new Vue({…})标记当前页面的HTML结构、数据的展示及相关事件的绑定。本章主要介绍Vue.js的构造函数的选项对象及用法,以及如何通过Vue.js来实现上述的常规前端功能。2.1 实例及选项

从以前的例子可以看出,Vue.js的使用都是通过构造函数Vue({option})创建一个Vue的实例:var vm = new Vue({})。一个Vue实例相当于一个MVVM模式中的ViewModel,如图2-1所示。图2-1

在实例化的时候,我们可以传入一个选项对象,包含数据、模板、挂载元素、方法、生命周期钩子等选项。下面就对一些常用的选项对象属性进行具体的说明。2.1.1 模板

选项中主要影响模板或DOM的选项有el和template,属性replace和template需要一起使用。

el:类型为字符串,DOM元素或函数。其作用是为实例提供挂载元素。一般来说我们会使用css选择符,或者原生的DOM元素。例如el:'#app'。在初始项中指定了el,实例将立即进入编译过程。

template:类型为字符串。默认会将template值替换挂载元素(即el值对应的元素),并合并挂载元素和模板根节点的属性(如果属性具有唯一性,类似id,则以模板根节点为准)。如果replace为false,模板template的值将插入挂载元素内。通过template插入模板的时候,挂载元素的内容都将被互联,除非使用slot进行分发(有关slot内容将在第6章组件中介绍)。在使用template时,我们往往不会把所有的HTML字符串直接写在js里面,这样影响可读性而且也不利于维护。所以经常用'#tpl'的方式赋值,并且在body内容添加

最终输出HTML结构为:

Vue.js 2.0 中废除了replace这个参数,并且强制要求每一个Vue.js实例需要有一个根元素,即不允许组件模板为:

这样的兄弟节点为根节点的模板形式,需要改写成:2.1.2 数据

Vue.js实例中可以通过data属性定义数据,这些数据可以在实例对应的模板中进行绑定并使用。需要注意的是,如果传入data的是一个对象,Vue实例会代理起data对象里的所有属性,而不会对传入的对象进行深拷贝。另外,我们也可以引用Vue实例vm中的$data来获取声明的数据,例如:var data = { a: 1 }var vm = new Vue({ data: data})vm.$data === data // -> truevm.a === data.a // -> true// 设置属性也会影响到原始数据vm.a = 2data.a // -> 2// 反之亦然data.a = 3vm.a // -> 3

然后在模板中使用{{a}}就会输出vm.a的值,并且修改vm.a的值,模板中的值会随之改变,我们也会称这个数据为响应式(responsive)数据(具体的用法和特性会在第2.2节的数据绑定中说明)。

需要注意的是,只有初始化时传入的对象才是响应式的,即在声明完实例后,再加上一句vm.$data.b = '2',并在模板中使用{{b}},这时是不会输出字符串'2'的。例如:

 

{{a}}

 

{{b}}

var vm = new Vue({  el : '#app',  data : {   a : 1  }});vm.$data.b = 2;

如果需要在实例化之后加入响应式变量,需要调用实例方法$set, 例如:vm.$set('b', 2);

不过Vue.js并不推荐这么做,这样会抛出一个异常:

所以,我们应尽量在初始化的时候,把所有的变量都设定好,如果没有值,也可以用undefined或null占位。

另外,组件类型的实例可以通过props获取数据,同data一样,也需要在初始化时预设好。示例:var myComponent = Vue.component('my-component', {  props : ['title', 'content'],  template : '

{{title}}

{{content}}

'})

我们也可以在上述组件类型实例中同时使用data,但有两个地方需要注意:① data的值必须是一个函数,并且返回值不是原始对象。如果传给组件的data是一个原始对象的话,则在建立多个组件实例时它们就会共用这个data对象,修改其中一个组件实例的数据就会影响到其他组件实例的数据,这显然不是我们所期望的。② data中的属性和props中的不能重名。这两者均会抛出异常:

所以正确的使用方法如下:var MyComponent = Vue.component('my-component', {  props : ['title', 'content'],  data : function() {   return {    desc : '123'   }  },  template : '

\   

{{title}}

\   

{{content}}

\   

{{desc}}

\  
'})2.1.3 方法

我们可以通过选项属性methods对象来定义方法,并且使用v-on指令来监听DOM事件,例如:alert

new Vue({ el : '#app', data : { a : 1}, methods : {  alert : function() {    alert(this.a);   }  }});

另外,Vue.js实例也支持自定义事件,可以在初始化时传入events对象,通过实例的$emit方法进行触发。这套通信机制常用在组件间相互通信的情况中,例如子组件冒泡触发父组件事件方法,或者父组件广播某个事件,子组件对其进行监听等。这里先简单说明下用法,详细的情况将会在第6章组件中进行说明。var vm = new Vue({ el : '#app', data : data, events : {  'event.alert' : function() {   alert('this is event alert :' + this.a);   }  }});vm.$emit('event.alert');

而Vue.js 2.0 中废弃了events选项属性,不再支持事件广播这类特性,推荐直接使用Vue实例的全局方法$on()/$emit(),或者使用插件Vuex来处理。2.1.4 生命周期

Vue.js实例在创建时有一系列的初始化步骤,例如建立数据观察,编译模板,创建数据绑定等。在此过程中,我们可以通过一些定义好的生命周期钩子函数来运行业务逻辑。例如:var vm = new Vue({ data: {  a: 1 }, created: function () {  console.log('created') }})

运行上述例子时,浏览器console中就会打印出created。

下图是实例的生命周期,可以根据提供的生命周期钩子说明Vue.js实例各个阶段的情况,Vue.js 2.0对不少钩子进行了修改,以下一并说明。

Vue.js 实例生命周期(原图出自于Vue.js官网),如图2-2所示。图2-2

init: 在实例开始初始化时同步调用。此时数据观测、事件等都尚未初始化。2.0中更名为beforeCreate。

created:在实例创建之后调用。此时已完成数据绑定、事件方法,但尚未开始DOM编译,即未挂载到document中。

beforeCompile: 在DOM编译前调用。2.0废弃了该方法,推荐使用created。

beforeMount: 2.0新增的生命周期钩子,在mounted之前运行。

compiled: 在编译结束时调用。此时所有指令已生效,数据变化已能触发DOM更新,但不保证$el已插入文档。2.0中更名为mounted。

ready:在编译结束和$el第一次插入文档之后调用。2.0废弃了该方法,推荐使用mounted。这个变化其实已经改变了ready这个生命周期状态,相当于取消了在$el首次插入文档后的钩子函数。

attached:在vm.$el插入DOM时调用,ready会在第一次attached后调用。操作$el必须使用指令或实例方法(例如$appendTo()),直接操作vm.$el不会触发这个钩子。2.0废弃了该方法,推荐在其他钩子中自定义方法检查是否已挂载。

detached: 同attached类似,该钩子在vm.$el从DOM删除时调用,而且必须是指令或实例方法。2.0中同样废弃了该方法。

beforeDestroy: 在开始销毁实例时调用,此刻实例仍然有效。

destroyed: 在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑,子实例也被销毁。

beforeUpdate: 2.0新增的生命周期钩子,在实例挂载之后,再次更新实例(例如更新data)时会调用该方法,此时尚未更新DOM结构。

updated:2.0新增的生命周期钩子,在实例挂载之后,再次更新实例并更新完DOM结构后调用。

activated:2.0新增的生命周期钩子,需要配合动态组件keep-live属性使用。在动态组件初始化渲染的过程中调用该方法。

deactivated:2.0新增的生命周期钩子,需要配合动态组件keep-live属性使用。在动态组件移出的过程中调用该方法。

可以通过写一个简单的demo来更清楚地了解内部的运行机制,代码如下:var vm = new Vue({ el : '#app', init: function() {  console.log('init'); }, created: function() {  console.log('created'); }, beforeCompile: function() {  console.log('beforeCompile'); }, compiled: function() {  console.log('compiled'); }, attached: function() {  console.log('attached'); }, dettached: function() {  console.log('dettached'); }, beforeDestroy: function() {  console.log('beforeDestroy'); }, destroyed: function() {  console.log('destroyed'); }, ready: function() {  console.log('ready');  // 组件完成后调用$destory()函数,进行销毁  this.$destroy(); }});

输出结果为:2.2 数据绑定

Vue.js 作为数据驱动视图的框架,我们首先要知道的就是如何将数据在视图中展示出来,传统的Web项目中,这一过程往往是通过后端模板引擎来进行数据和视图的渲染,例如PHP的smarty,Java的velocity和freemarker。但这样导致的情况是前后端语法会交杂在一起,前端HTML文件中需要包含后端模板引擎的语法,而且渲染完成后如果需要再次修改视图,就只能通过获取DOM的方法进行修改,并手动维持数据和视图的一致。而Vue.js的核心是一个响应式的数据绑定系统,建立绑定后,DOM将和数据保持同步,这样就无需手动维护DOM,使代码能够更加简洁易懂、提升效率。2.2.1 数据绑定语法

本小节主要介绍Vue.js的数据绑定语法,出现的例子会基于以下js代码:var vm = new Vue({  el : '#app',  data: {   id : 1,   index : 0,   name : 'Vue',   avatar : 'http://……'   count : [1, 2, 3, 4, 5],   names : ['Vue1.0', 'Vue2.0'],   items : [    { name : 'Vue1.0', version : '1.0' },    { name : 'Vue1.1', version : '1.0' }   ]  }});1.文本插值

数据绑定最基础的形式就是文本插值,使用的是双大括号标签{{}},为“Mustache”语法(源自前端模板引擎Mustache.js),示例如下:Hello {{ name }} // -> Hello Vue

Vue.js实例vm中name属性的值将会替换Mustache标签中的name,并且修改数据对象中的name属性,DOM也会随之更新。在浏览器console中运行 vm.name = 'Vue 1.0', 输出结果为Hello Vue 1.0。

模板语法同时也支持单次插值,即首次赋值后再更改vm实例属性值不会引起DOM变化, 例如以下模板在运行vm.name = 'Vue 1.0'后,依旧会输出Hello Vue:Hello {{* name }} // -> Hello Vue

Vue.js 2.0去除了{{*}}这种写法,采用v-once代替。以上模板需要改写为{{name}}。2.HTML属性

Mustache标签也同样适用于HTML属性中,例如:

 //

Vue.js 2.0 中废弃了这种写法,用v-bind指令代替,

代替,或简写为
3.绑定表达式

放在 Mustache 标签内的文本内容称为绑定表达式。除了直接输出属性值之外,一段绑定表达式可以由一个简单的 JavaScript 表达式和可选的一个或多个过滤器构成。例如:{{ index + 1 }} // 1{{ index == 0 ? 'a' : 'b'}} // a{{ name.split('').join('|') }} // V|u|e

每个绑定中只能包含单个表达式,并不支持JavaScript语句,否则Vue.js就会抛出warning异常。并且绑定表达式里不支持正则表达式,如果需要进行复杂的转换,可以使用过滤器或者计算属性来进行处理,以下的例子即为无效的表达式:{{ var a = 1 }}  // 无效{{ if (ok) { return name } }} // 无效,但可以写成 ok ? name : '' 或者 ok && name这样的写法

Vue.js 绑定表达式warning:4.过滤器

Vue.js 允许在表达式后添加可选的过滤器,以管道符“|”指示。示例:{{ name | uppercase }} // VUE

Vue.js 将name的值传入给uppercase这个内置的过滤器中(本质是一个函数),返回字符串的大写值。同时也允许多个过滤器链式使用,例如:{{ name | filterA | filterB }}

也允许传入多个参数,例如:{{ name | filterA arg1 arg2}}

此时,filterA将name的值做为第一个参数,arg1,arg2做为第二、第三个参数传入过滤器函数中。最终函数的返回值即为输出结果。arg1,arg2可以使用表达式,也可以加上单引号,直接传入字符串。例如:{{ name.split('') | limitBy 3 1 }} // ->u,e

过滤器limitBy可以接受两个参数,第一个参数是设置显示个数,第二个参数为可选,指从开始元素的数组下标。

Vue.js 内置了10个过滤器,下面简单介绍它们的功能和用法。

① capitalize:字符串首字符转化成大写

② uppercase:字符串转化成大写

③ lowercase:字符串转化成小写

④ currency 参数为{String}[货币符号] ,{Number} [小数位],将数字转化成货币符号,并且会自动添加数字分节号。例如:{{ amount | currency '¥' 2 }} // -> 若amount值为10000,则输出¥10,000.00

⑤ pluralize 参数为{String} single, [double, triple],字符串复数化。如果接收的是一个参数,那复数形式就是在字符串末尾直接加一个“s”。如果接收多个参数,则会被当成数组处理,字符串会添加对应数组下标的值。如果字符串的个数多于参数个数,多出部分会都添加最后一个参数的值。例如:

{{ c | pluralize 'item' }}  {{ c | pluralize 'st' 'nd' 'rd' 'th' }}

输出结果:

⑥ json 参数为{Number}[indent]空格缩进数,与JSON.stringify()作用相同,将json对象数据输出成符合json格式的字符串。

⑦ debounce 传入值必须是函数,参数可选,为{Number}[wait],即延时时长。作用是当调用函数n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间。例如: // input元素上监听了keyup事件,并且延迟500ms触发

⑧ limitBy 传入值必须是数组,参数为{Number}limit,{Number}[offset], limit为显示个数,offset为开始显示数组下标。例如:

 // items为数组,且只显示数组中的前十个元素

⑨ filterBy 传入值必须是数组,参数为{String | Function} targetStringOrFunction,即需要匹配的字符串或函数(通过函数返回值为true或false来判断匹配结果);“in” (可选分隔符);{String}[…searchKeys],为检索的属性区域。示例:

{{name}}

 // 检索items数组中值包含1.0的元素

{{ item | json}}

// 检索items数组中元素属性name值为1.0的元素输出。检索区域也可以为数组,即in [name, version],在多个属性中进行检索

上述两个例子的输出结果为:

{{ item | json}}

// 使用自定义的过滤函数,函数可以在选项methods中定义methods : {  customFilter : function(item) {   if(item.name) return true // 检索所有元素中包含name属性的元素 }}

⑩ orderBy 传入值必须是数组,参数为{String|Array|Function}sortKeys,即指定排序策略。这里可以使用单个键名,也可以传入包含多个排序键名的数组。也可以像Array.Sort()那样传入自己的排序策略函数。第二个参数为可选参数{String}[order],即选择升序或降序,order>=0为升序,order<0为降序。下面以三种不同的参数例子来说明具体的用法:单个键名:

{{item.name}}

// items数组中以键名name进行降序排列多个键名:

{{item.name}}

//使用items里的两个键名进行排序自定义排序函数:

{{item.name}}

methods: { customOrder: function (a, b) {   return parseFloat(a.version) > parseFloat(b.version) // 对比item中version的值的大小进行排序 }}

需要注意的是,Vue.js 2.0中已经去除了内置的过滤器,但也不用担心,我们会在第4章中详细说明过滤器的用法,以及如何声明自定义过滤器。而且Vue.js 的社区中本身就有优秀的开源过滤器,比如处理时间的moment.js,和货币格式化处理的account.js,我们会在第8章中说明如何使用Vue.js的插件。5.指令

Vue.js也提供指令(Directives)这一概念,可以理解为当表达式的值发生改变时,会有些特殊行为作用到绑定的DOM上。指令通常会直接书写在模板的HTML元素中,而为了有别于普通的属性,Vue.js指令是带有前缀的v-的属性。写法上来说,指令的值限定为绑定表达式,所以上述提到的 JavaScript 表达式及过滤器规则在这里也适用。本书会在第3章中详细讲述指令及自定义指令的作用。本节先简单介绍指令绑定数据和事件的语法。

① 参数

指令v-bind可以在后面带一个参数,用冒号(:)隔开,src即为参数。此时img标签中的src会与vm实例中的avatar绑定,等同于:

② 修饰符

修饰符(Modifiers)是以半角句号.开始的特殊后缀,用于表示指令应该以特殊方式绑定。

v-on的作用是在对应的DOM元素上绑定事件监听器,doClick为函数名,而stop即为修饰符,作用是停止冒泡,相当于调用了e. stopPropagation()。2.2.2 计算属性

在项目开发中,我们展示的数据往往需要经过一些处理。除了在模板中绑定表达式或者利用过滤器外,Vue.js还提供了计算属性这种方法,避免在模板中加入过重的业务逻辑,保证模板的结构清晰和可维护性。1.基础例子var vm = new Vue({  el : '#app,  data: {   firstName : 'Gavin',   lastName: 'CLY'  }  computed : {   fullName : function() {    // this 指向vm实例    return this.firstName + ' ' + this.lastName   }  }});

{{ firstName }}

// Gavin

{{ lastName }}

// CLY

{{ fullName }}

// Gavin CLY

此时,你对vm.firstName和vm.lastName进行修改,始终会影响vm.fullName。2.Setter

如果说上面那个例子并没有体现出来计算属性的优势的话,那计算属性的Setter方法,则在更新属性时给我们带来了便利。示例:var vm = new Vue({  el : '#el',  data: {   cents : 100,  }  computed : {   price : {    set : function(newValue) {     this.cents = newValue * 100;    },    get : function() {     return (this.cents / 100).toFixed(2);    }   }  }});

在处理商品价格的时候,后端往往会把价钱定义成以分为单位的整型,避免在处理浮点类型数据时产生的问题。而前端则需要把价钱再转成元进行展示,而且如果需要对价钱进行修改的话,则又要把输入的价格再恢复到分传给后端,很是繁琐。

而在使用Vue.js的计算属性后,我们可以将vm.cents 设置为后端所存的数据,计算属性price为前端展示和更新的数据。

¥{{price}}

 // ¥1.00

此时更改vm.price = 2,vm.cents会被更新为200,在传递给后端时无需再手动转化一遍数据。2.2.3 表单控件

Vue.js 中提供v-model的指令对表单元素进行双向数据绑定,在修改表单元素值的同时,实例vm中对应的属性值也同时更新,反之亦然。本小节会介绍主要input元素绑定v-model后的具体用法和处理方式,示例所依赖的js代码如下:var vm = new Vue({ el : '#app', data: {   message : '',   gender : '',   checked : '',   multiChecked : [],   selected : '',   multiSelected : [] a:'checked', b:'checked', }});1.Text

输入框示例,用户输入的内容和vm.message直接绑定:Your input is : {{ message }}2.Radio

单选框示例:

{{ gender }}

gender值即为选中的radio元素的value值。3.Checkbox

Checkbox分两种情况:单个勾选框和多个勾选框。

单个勾选框,v-model即为布尔值,此时input的value并不影响v-model的值。checked : {{ checked }}

多个勾选框,v-model使用相同的属性名称,且属性为数组。

MultiChecked: {{ multiChecked.join('|') }}

4.Select

同Checkbox元素一样,Select也分单选和多选两种,多选的时候也需要绑定到一个数组。

单选:Selected: {{ selected }}

多选:
MultiSelected: {{ multiSelected.join('|') }}5.绑定value

表单控件的值同样可以绑定在Vue实例的动态属性上,用v-bind实现。示例:

1.Checkbox

选中:vm.checked == vm.a  // -> true

未选中:vm.checked == vm.b // -> true

2.Radio

选中: vm.checked == vm.a // -> true

3.Select Options

 

 

选中:

typeof vm.selected // -> 'object'

vm.selected.number // -> 1236.参数特性

Vue.js为表单控件提供了一些参数,方便处理某些常规操作。

① lazy

默认情况下,v-model 在input 事件中同步输入框值与数据,加lazy属性后会在 change 事件中同步。

② number

会自动将用户输入转为Number类型,如果原值转换结果为NaN则返回原值。

③ debounce

debounce为设置的最小延时,单位为ms,即为单位时间内仅执行一次数据更新。该参数往往应用在高耗操作上,例如在更新时发出ajax请求返回提示信息。

不过Vue.js 2.0中取消了lazy和number作为参数,用修饰符(modifier)来代替: 

新增了trim修饰符,去掉输入值首尾空格:

去除了debounce这个参数,原因是无法监测到输入新数据,但尚未同步到vm实例属性时这个状态。如果仍有需要,官方提供了手动实现的例子https://jsbin.com/zefawu/3/edit?html,output。2.2.4 Class与Style绑定

在开发过程中,我们经常会遇到动态添加类名或直接修改内联样式(例如tab切换)。class和style都是DOM元素的attribute,我们当然可以直接使用v-bind对这两个属性进行数据绑定,例如

,然后通过修改vm.style的值对元素样式进行修改。但这样未免过于繁琐而且容易出错,所以Vue.js为这两个属性单独做了增强处理,表达式的结果类型除了字符串之外,还可以是对象和数组。本小节就会对这两个属性具体的用法进行说明。1.Class绑定

首先说明的是class属性,我们绑定的数据可以是对象和数组,具体的语法如下:

① 对象语法:v-bind:class接受参数是一个对象,而且可以与普通的class属性共存。

vm实例中需要包含  data : {   active : true }

渲染结果为:

② 数组语法:v-bind:class也接受数组作为参数。

vm实例中需要包含  data : {   classA : 'class-a',   classB : 'class-b'  }

渲染结果为:

也可以使用三元表达式切换数组中的class,

。如果vm.isB = false, 则渲染结果为
。2.内联样式绑定

style属性绑定的数据即为内联样式,同样具有对象和数组两种形式:

① 对象语法:直接绑定符合样式格式的对象。

data : {  alertStyle : {   color : 'red',   fontSize : '20px'  }}

除了直接绑定对象外,也可以绑定单个属性或直接使用字符串。

② 数组语法:v-bind:style 允许将多个样式对象绑定到统一元素上。

3.自动添加前缀

在使用transform这类属性时,v-bind:style会根据需要自动添加厂商前缀。:style在运行时进行前缀探测,如果浏览器版本本身就支持不加前缀的css属性,那就不会添加。2.3 模板渲染

当获取到后端数据后,我们会把它按照一定的规则加载到写好的模板中,输出成在浏览器中显示的HTML,这个过程就称之为渲染。而Vue.js是在前端(即浏览器内)进行的模板渲染。本节主要介绍Vue.js渲染的基本语法。2.3.1 前后端渲染对比

早期的Web项目一般是在服务器端进行渲染,服务器进程从数据库获取数据后,利用后端模板引擎,甚至于直接在HTML模板中嵌入后端语言(例如JSP),将数据加载进来生成HTML,然后通过网络传输到用户的浏览器中,然后被浏览器解析成可见的页面。而前端渲染则是在浏览器里利用JS把数据和HTML模板进行组合。两种方式各有自己的优缺点,需要根据自己的业务场景来选择技术方案。

前端渲染的优点在于:

① 业务分离,后端只需要提供数据接口,前端在开发时也不需要部署对应的后端环境,通过一些代理服务器工具就能远程获取后端数据进行开发,能够提升开发效率。

② 计算量转移,原本需要后端渲染的任务转移给了前端,减轻了服务器的压力。

而后端渲染的优点在于:

试读结束[说明:试读内容隐藏了图片]

下载完整电子书


相关推荐

最新文章


© 2020 txtepub下载