好消息:《精通Vue.js:Web前端开发技术详解》完稿了!!!

孙卫琴 2021-07-20 03:59:59
vue 编程技术荟萃


后端Web开发写了两本书《Tomcat与Java Web开发技术详解》和《精通Spring: Web技术开发详解》,其中《精通Spring》还在由清华大学出版社编辑排版中。

写完了,不过瘾,应该再写一本介绍前端开发的书,这样才能给读者呈现如今流行的Web开发的整体架构,

于是去年10月开始动工写Vue.js,用的是目前最新的Vue3版本,到今年6月中旬交稿,估计半年后可以和读者们见面哦。

内容简介
本书循序渐进地介绍了Vue框架的用法,主要内容包括前后端分离的基本原理、MVVM设计模式、Vue的基本用法、内置指令、自定义指令、计算属性与数据监听、绑定表单、绑定CSS样式、CSS过渡和动画、Vue组件的开发、路由器、Vue CLI脚手架工具、组合API、Axios和状态管理等。 
本书内容通俗易懂、案例丰富,理论紧密结合实践。本书的范例都采用Vue 3版本。本书最后一章还提供了一个整合前端与后端的综合案例,帮助读者迅速掌握开发实用Web应用的技巧。
本书适合所有前端Web开发人员阅读,无论是初学者还是已经有开发经验的从业人员,都能从本书中受益。另外,本书也适合作为相关培训机构的教材。本书提供了详细的PPT讲义以及视频教程。

