多种网盘链接检测插件 购买前，请先检测网盘链接是否有效
《Vue.js项目实战》_周智勋等译_2019-01-01_1
《Vue.js项目实战》_周智勋等译_2019-01-01_2
《Vue.js项目实战》_周智勋等译_2019-01-01_3
内容简介：
4.2.6为生产而构建
6,3.4获取博客列表
4.3单文件组件
6.3.5逸中博客
4.3.1模板
第7章项目5:在线商店以及扩展…23
4.3.3样式
43.4组件内的组件
7.1高级开发流程
项目设置
7.1.2使用 Hostess为CSS自动
第5章项目3:支持中
添加前缀
5.1通用应用结构
7.13通过 ELInt提升代码质量和
5,1,1项ri设置
风格
5.1.2路由和页面
7.1.4Jest单元测试
52FAQ使用A
52.1服.务.器设置
7.2.1guo际化和代局拆分
5.2.2使用 fetch
722服务端渲燊
52.3用自己的插件扩展Vue
723生产环境构建
524使用 mixIn复用代码
7.3小结
53支持工单
第8章项目6:使用 Meteor开发
实时仪表盘
532显示和增加工单
8.1项目设置
5.33高级路由特性
8.1.1什么是 Meteor
8.12An装 Meteor
第6章项目4:博客地图
8.1.3创建项目
6.1 Google认证和状态管理
6.1.1項目设置
6.1.2使用Vuex进行状态管理
8.2产品测量记录
8.2.1集成
62嵌人 Google地图
8.22设置数据
62.1An装
8.2.3模拟测量记录
6.2.2添加地图
19483仪表盘和报告
623将B1 gmAp连接到 store
83.1进度条戽
6.3博客和评论
8.3.2Me
63.1在stoe中添加博客模块
8.3.3创建仪表盘组件
632渲染画数和JSX
84小结
63.3创建一篇博客
ue开发入门
Vue是一个专注于构建Web用户界面的 JavaScript库。本章首先通过一段简单的介绍让你对
Vue有一个初步的认识
创建一个Web应用,为本书后续创建的不同项目奠定基
1.1为什么需要另外一个前端框架
相对来说,Vue在 JavaScript前端领域属于后来者,但是对于当前主流 JavaScript库的地位具
有很大的威胁。它易用、灵活、速度快,还提供了许多功能和可选工具,这使得开发者能够快速
地构建一个现代Web应用。vue的作者尤雨溪将其称为渐进式框架。
avue遵循渐进增量的设计原则,其核心库专注于用户界面,使得现有的项目可以方便地集
成使用vue
口Vue既可以构建出很小的原型,又可以构建出复杂的大型Wb应用。
口Vue非常容易上手初学者能轻松掌握Vue,而已经熟悉ue的开发者则可以在实际项
目中快速发挥出它的作用
Vue整体上遵循MvwM( Model-view- ViewModel,模型-视图-视图模型)架构,也就是
说vew(用户界面或视图)和 Model(数据)是独立的, View Model(vue)是view和 Model
交互的桥梁。Vue对view和 Model之间的更新操作做了自动化处理,并且已经为开发者进行了
优化。因此,当View的某个部分需要更新时,开发者并不需要特别指定,wue会选择恰当的方
法和时机进行更新
vue还吸取了其他类似框架(如Reat、 Angular和 Polymer)的精华。下面是对wue核心功
能的概述。
口一个响应式的数据系统,能通过轻量级的虚拟DOM引擎和最少的优化工作来自动更新用
户界面。
口灵活的视图声明,包括优雅友好的HTML模板、JSX(在 Javascript中编写HTML的技术)
以及 typescript渲染函数(完全使用 Javascript)
口由可维护、可复用组件构成的组件化用户界面。
2第1章Vue开发入门
口官方的组件库提供了路由、状态管理、脚手架以及更多高级功能,使Ve成为了一个灵
1.1.1一个有发展前景的项目
构建e的第一版原型。那时候尤雨溪任职于 Google,并在工作
中使用 angular.尤雨溪最初的目标是吸取 angular中所有优秀的功能,比如数据绑定和数据驱
动DOM,并摒弃会导致框架死板、难以学习和使用的一些功能。
ue于2014年2月首次公开亮相,并在第一天就大获成功:出现在 HackerNews首页,在
Reddit B j//javascript板块中位居榜首,并且其官网获得了1万次独立访问
Vue的第一个主要版本1.0于2015年10月发布。截至2015年年底,Vue在mpm中的下载量
飙升至382万次,在 GitHub上收获了1.1万个star,其官网获得了36.3万次独立访问。主流的
PHP框架 Caravel选用vue替代 React作为其官方的前端库
wue的第二个主要版本20于2016年9月发布,具有基于虚拟DOM的全新渲染器以及许多
新待性,比如服务端渲染和性能提升等。本书就是基于2.0编写的。Vue是目前速度最快的前端
框架之一。根据与React团队共同得出的对比报告,vue的性能甚至优于Reacthttps:/n.guess.org
v2 guide/comparison)b写作本书时,Vue是 GitHub上第二流行的前端框架,有7.2万个star,位
于 React之后、 Angular之前
在其路线图中,Ve的下一个主要版本会集成更多的Wue原生库,比如weex和 NativeScript
以便使用Vue来构建原生移动应用,同时还会添加新的特性和优化
如今,有许多公司都在使用vue,比如微软、 Adobe、_阿.里_巴巴、百度、小米、 Expedia、任
天堂和 GitLab
1.1.2兼容性要求
vue没有任何第三方依赖,可以在所有兼容 ECMAScript5的浏览器中使用。这也就是说它
不支持 Internet Explorer8及以下版本,因为vue使用了 JavaScript中相对较新的特性,比如
Object, defineProperty,而它们在老版本的浏览器中是无法 polyfit的
在本书中,编写代码使用的 JavaScript版本为Es2015(以前称为ES6,所以在学习前几章
时,需要一个较新的浏览器(比如Edge、 Firefox或 Chrome)来运行示例代码。本书后续章节将
绍编译器 Babel,它编译过的代码可以很好地运行在老版本浏览器中。
①中文版出版时,Ve已超越 React,位居第一,参见;htps:/ github. com/collections/front<nd- javascript- frameworks
编者注
13创建一个应用3
1.2一分Zho设置
事不宜迟,下面我们通过快速设置来创建第一个ue应用。由于vue与生俱来的灵活性
需要一个简单的< script>标签就能添加到任意Web页面中。下面创建一个包含vue库的简单
Web页面,其中有一个简单的div元素和一个< script>标签
head
<!--将庠添加到这里
scriptsrc=\"https://unpkg
e/dist, yue, 1854/8
<div id-\"root
Is thig
ipt代码
Conso
Yes! We are using
在浏览器的控制台中,可以看到类似如下的内容
Yes! We are using vue versio
正如上面的代码所示,库对外提供了一个we对象,该对象包含使用Wue所需的所有功能。
至此,一切就绪
1.3创建一个应用
现在,这个Web页面中还没有运行vue应用。整个库都是基于vue实例的,而实例是Vi
和 Model(数据)交互的桥梁。因此需要创建一个新的Vue实例来启动应用
r app s new Vue
根DN元素的CSs选择器
/一些数据
data
return
4第1章Vue开发入门
Hello yue
在上面的代码中,使用关键字new调用We构造器创建了一个新的实例。Vue构造器有一个
option对象。该参数可以携带多个属性(称为选项),我们会在后面的章节中逐渐学习
这里只使用其中的两个属性
通过e1选项,我们使用CSs选择器告知vue将实例添加(挂载)到Web页面的哪个DOM
素中。在这个示例中,Vue实例将使用< div id=\"root\">DOM元素作为其根元素。另外,也
可以使用Vue实例的 Smount方法替代e1选项
vue.)s
app. smount('#root
Vue实例的大多数特殊方法和属性都是以美元符号(s)开头的
我们还会在data选项中初始化一些数据,利用了携带一个字符串的 message属性。现在
vue应用运行起来了,但是此处还并没有做什么。
在单个Web页面中,开发者可以添加任意多个Vue应用。只需要为每个应用创
建出新的Vue实例并挂载到不同的DOM元素即可。当想要将Vue集成到已有的
项目中时,这非常方便。
∨ue开发者工具
e有一个官方调试工具,在 Chrome中以扩展的方式呈现,名为 ue js devtools。通过该
工具可以看到应用的运行情况,这有助于调试代码。可以在 Chrome网上应用商店
htps/ chrome. google. com/webstore/search/vue)下载;如果使用 Firefox,则可以到 Firefox附加
组件(htps:/ addons. mozilla. org/en-Us/ firefox/addon/ wue-js-devtools7?src=s)下载
使用 Chrome版本的话,还需要进行额外的设置。在扩展设置中,启用 Allow access to file
URLs选项,这样调试工具就能在从本地磁盘打开的Web页面上检.测Vue了
#############################################
|
|
