Vue.js快速入门 PDF 完整版

Vue.js快速入门

内容介绍

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