目录
第1章  Vue简介    10
1.1  MVVM设计模式    12
1.2  Vue框架的特点    13
1.3  第一个Vue范例    14
1.3.1  把模型数据绑定到视图    16
1.3.2  把视图上的输入数据与模型绑定    17
1.3.3  改变模型数据对视图的影响    18
1.4  Vue组件的选项    19
1.4.1  data选项    20
1.4.2  template选项    20
1.4.3  methods选项    22
1.5  Vue组件实例的生命周期    24
1.6  Vue的编译模板和渲染DOM的基本原理    29
1.6.1  编译模板    29
1.6.2  渲染DOM    29
1.7  异步渲染DOM    30
1.8  防抖动函数debounce()    32
1.9  Vue的开发和调试工具    35
1.9.1  NPM软件包管理工具    35
1.9.2  vue-devtools调试工具    36
1.10  小结    38
1.11  思考题    38
第2章  Vue指令    41
2.1节  内置Vue指令    41
2.1.1  v-bind指令    41
2.1.2  v-model指令    43
2.1.3  v-show指令    45
2.1.4  v-if/v-else-if/v-else指令    46
2.1.5  v-for指令    49
2.1.6  v-on指令    52
2.1.7  v-on指令的事件修饰符    54
2.1.8  v-text指令    57
2.1.9  v-html指令    58
2.1.10  v-pre指令    59
2.1.11  v-once指令    59
2.1.12  v-cloak指令    60
2.2  自定义Vue指令    61
2.2.1  注册自定义指令    61
2.2.2  自定义指令的钩子函数    62
2.2.3  自定义指令的动态参数和动态值    65
2.2.4  把对象字面量赋值给自定义指令    66
2.2.5  钩子函数简写    67
2.2.6  自定义指令范例:v-img指令    67
2.2.7  自定义指令范例:v-drag指令    68
2.2.8  自定义指令范例:v-clickoutside指令    70
2.3  小结    73
2.4  思考题    74
第3章  计算属性和数据监听    76
3.1  计算属性    76
3.1.1  读写计算属性    77
3.1.2  比较计算属性和方法    79
3.1.3  用计算属性过滤数组    81
3.1.4  计算属性实用范例:实现购物车    82
3.2  数据监听    85
3.2.1  用Web Worker执行数据监听中的异步操作    87
3.2.2  在watch选项中调用方法    90
3.2.3  比较同步操作和异步操作    91
3.2.4  深度监听    92
3.2.5  立即监听    93
3.2.6  比较计算属性和数据监听watch选项    93
3.3  Vue的响应式系统的基本原理    95
3.4  小结    97
3.5  思考题    98
第4章  绑定表单    101
4.1  绑定文本域    101
4.2  绑定单选按钮    102
4.3  绑定复选框    103
4.4  下拉列表    106
4.5  把对象与表单绑定    108
4.6  小结    110
4.7  思考题    111
第5章  绑定CSS样式    112
5.1  绑定class属性    112
5.1.1  绑定对象类型的变量    114
5.1.2  绑定计算属性    115
5.1.3  绑定数组    116
5.1.4  为Vue组件绑定CSS样式    117
5.2  绑定style属性    117
5.2.1  绑定对象类型的变量    118
5.2.2  绑定数组    119
5.2.3  与浏览器兼容    119
5.3  范例:变换表格奇偶行的样式    121
5.4  小结    123
5.5  思考题    124
第6章  CSS过渡和动画    126
6.1  CSS过渡    127
6.1.1  为<transition>组件设定名字    129
6.1.2  为<transition>组件显式指定过渡样式类型    131
6.1.3  使用钩子函数和Velocity函数库    132
6.1.4  设置初始过渡效果    135
6.1.5 切换过渡的DOM元素    136
6.1.6  过渡模式    138
6.1.7  切换过渡的组件    140
6.2  CSS动画    141
6.2.1  使用第三方的CSS动画样式类型    144
6.2.2  使用钩子函数和Velocity函数库    144
6.3  过渡组合组件<transition-group>    146
6.4   动态控制过渡和动画    149
6.5  小结    152
6.6  思考题    153
第7章  Vue组件开发基础    155
7.1  注册全局组件和局部组件    155
7.1.1  注册全局组件    155
7.1.2  注册局部组件    157
7.2  组件的命名规则    159
7.3  向组件传递属性    161
7.3.1  传递动态值    161
7.3.2  对象类型的属性    162
7.3.3  数组类型的属性    163
7.3.4  绑定静态数据    163
7.3.5  传递对象    165
7.3.6  属性的不可改变性    166
7.3.7  单向数据流    168
7.3.8  属性验证    170
7.4  non-prop属性    173
7.4.1  单节点模板中根节点对non-prop属性的继承    174
7.4.2  在单节点模板中禁止non-prop属性的继承    175
7.4.3  多节点模板中节点与non-prop属性的绑定    176
7.5  组件树    176
7.6  监听子组件的事件    180
7.6.1  验证事件    181
7.6.2  通过v-model指令绑定属性    183
7.6.3  通过v-model指令绑定多个属性    184
7.6.4  v-model指令的自定义修饰符    185
7.6.5  处理子组件中DOM元素的原生事件    188
7.7  综合范例:自定义组件<combobox>    189
7.8  小结    191
7.9  思考题    191
第8章  Vue组件开发高级技术    193
8.1 插槽<slot>    193
8.1.1  <slot>组件的渲染作用域    195
8.1.2  <slot>组件的默认内容    195
8.1.3  为<slot>组件命名    196
8.1.4  <slot>组件的动态名字    198
8.1.5  <slot>组件的自定义属性    198
8.2  动态组件<component>    201
8.3  异步组件    203
8.3.1  异步组件的选项    204
8.3.2  局部异步组件    206
8.4  组件的生命周期    206
8.5  组件的混入块    208
8.5.1  合并规则    209
8.5.2 全局混入块    212
8.5.3  自定义合并策略    212
8.5.4  使用混入块的注意事项    213
8.6  组件之间的互相访问    214
8.6.1  访问根组件    214
8.6.2  访问父组件    215
8.6.3  访问子组件    215
8.6.4  依赖注入    217
8.7  组件的递归    220
8.8  定义组件模板的其他方式    222
8.9  <teleport>组件与DOM元素的通信    222
8.9.1  在<teleport>组件中包裹子组件    224
8.9.2  多个<teleport>组件与同一个DOM元素通信    225
8.10  小结    226
8.11  思考题    227
第9章  虚拟DOM和render()函数    229
9.1  render()函数    229
9.2  真实DOM    231
9.3  虚拟DOM    232
9.4  h()函数的用法    233
9.4.1  虚拟DOM中虚拟节点的唯一性    234
9.4.2  h()函数的完整范例    235
9.4.3  创建组件的虚拟节点    237
9.5  用render()函数实现模板的一些功能    238
9.5.1  实现v-if和v-for指令的流程控制功能    238
9.5.2  实现v-model指令的数据绑定功能    239
9.5.3  实现v-on指令的监听事件功能    240
9.5.4  实现事件修饰符和按键修饰符的功能    241
9.5.5  实现插槽功能    242
9.5.6  生成动态组件的节点    245
9.5.7  自定义指令    246
9.6  在render()函数中使用JSX语法    247
9.7  综合范例:博客贴子列表    249
9.8  小结    251
9.9  思考题    251
第10章  Vue CLI脚手架工具    253
10.1  Vue CLI简介以及安装    253
10.2  创建Vue项目    254
10.2.1  vue create命令的用法    254
10.2.2  删除预配置    258
10.2.3  vue ui命令的用法    259
10.3  Vue项目的结构    259
10.3.1  单文件组件    260
10.3.2  程序入口main.js文件    262
10.3.3  项目的index.html文件和SPA单页应用    262
10.3.4  运行项目    263
10.4  安装和配置Visual Studio Code    263
10.4.1  安装Vetur和ESLint插件    265
10.4.2  在VSCode中打开helloworld项目    266
10.4.3  在VSCode中运行helloworld项目    267
10.5  创建单文件组件<Hello>    268
10.5.1  创建Hello.vue文件    268
10.5.2  修改App.vue文件    268
10.5.3  运行修改后的helloworld项目    269
10.6  创建正式产品    269
10.7  在Tomcat中发布正式产品    270
10.7.1  安装Tomcat    271
10.7.2  把helloworld正式产品发布到Tomcat中    271
10.8  小结    271
10.9  思考题    272
第11章  Vue Router路由管理器    273
11.1  简单的路由管理    273
11.2  路由管理器的基本用法    275
11.3  在Vue项目中使用路由管理器    277
11.3.1  创建Home.vue和About.vue组件文件    278
11.3.2  在组件中加入图片    279
11.3.3  在index.js中创建路由管理器实例    279
11.3.4  在main.js中使用路由管理器    280
11.3.5  在App.vue中加入<router-link>和<router-view>组件    280
11.3.6  运行helloworld项目    280
11.4  路由模式    281
11.5  动态链接    283
11.5.1  链接中包含路径参数    283
11.5.2  链接中包含查询参数    285
11.5.3  链接与通配符匹配    286
11.6  嵌套的路由    287
11.6.1  创建Items父组件的文件Items.vue    288
11.6.2  创建Item子组件的文件Item.vue    289
11.6.3  在index.js中设置父组件和子组件的路由    291
11.6.4  在根组件的模板中加入Items父组件的导航链接    292
11.7  命名路由    292
11.7.1  重定向    293
11.7.2  使用别名    294
11.8  命名视图    294
11.9  向路由的组件传递属性    297
11.9.1  向命名视图的组件传递属性    298
11.9.2 通过函数传递属性    298
11.10  编程式导航    299
11.11  导航守卫函数    302
11.11.1  全局导航守卫函数    305
11.11.2  验证用户是否登录    306
11.11.3  设置受保护资源    309
11.11.4  在单页面应用中设置目标路由的页面标题    310
11.11.5  特定路由的导航守卫函数    311
11.11.6  组件内的导航守卫函数    311
11.12  数据抓取    313
11.12.1  导航后抓取    313
11.12.2  导航前抓取    315
11.13  设置页面的滚动行为    317
11.13.1  scrollBehavior()函数的返回值    317
11.13.2  延迟滚动    318
11.14  延迟加载路由    318
11.14.1  把多个组件打包到同一个文件中    320
11.14.2  在路由的组件中嵌套异步组件    320
11.15  动态路由    321
11.16  小结    323
11.17  思考题    324
第12章  组合(Composition)API    326
12.1  setup()函数的用法    326
12.1.1  props参数    331
12.1.2  context参数    331
12.1.3  ref()函数    331
12.1.4  reactive()函数    332
12.1.5  toRefs()函数    333
12.1.6  readonly()函数    333
12.1.7  定义计算属性    334
12.1.8  注册组件的生命周期钩子函数    334
12.1.9  通过watch()函数监听数据    336
12.1.10  通过watchEffect()函数监听数据    337
12.1.11  获取模板中DOM元素的引用    338
12.1.12  依赖注入(provide/inject)    339
12.2  分割setup()函数    341
12.2.1  把setup()函数分割到多个函数中    341
12.2.2  把setup()函数分割到多个文件中    344
12.3  小结    345
12.4  思考题    345
第13章  通过Axios访问服务器    348
13.1  Axios的基本用法    348
13.1.1  同域访问和跨域访问    349
13.1.2  获取响应结果    351
13.1.3  处理错误    352
13.2  在Vue项目中使用Axios    353
13.2.1  异步请求    354
13.2.2  POST请求方式    356
13.2.3  对象和查询字符串的转换    358
13.2.4  下载图片    359
13.2.5  上传文件    361
13.2.6  设置反向代理服务器    362
13.3  Axios API的用法    363
13.4  请求配置    364
13.4.1  创建axios实例    367
13.4.2  设定默认的请求配置    368
13.4.3  请求配置的优先顺序    368
13.4.4  取消请求的令牌    369
13.5  并发请求    371
13.6  请求拦截器和响应拦截器    372
13.7  前端与后端的会话    375
13.7.1  通过Cookie跟踪会话    376
13.7.2  通过token令牌跟踪会话    376
13.8  前端与后端代码的整合    380
13.9  小结    382
13.10  思考题    382
第14章  通过Vuex进行状态管理    384
14.1  Vuex的基本工作原理    384
14.2  Vuex的基本用法    386
14.3  在Vue项目中使用Vuex    388
14.3.1  strict严格模式    389
14.3.2  通过计算属性访问状态    390
14.3.3  状态映射函数:mapState()    390
14.3.4  更新荷载(payload)    392
14.3.5  更新映射函数:mapMutations()    393
14.3.6  把更新函数的名字设为常量    395
14.3.7  更新函数只能包含同步操作    396
14.4  仓库的getters选项    396
14.4.1 getters映射函数:mapGetters()    398
14.4.2  为getters选项的属性设置参数    398
14.5  仓库的actions选项    399
14.5.1  传入更新荷载(payload)    401
14.5.2  动作映射函数:mapActions()    402
14.6  异步动作    402
14.6.1  异步动作范例    403
14.6.2  使用async/await的范例    405
14.7  表单处理    407
14.7.1  在处理input事件的方法中提交更新函数    408
14.7.2  可读写的计算属性    409
14.8  仓库的模块化    409
14.8.1  模块的局部状态    411
14.8.2  访问根状态    412
14.8.3  命名空间    412
14.9  通过Composition API访问仓库    419
14.10  状态的持久化    420
14.11  小结    421
14.12  思考题    422
第15章  创建综合购物网站应用    424
15.1  前端组件的结构    424
15.2  前端开发技巧    427
15.2.1  状态管理    427
15.2.2  状态同步    430
15.2.3  运用Composition API提高代码可重用性    432
15.2.4  在组件中显示图片    433
15.2.5  路由管理    433
15.2.6  每个组件的页面标题    435
15.2.7  用户登录流程    435
15.2.8  受保护的资源    437
15.2.9  异步处理Axios的请求    438
15.2.10  单独运行前端项目    440
15.3  后端架构    441
15.3.1  实现业务数据    442
15.3.2  实现业务逻辑服务层    446
15.3.3  实现DAO层    449
15.3.4  实现控制器层    450
15.3.5  前端与后端的数据交换    453
15.4  发布和运行netstore应用    457
15.4.1  安装SAMPLEDB数据库    457
15.4.2  发布后端netstore项目    458
15.4.3  调试和运行前端netstore项目    458
15.4.4  创建并发布前端项目的正式产品    458
15.4.5  运行netstore应用    459
15.5  小结    463
附录A  思考题答案    464

 

 


