Vue.js快速入门

作者
申思维
丛书名
Web前端技术丛书
出版社
清华大学出版社
ISBN
9787302517542
简要
简介
内容简介书籍计算机书籍 目前单页应用框架层出不穷,其中Vue.js是十分耀眼的项目之一,受到国内外开发人员的极度推崇。 全书分为8章,内容包括Vue.js概述、Vue.js的安装、定义页面、渲染视图、路由、发送HTTP请求、表单的绑定和提交、打包、部署、解决js的跨域问题、Debug、Component、Mixin、Vuex、页面的生命周期等,*后还给出一个实战案例供读者了解Vue.js项目开发过程。 本书适合Vue.js初学者、Web前端开发人员,也适合高等院校和培训学校的师生教学参考。
目录

第1章  Vue.js概述    1
1.1  单页应用的出现    1
1.2  为什么要使用Vue.js    2
1.2.1  单页应用    2
1.2.2  知名的单页应用(SPA)框架对比    5
1.2.3  被腾讯和阿里巴巴所青睐    9
1.2.4  用到Vue.js的项目    9
第2章  原生的Vue.js    10
2.1  极速入门    10
2.2  实际项目    11
2.2.1  运行整个项目    12
2.2.2  HTML代码的部分    18
2.2.3&nbsp; HTML代码的<body>部分&nbsp;&nbsp; &nbsp;19
2.2.4&nbsp; js代码部分&nbsp;&nbsp; &nbsp;21
2.2.5&nbsp; 小结&nbsp;&nbsp; &nbsp;25
第3章&nbsp; Webpack Vue.js开发准备&nbsp;&nbsp; &nbsp;26
3.1&nbsp; 学习过程&nbsp;&nbsp; &nbsp;26
3.1.1&nbsp; 可以跳过的章节&nbsp;&nbsp; &nbsp;26
3.1.2&nbsp; 简写说明&nbsp;&nbsp; &nbsp;26
3.1.3&nbsp; 本书例子文件下载&nbsp;&nbsp; &nbsp;27
3.2&nbsp; NVM、NPM与Node&nbsp;&nbsp; &nbsp;27
3.2.1&nbsp; Windows下的安装&nbsp;&nbsp; &nbsp;28
3.2.2&nbsp; Linux、Mac下的安装&nbsp;&nbsp; &nbsp;31
3.2.3&nbsp; 运行&nbsp;&nbsp; &nbsp;31
3.2.4&nbsp; 使用NVM安装或管理node版本&nbsp;&nbsp; &nbsp;32
3.2.5&nbsp; 删除NVM&nbsp;&nbsp; &nbsp;33
3.2.6&nbsp; 加快NVM和NPM的下载速度&nbsp;&nbsp; &nbsp;33
3.3&nbsp; Git在Windows下的使用&nbsp;&nbsp; &nbsp;34
3.3.1&nbsp; 为什么要使用Git Bash&nbsp;&nbsp; &nbsp;34
3.3.2&nbsp; 安装git客户端&nbsp;&nbsp; &nbsp;35
3.3.3&nbsp; 使用Git Bash&nbsp;&nbsp; &nbsp;40
3.4&nbsp; Webpack&nbsp;&nbsp; &nbsp;41
3.4.1&nbsp; Webpack功能&nbsp;&nbsp; &nbsp;42
3.4.2&nbsp; Webpack安装与使用&nbsp;&nbsp; &nbsp;43
3.5&nbsp; 开发环境的搭建&nbsp;&nbsp; &nbsp;44
3.5.1&nbsp; 安装Vue.js&nbsp;&nbsp; &nbsp;44
3.5.2&nbsp; 运行 vue&nbsp;&nbsp; &nbsp;44
3.6&nbsp; Webpack下的Vue.js项目文件结构&nbsp;&nbsp; &nbsp;45
3.6.1&nbsp; build文件夹&nbsp;&nbsp; &nbsp;46
3.6.2&nbsp; config 文件夹&nbsp;&nbsp; &nbsp;46
3.6.3&nbsp; dist文件夹&nbsp;&nbsp; &nbsp;47
3.6.4&nbsp; node_modules 文件夹&nbsp;&nbsp; &nbsp;47
3.6.5&nbsp; src 文件夹&nbsp;&nbsp; &nbsp;49
第4章&nbsp; Webpack Vue.js实战&nbsp;&nbsp; &nbsp;50
4.1&nbsp; 创建一个页面&nbsp;&nbsp; &nbsp;50
4.1.1&nbsp; 新建路由&nbsp;&nbsp; &nbsp;50
4.1.2&nbsp; 创建一个新的Component&nbsp;&nbsp; &nbsp;51
4.1.3&nbsp; 为页面添加样式&nbsp;&nbsp; &nbsp;52
4.1.4&nbsp; 定义并显示变量&nbsp;&nbsp; &nbsp;53
4.2&nbsp; Vue.js中的ECMAScript&nbsp;&nbsp; &nbsp;55
4.2.1&nbsp; let、var、常量与全局变量&nbsp;&nbsp; &nbsp;55
4.2.2&nbsp; 导入代码:import&nbsp;&nbsp; &nbsp;56
4.2.3&nbsp; 方便其他代码使用自己: export default {..}&nbsp;&nbsp; &nbsp;56
4.2.4&nbsp; ES中的简写&nbsp;&nbsp; &nbsp;57
4.2.5&nbsp; 箭头函数=>&nbsp;&nbsp; &nbsp;57
4.2.6&nbsp; hash中同名的key、value的简写&nbsp;&nbsp; &nbsp;58
4.2.7&nbsp; 分号可以省略&nbsp;&nbsp; &nbsp;58
4.2.8&nbsp; 解构赋值&nbsp;&nbsp; &nbsp;58
4.3&nbsp; Vue.js 渲染页面的过程和原理&nbsp;&nbsp; &nbsp;59
4.3.1&nbsp; 渲染过程1:js入口文件&nbsp;&nbsp; &nbsp;59
4.3.2&nbsp; 渲染过程2:静态的HTML页面(index.html)&nbsp;&nbsp; &nbsp;61
4.3.3&nbsp; 渲染过程3:main.js中的Vue定义&nbsp;&nbsp; &nbsp;62
4.3.4&nbsp; 渲染原理与实例&nbsp;&nbsp; &nbsp;63
4.4&nbsp; 视图中的渲染&nbsp;&nbsp; &nbsp;64
4.4.1&nbsp; 渲染某个变量&nbsp;&nbsp; &nbsp;64
4.4.2&nbsp; 方法的声明和调用&nbsp;&nbsp; &nbsp;65
4.4.3&nbsp; 事件处理:v-on&nbsp;&nbsp; &nbsp;66
4.5&nbsp; 视图中的Directive(指令)&nbsp;&nbsp; &nbsp;67
4.5.1&nbsp; 前提:在directive中使用表达式(Expression)&nbsp;&nbsp; &nbsp;67
4.5.2&nbsp; 循环:v-for&nbsp;&nbsp; &nbsp;67
4.5.3&nbsp; 判断:v-if&nbsp;&nbsp; &nbsp;69
4.5.4&nbsp; v-if与v-for的优先级&nbsp;&nbsp; &nbsp;70
4.5.5&nbsp; v-bind&nbsp;&nbsp; &nbsp;72
4.5.6&nbsp; v-on&nbsp;&nbsp; &nbsp;73
4.5.7&nbsp; v-model 与双向绑定&nbsp;&nbsp; &nbsp;75
4.6&nbsp; 发送http请求&nbsp;&nbsp; &nbsp;77
4.6.1&nbsp; 调用http请求&nbsp;&nbsp; &nbsp;78
4.6.2&nbsp; 远程接口的格式&nbsp;&nbsp; &nbsp;80
4.6.3&nbsp; 设置Vue.js开发服务器的代理&nbsp;&nbsp; &nbsp;81
4.6.4&nbsp; 打开页面,查看http请求&nbsp;&nbsp; &nbsp;83
4.6.5&nbsp; 把结果渲染到页面中&nbsp;&nbsp; &nbsp;84
4.6.6&nbsp; 如何发起post请求&nbsp;&nbsp; &nbsp;85
4.7&nbsp; 不同页面间的参数传递&nbsp;&nbsp; &nbsp;86
4.7.1&nbsp; 回顾:现有的接口&nbsp;&nbsp; &nbsp;86
4.7.2&nbsp; 显示博客详情页&nbsp;&nbsp; &nbsp;87
4.7.3&nbsp; 新增路由&nbsp;&nbsp; &nbsp;88
4.7.4&nbsp; 修改博客列表页的跳转方式1:使用事件&nbsp;&nbsp; &nbsp;89
4.7.5&nbsp; 修改博客列表页的跳转方式2:使用v-link&nbsp;&nbsp; &nbsp;91
4.8&nbsp; 路由&nbsp;&nbsp; &nbsp;92
4.8.1&nbsp; 基本用法&nbsp;&nbsp; &nbsp;92
4.8.2&nbsp; 跳转到某个路由时带上参数&nbsp;&nbsp; &nbsp;93
4.8.3&nbsp; 根据路由获取参数&nbsp;&nbsp; &nbsp;94
4.9&nbsp; 使用样式&nbsp;&nbsp; &nbsp;94
4.10&nbsp; 双向绑定&nbsp;&nbsp; &nbsp;96
4.11&nbsp; 表单项目的绑定&nbsp;&nbsp; &nbsp;99
4.12&nbsp; 表单的提交&nbsp;&nbsp; &nbsp;102
4.13&nbsp; Component 组件&nbsp;&nbsp; &nbsp;105
4.13.1&nbsp; 如何查看文档&nbsp;&nbsp; &nbsp;105
4.13.2&nbsp; Component的重要作用: 重用代码&nbsp;&nbsp; &nbsp;106
4.13.3&nbsp; 组件的创建&nbsp;&nbsp; &nbsp;106
4.13.4&nbsp; 向组件中传递参数&nbsp;&nbsp; &nbsp;108
4.13.5&nbsp; 脱离Webpack,在原生Vue.js中创建component&nbsp;&nbsp; &nbsp;110
第5章&nbsp; 运维和发布Vue.js项目&nbsp;&nbsp; &nbsp;112
5.1&nbsp; 打包和部署&nbsp;&nbsp; &nbsp;112
5.1.1&nbsp; 打包&nbsp;&nbsp; &nbsp;112
5.1.2&nbsp; 部署&nbsp;&nbsp; &nbsp;114
5.2&nbsp; 解决域名问题与跨域问题&nbsp;&nbsp; &nbsp;117
5.2.1&nbsp; 域名404 问题&nbsp;&nbsp; &nbsp;118
5.2.2&nbsp; 跨域问题&nbsp;&nbsp; &nbsp;119
5.2.3&nbsp; 解决域名问题和跨域问题&nbsp;&nbsp; &nbsp;120
5.3&nbsp; 如何Debug&nbsp;&nbsp; &nbsp;122
5.3.1&nbsp; 时刻留意本地开发服务器&nbsp;&nbsp; &nbsp;122
5.3.2&nbsp; 看developer tools提出的日志&nbsp;&nbsp; &nbsp;122
5.3.3&nbsp; 查看页面给出的错误提示&nbsp;&nbsp; &nbsp;123
5.4&nbsp; 基本命令&nbsp;&nbsp; &nbsp;125
5.4.1&nbsp; 建立新项目&nbsp;&nbsp; &nbsp;125
5.4.2&nbsp; 安装所有的第三方包&nbsp;&nbsp; &nbsp;125
5.4.3&nbsp; 在本地运行&nbsp;&nbsp; &nbsp;126
5.4.4&nbsp; 打包编译&nbsp;&nbsp; &nbsp;127
第6章&nbsp; 进阶知识&nbsp;&nbsp; &nbsp;128
6.1&nbsp; js的作用域与this&nbsp;&nbsp; &nbsp;128
6.1.1&nbsp; 作用域&nbsp;&nbsp; &nbsp;128
6.1.2&nbsp; this&nbsp;&nbsp; &nbsp;130
6.1.3&nbsp; 实战经验&nbsp;&nbsp; &nbsp;131
6.2&nbsp; Mixin&nbsp;&nbsp; &nbsp;133
6.3&nbsp; 使用Computed Properties(计算得到的属性)和watchers(监听器)&nbsp;&nbsp; &nbsp;135
6.3.1&nbsp; 典型例子&nbsp;&nbsp; &nbsp;135
6.3.2&nbsp; Computed Properties 与 普通方法的区别&nbsp;&nbsp; &nbsp;136
6.3.3&nbsp; watched property&nbsp;&nbsp; &nbsp;137
6.3.4&nbsp; Computed Property的setter(赋值函数)&nbsp;&nbsp; &nbsp;140
6.4&nbsp; Component(组件)进阶&nbsp;&nbsp; &nbsp;141
6.4.1&nbsp; 实际项目中的Component&nbsp;&nbsp; &nbsp;142
6.4.2&nbsp; Prop&nbsp;&nbsp; &nbsp;144
6.4.3&nbsp; Attribute&nbsp;&nbsp; &nbsp;146
6.5&nbsp; Slot&nbsp;&nbsp; &nbsp;146
6.5.1&nbsp; 普通的Slot&nbsp;&nbsp; &nbsp;147
6.5.2&nbsp; named slot&nbsp;&nbsp; &nbsp;148
6.5.3&nbsp; slot 的默认值&nbsp;&nbsp; &nbsp;149
6.6&nbsp; Vuex&nbsp;&nbsp; &nbsp;150
6.6.1&nbsp; 正常使用的顺序&nbsp;&nbsp; &nbsp;150
6.6.2&nbsp; Computed属性&nbsp;&nbsp; &nbsp;154
6.6.3&nbsp; Vuex原理图&nbsp;&nbsp; &nbsp;155
6.7&nbsp; Vue.js的生命周期&nbsp;&nbsp; &nbsp;156
6.8&nbsp; 最佳实践&nbsp;&nbsp; &nbsp;157
6.9&nbsp; Event Handler 事件处理&nbsp;&nbsp; &nbsp;158
6.9.1&nbsp; 支持的Event&nbsp;&nbsp; &nbsp;158
6.9.2&nbsp; 使用 v-on 进行事件绑定&nbsp;&nbsp; &nbsp;159
6.10&nbsp; 与CSS预处理器结合使用&nbsp;&nbsp; &nbsp;168
6.10.1&nbsp; SCSS&nbsp;&nbsp; &nbsp;168
6.10.2&nbsp; LESS&nbsp;&nbsp; &nbsp;169
6.10.3&nbsp; SASS&nbsp;&nbsp; &nbsp;170
6.10.4&nbsp; 在Vue.js中使用CSS预编译器&nbsp;&nbsp; &nbsp;171
6.11&nbsp; 自定义 Directive&nbsp;&nbsp; &nbsp;172
6.11.1&nbsp; 例子&nbsp;&nbsp; &nbsp;172
6.11.2&nbsp; 自定义Directive的命名方法&nbsp;&nbsp; &nbsp;173
6.11.3&nbsp; 钩子方法(Hook Functions)&nbsp;&nbsp; &nbsp;174
6.11.4&nbsp; 自定义Directive可以接收到的参数&nbsp;&nbsp; &nbsp;174
6.11.5&nbsp; 实战经验&nbsp;&nbsp; &nbsp;175
第7章&nbsp; 实战周边及相关工具&nbsp;&nbsp; &nbsp;176
7.1&nbsp; 微信支付&nbsp;&nbsp; &nbsp;176
7.2&nbsp; Hybrid App:混合式App&nbsp;&nbsp; &nbsp;177
7.3&nbsp; 安装 Vue.js的开发工具: Vue.js devtool&nbsp;&nbsp; &nbsp;178
7.4&nbsp; 如何阅读官方文档&nbsp;&nbsp; &nbsp;181
第8章&nbsp; 实战项目&nbsp;&nbsp; &nbsp;183
8.1&nbsp; 准备1:文字需求&nbsp;&nbsp; &nbsp;183
8.2&nbsp; 准备2:需求原型图&nbsp;&nbsp; &nbsp;186
8.2.1&nbsp; 明确前端页面&nbsp;&nbsp; &nbsp;186
8.2.2&nbsp; 如何画原型图&nbsp;&nbsp; &nbsp;186
8.2.3&nbsp; 首页&nbsp;&nbsp; &nbsp;186
8.2.4&nbsp; 商品列表页&nbsp;&nbsp; &nbsp;187
8.2.5&nbsp; 商品详情页&nbsp;&nbsp; &nbsp;187
8.2.6&nbsp; 购物车页面&nbsp;&nbsp; &nbsp;188
8.2.7&nbsp; 支付页面&nbsp;&nbsp; &nbsp;188
8.2.8&nbsp; 我的页面&nbsp;&nbsp; &nbsp;189
8.2.9&nbsp; 我的订单列表页面&nbsp;&nbsp; &nbsp;189
8.2.10&nbsp; 总结&nbsp;&nbsp; &nbsp;190
8.3&nbsp; 准备3:微信的相关账号和开发者工具&nbsp;&nbsp; &nbsp;190
8.3.1&nbsp; 微信相关账号的申请&nbsp;&nbsp; &nbsp;190
8.3.2&nbsp; 微信开发者工具&nbsp;&nbsp; &nbsp;190
8.4&nbsp; 项目的搭建&nbsp;&nbsp; &nbsp;192
8.5&nbsp; 用户的注册和微信授权&nbsp;&nbsp; &nbsp;193
8.6&nbsp; 登录状态的保持&nbsp;&nbsp; &nbsp;202
8.7&nbsp; 首页轮播图&nbsp;&nbsp; &nbsp;203
8.8&nbsp; 底部Tab&nbsp;&nbsp; &nbsp;213
8.9&nbsp; 商品列表页&nbsp;&nbsp; &nbsp;217
8.10&nbsp; 商品详情页&nbsp;&nbsp; &nbsp;219
8.11&nbsp; 购物车&nbsp;&nbsp; &nbsp;225
8.13&nbsp; 微信支付&nbsp;&nbsp; &nbsp;233
8.14&nbsp; 回顾&nbsp;&nbsp; &nbsp;244


推荐

车牌查询
桂ICP备20004708号-3