新書推薦:
《
股权控制战略:如何实现公司控制和有效激励(第2版)
》
售價:NT$
449.0
《
汉译名著·哲学经典十种
》
售價:NT$
3460.0
《
成吉思汗传:看历代帝王将相谋略 修炼安身成事之根本
》
售價:NT$
280.0
《
爱丁堡古罗马史-罗马城的起源和共和国的崛起
》
售價:NT$
349.0
《
大宋悬疑录:貔貅刑
》
售價:NT$
340.0
《
人生解忧:佛学入门四十讲
》
售價:NT$
490.0
《
东野圭吾:分身(东野圭吾无法再现的双女主之作 奇绝瑰丽、残忍又温情)
》
售價:NT$
295.0
《
浪潮将至
》
售價:NT$
395.0
|
編輯推薦: |
与传统的Web应用不同,单页应用在近几年发展迅猛。我们发现Vue.js框架入门特别快,稍微有一定Webpack 开发经验的程序员在一周内就可以上手做项目,认真学习的话一个月就可以达到快速开发项目的水平,两三个月就可以达到熟练使用Vuex、自己编写Component的水平。这么快的上手速度,使用其他框架是不可想象的。
本书起源于作者公司的员工培训教程,可以在极短的时间内(如一周)帮助读者上手Vue.js项目,入门H5开发。
|
內容簡介: |
现在单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。本书根据笔者公司多年的实际项目开发经验编写而成,详细介绍Vue.js 3.x企业应用快速开发技术。 全书共分8章,内容包括Vue.js概述、Vue.js的安装、定义页面、渲染视图、路由、发送HTTP请求、表单的绑定和提交、打包、部署、解决JS(JavaScript)的跨域问题、Debug、Component、Mixin、Vuex、页面的生命周期等,最后给出一个农产品销售实战案例供读者了解Vue.js项目的开发过程。 本书适合Vue.js初学者、Web前端开发人员,也适合高等院校和培训机构的师生参考。
|
關於作者: |
申思维
个人主页http://siwei.me。
软件行业老兵。stackoverflow.com分数17k,2001—2005年本科就读于华南理工大学计算机学院软件技术专业,毕业后在北京工作,经历了人力外派、私企、中等规模外包公司、顶级外企和国内互联网知名企业:
? 2006—2009年服务于必联北京、同方鼎欣。
? 2010—2012年服务于摩托罗拉(移动)。
? 2013—2014年服务于优酷。
? 2014年至今担任明创软件创始人兼CTO。
从事软件行业十七年,具有深厚的全栈开发功力。
? 后端技术背景:Java、Ruby on Rails、Python、全栈运维(DevOps)。
? 移动端与H5端技术背景:Android、Vue.js、React。
熟悉互联网运维,擅长技术团队的搭建、管理和人员培养。录制过Ruby、Rails、Git、自动化部署、Vim和程序员职业规划等教程和视频。对于国内的软件现状理解深刻,对于行业前景和职业规划有着非常独到的见解。目前重点专注区块链技术、网络安全和软件行业的相关培训。
|
目錄:
|
第1章 Vue.js概述 1
1.1 单页应用的出现 1
1.2 为什么要使用Vue.js 2
1.2.1 Web应用 2
1.2.2 单页应用框架对比 5
1.2.3 备受腾讯和阿里巴巴青睐 7
1.2.4 用到Vue.js的项目 8
1.2.5 本书的使用说明 8
第2章 原生的Vue.js 10
2.1 极速入门 10
2.2 实际项目 12
2.2.1 运行整个项目 12
2.2.2 HTML代码的部分 18
2.2.3 HTML代码的部分 19
2.2.4 JS代码部分 20
第3章 Webpack Vue.js开发准备 25
3.1 学习过程 25
3.2 NVM、NPM与Node 26
3.2.1 在Windows下安装NVM 27
3.2.2 在Linux、Mac下安装NVM 30
3.2.3 运行 30
3.2.4 使用NVM安装或管理Node版本 31
3.2.5 删除NVM 32
3.2.6 加快NVM和NPM的下载速度 32
3.3 Git在Windows下的使用 32
3.3.1 为什么要使用Git Bash 33
3.3.2 安装Git客户端 33
3.3.3 使用Git Bash 38
3.4 Webpack 39
3.4.1 Webpack的功能 40
3.4.2 Webpack的安装与使用 41
3.5 开发环境的搭建 42
3.5.1 安装Vue.js 42
3.5.2 创建基于Webpack的Vue.js项目 42
3.6 Webpack下的Vue.js项目文件结构 45
3.6.1 dist文件夹 46
3.6.2 node_modules 文件夹 46
3.6.3 src文件夹 48
第4章 Webpack Vue.js实战 49
4.1 创建一个页面 49
4.1.1 新建路由 49
4.1.2 创建一个新的View(视图文件) 51
4.1.3 为页面添加样式 52
4.1.4 Webpack项目与原生Vue.js项目的代码对应关系 53
4.2 Vue.js中的ECMAScript 54
4.2.1 let、var、常量与全局变量 54
4.2.2 导入代码—import 55
4.2.3 方便其他代码使用自身—export default {..} 55
4.2.4 ES中的简写 56
4.2.5 箭头函数(=>) 57
4.2.6 hash中同名的key、value的简写 57
4.2.7 省略分号 57
4.2.8 解构赋值 58
4.3 Vue.js渲染页面的过程和原理 58
4.3.1 渲染步骤1:JS入口文件 59
4.3.2 渲染步骤2:静态的HTML页面(index.html) 59
4.3.3 渲染步骤3:main.js中的Vue定义 60
4.3.4 渲染原理与实例 60
4.4 视图中的渲染 61
4.4.1 渲染某个变量 61
4.4.2 方法的声明和调用 62
4.4.3 事件处理:v-on 64
4.5 视图中的Directive(指令) 64
4.5.1 前提:在Directive中使用表达式(Expression) 65
4.5.2 v-for(循环) 65
4.5.3 v-if(判断) 67
4.5.4 v-if与v-for的结合使用与优先级 68
4.5.5 v-bind(绑定) 70
4.5.6 v-on(响应事件) 71
4.5.7 v-model(模型)与双向绑定 73
4.6 发送HTTP请求 75
4.6.1 调用HTTP请求 75
4.6.2 远程接口的格式 79
4.6.3 设置Vue.js开发服务器的代理 80
4.6.4 打开页面,查看HTTP请求 81
4.6.5 把结果渲染到页面中 82
4.6.6 如何发起POST请求 83
4.7 不同页面间的参数传递 84
4.7.1 回顾:现有的接口 84
4.7.2 显示博客详情页 85
4.7.3 新增路由 87
4.7.4 修改博客列表页的跳转方式1:使用事件 87
4.7.5 修改博客列表页的跳转方式2:使用v-link 89
4.8 路由 90
4.8.1 基本用法 90
4.8.2 跳转到某个路由时带上参数 91
4.8.3 根据路由获取参数 92
4.9 使用样式 92
4.10 双向绑定 94
4.11 表单项目的绑定 97
4.12 表单的提交 99
4.13 Component 组件 103
4.13.1 如何查看文档 103
4.13.2 Component的重要作用:重用代码 103
4.13.3 组件的创建 104
4.13.4 向组件中传递参数 105
4.13.5 在原生Vue.js中创建Component 107
第5章 运维和发布Vue.js项目 109
5.1 打包和部署 109
5.1.1 打包 109
5.1.2 部署 111
5.2 解决域名问题与跨域问题 113
5.2.1 域名404 问题 114
5.2.2 跨域问题 115
5.2.3 解决域名问题和跨域问题 116
5.2.4 解决HTML5路由模式下的刷新后404的问题 118
5.3 如何Debug 118
5.3.1 时刻留意本地开发服务器 119
5.3.2 看Developer Tools提出的日志 119
5.3.3 查看页面给出的错误提示 120
5.4 基本命令 121
5.4.1 建立新项目 121
5.4.2 安装所有的第三方包 122
5.4.3 在本地运行 122
5.4.4 打包编译 123
第6章 进阶知识 124
6.1 JavaScript的作用域与this 124
6.1.1 作用域 124
6.1.2 this 126
6.1.3 实战经验 127
6.2 Mixin 129
6.3 Computed Properties和Watchers 131
6.3.1 典型例子 131
6.3.2 Computed Properties与普通方法的区别 132
6.3.3 Watched Property 133
6.3.4 Computed Property的setter(赋值函数) 136
6.4 Component进阶 137
6.4.1 实际项目中的Component 137
6.4.2 Prop 139
6.4.3 Attribute 142
6.5 Slot(插槽) 142
6.5.1 普通的Slot 142
6.5.2 named slot 144
6.5.3 Slot的默认值 145
6.6 Vuex 145
6.6.1 正常使用的顺序 146
6.6.2 Computed属性 149
6.6.3 Vuex原理图 150
6.7 Vue.js的生命周期 150
6.8 Event Handler事件处理 152
6.8.1 支持的Event 152
6.8.2 使用v-on进行事件绑定 153
6.9 Vue.js对变量的监听的原理 161
6.9.1 Proxy对象 161
6.9.2 Vue.js 内置的track与trigger方法 162
6.9.3 双向绑定原则上只能作用于基本类型 163
6.10 与CSS预处理器结合使用 163
6.10.1 SCSS 164
6.10.2 LESS 164
6.10.3 SASS 165
6.10.4 在Vue.js中使用CSS预编译器 166
6.11 自定义 Directive 167
6.11.1 例子 167
6.11.2 自定义Directive的命名方法 168
6.11.3 钩子方法(Hook Functions) 168
6.11.4 自定义Directive可以接收到的参数 169
6.11.5 Directive的实战经验 171
6.12 全局配置项 171
6.13 单元测试 173
6.14 Teleport 175
6.15 页面渲染的优化 177
6.16 Composition API 178
6.16.1 Composition API Demo 178
6.16.2 等效的Option API Demo 181
6.17 Provide与Inject 182
6.17.1 Option API的实现方法 184
6.17.2 Composition API的实现方法 185
6.18 子组件向父组件的消息传递 186
6.18.1 在子组件中watch&emit,在父组件中监听 187
6.18.2 使用refs 189
6.19 最佳实践 192
第7章 实战周边及相关工具 193
7.1 微信支付 193
7.2 Hybrid App(混合式App) 194
7.3 安装 Vue.js的开发工具:Vue.js devtool 195
7.4 如何阅读官方文档 198
第8章 实战项目 200
8.1 准备1:文字需求 200
8.2 准备2:需求原型图 202
8.2.1 明确前端页面 203
8.2.2 如何画原型图 203
8.2.3 首页 203
8.2.4 商品列表页 203
8.2.5 商品详情页 204
8.2.6 购物车页面 205
8.2.7 支付页面 205
8.2.8 我的页面 206
8.2.9 我的订单列表页面 206
8.2.10 总结 206
8.3 准备3:微信的相关账号和开发者工具 206
8.3.1 微信相关账号的申请 206
8.3.2 微信开发者工具 207
8.4 项目的搭建 210
8.5 用户的注册和微信授权 211
8.6 登录状态的保持 220
8.7 首页轮播图 221
8.8 底部Tab 231
8.9 商品列表页 234
8.10 商品详情页 237
8.11 购物车 243
8.12 微信支付 251
8.13 回顾 262
|
內容試閱:
|
本书是根据笔者在公司多年的实际项目开发经验编写的。
笔者从2014年开始创业,2016年开始独立运作软件公司,至今做了几十个项目。在这些项目中,对于手机端的Webpack呼声最高,大部分项目都要求在手机端使用Webpack打包。
在使用Vue.js之前,笔者考察过Angular(包括1.x、2.x版本)、React、Meteor。这几个框架要么是学习曲线陡峭,概念复杂,把简单的事情复杂化(如Angular),要么就是编码风格不好,前后端代码混写在一起(如React、Meteor)。而Vue.js是当时在Stack Overflow等国外技术站点上被一致看好的技术。
笔者第一次使用Vue.js 1.x是在2016年4月,使用后发现Vue.js入门特别快,稍微有一定Webpack 开发经验的程序员在一周内就可以上手做项目,认真学习的话一个月就可以达到熟练水平(快速地开发项目),两三个月就可以达到高级水平(熟练使用Vuex,自己写Component等)。这么快的上手速度,使用其他框架是不可想象的。总之,越是简洁的框架,就越好学。
后来,笔者在项目中使用它并一发不可收拾。只要是H5项目,就可以很好地用起来:快速开发、快速迭代、性能优异。
最后,Vue.js不但为业内掀起一股快速开发的浪潮,还带来了大量的工作机会。几乎只要有软件开发需求的国内公司,都会把Vue.js作为前端Web的首选技术框架。
学习目标
本书起源于笔者公司的员工培训教程,学习完本书可以在极短的时间内(如一周)上手Vue.js项目。可以让读者:
看得懂代码。
可以编写一些基本的功能。
可以调试和部署。
这就算入门H5开发了。
使用说明
如果把文档分成两类:
Guide:教程型文档。
API:接口型文档。
本书就是入门的教程型文档。
书中出现的命令行统一以$作为开始。例如:
$ npm install
对命令行不熟悉的读者,在机器上输入命令时跳过前面的 $ 即可。
在线Demo与源代码下载
强烈建议读者阅读本书的时候,能同时查看在线Demo和源码,这样可以更好、更快地入门。如果下载遇到问题,请联系booksaga@163.com,邮件主题为“Vue.js 3.x快速入门”。
本书第1~7章:
Demo:http://vue3_demo.sweetysoft.com。
源码:https://github.com/sg552/vue3_lesson_demo。
本书第8章:
Demo(微信打开):http://shoph5.sweetysoft.com。
前端源码:https://github.com/sg552/vue3_book_last_chapter_demo_frontend。
后端源码:https://github.com/sg552/vuejs_book_last_chapter_demo_backend。
版本说明
截至2022年2月,Vue.js的版本是3.2.29。本书中的所有示例都是在该版本下演示的。
如果读者是一位没有任何工作经验的新人,并且日常使用Windows,建议使用Sublime(免费) Git Bash(免费)就可以运行本书中的所有例子了。如果读者是一名有工作经验的老手,则Linux、Mac是非常好的选择。
那么,我们就开始一段令人兴奋的学习旅程吧!
作 者
2022年5月
|
|