转载请注明:来源于[url]www.javathinker.net[/url]

版权声明
本文为[孙卫琴]所创,转载请带上原文链接,感谢
https://blog.51cto.com/sunweiqin/2892344

  1. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:disabled | :enabled 伪类
  2. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:first-child 伪类
  3. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:first-of-type 伪类
  4. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:focus 伪类
  5. 微信小程序界面设计小程序中的WXSS(css)选择器课程-派生选择器
  6. 微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-:nth-child() 伪类
  7. 微信小程序界面设计小程序中的WXSS(css)选择器课程-选择器的分组
  8. HTML基础-简介
  9. ASP实战之HTML入门-黄菊华-专题视频课程
  10. 微信小程序WxParse解析富文本(html)代码在线视频教程
  11. HTML语言基础.上
  12. HTML语言基础.下
  13. HTML!
  14. 【网页前端设计Front end】HTML语言基础.上(看不懂你来打我)
  15. 【网页前端设计Front end】HTML语言基础.下(看不懂你来打我)
  16. 【django轻量级框架】HTML上传文件拦截到本地
  17. HTML5基础知识实战演练教程-黄菊华-专题视频课程
  18. 基于WEB的HTML5购物网站、H5电商购物平台网上商城网站毕业设计(1)商城首页
  19. 基于WEB的HTML5购物网站、H5电商购物平台网上商城网站毕业设计(2)商城分类
  20. 微信小程序框架weui的基础使用
  21. 一文入魂!彻底巩固你的Nginx知识体系!
  22. Nginx是什么?有哪些核心技术?
  23. Nginx配置如何一键生成
  24. 就这一次把网路的几种IO模型以及Nginx基本原理彻底搞清楚
  25. 优质高效,阿里性能怪兽宝典(Redis+Nginx)限时开源,手慢无!
  26. Nginx的配置文件nginx.conf配置解释
  27. 安装的nginx 地址重写
  28. nginx防盗链
  29. nginx动静分离
  30. nginx优化
  31. Nginx虚拟主机
  32. Nginx 反向代理
  33. IDEA实现热部署前端界面(Tomcat、IDEA)
  34. JavaScript中call与apply的区别
  35. JavaScript代码无分号问题
  36. 在Chrome浏览器中禁用JavaScript
  37. JavaScript为内置对象添加原型方法
  38. JavaScript原型数据共享与方法共享探究
  39. JavaScript把局部变量变成全局变量
  40. JavaScript函数自调用
  41. JavaScript继承的几种方法
  42. 逆向递归看JavaScript原型
  43. JavaScript函数进阶
  44. JavaScript中的call、apply、bind
  45. JavaScript高阶函数——函数当参数、返回值、其他成员
  46. JavaScript沙箱模式
  47. JavaScript闭包——点赞小案例
  48. JavaScript函数闭包
  49. JavaScript正则验证密码强弱度
  50. JavaScript表单信息验证案例——使用正则
  51. JavaScript伪数组和数组
  52. CSS代码书写规范
  53. jQuery——jQuery基本概念
  54. jQuery——jQuery选择器 ※
  55. jQuery——jQuery的CSS,class,属性操作及案例应用
  56. jQuery动画代码详解
  57. jQuery节点操作、弹幕案例
  58. jQuery事件机制
  59. jQuery链式编程,each方法,多库共存
  60. New open source project in July: can you keep up with the speed of building wheels at the front end?