目录

第1篇Vue前端框架入门——非模块化开发

第1章Vue快速入门——数据展示31.1概述3

1.2准备工作3

1.2.1学习Vue 2还是Vue 33

1.2.2引入Vue 34

1.3编程式渲染DOM5

1.3.1HTML标签三要素与渲染DOM5

1.3.2编程式渲染5

1.3.3渲染标签体6

1.3.4渲染标签属性8

1.3.5渲染生成新标签9

1.3.6编程式渲染的缺点10

1.4Vue声明式渲染DOM11

1.4.1Vue自定义标签指令11

1.4.2Vue声明式渲染11

1.4.3数据与DOM（View）解耦12

1.5构建Vue的Hello Vue应用——根组件13

1.5.1引入Vue.js13

1.5.2定义根组件模板（Template）13

1.5.3数据绑定与视图渲染13

1.5.4定义组件选项对象14

1.5.5定义组件数据14

1.5.6创建Vue应用实例14

1.5.7挂载Vue应用与创建根组件实例15

1.5.8完整代码框架16

1.5.9运行结果161.6渲染标签体——数据展示17

1.6.1vtext: 标签体展示数据17

1.6.2vonce: 展示一次与响应式展示18

1.6.3vpre: 不渲染19

1.6.4vcloak: 解析完成后展示数据20

1.6.5vhtml: 动态渲染HTML21

1.7渲染标签属性——vbind22

1.7.1vbind标签属性绑定数据22

1.7.2vbind简写语法23

1.7.3vbind绑定对象24

1.7.4总结25

1.8标签样式绑定26

1.8.1class绑定26

1.8.2style绑定27

1.8.3样例27

1.9条件渲染与列表渲染29

1.9.1条件渲染: vif29

1.9.2列表渲染: vfor30

目录〖3〗第2章Vue中的数据管理33

2.1命名规则和选项式API33

2.1.1Vue中的命名规则33

2.1.2选项式API34

2.2简单计数器中的数据及处理34

2.2.1简单计数器34

2.2.2示例代码34

2.3数据data选项36

2.3.1定义数据data36

2.3.2数据挂载37

2.3.3数据访问37

2.3.4响应式渲染38

2.4处理数据methods选项38

2.4.1定义方法methods38

2.4.2方法挂载39

2.4.3访问方法39

2.5计算属性数据computed选项40

2.5.1定义计算属性computed40

2.5.2计算属性挂载41

2.5.3计算属性访问41

2.5.4响应式更新43

2.5.5缓存应用44

2.6监听数据变化watch45

2.6.1watch监听数据变化45

2.6.2定义watch46

2.6.3动态handler函数47

2.6.4总结与注意事项48

第3章数据交互与用户输入50

3.1绑定事件监听器von50

3.1.1von的基本用法50

3.1.2事件参数传递52

3.1.3事件冒泡54

3.1.4事件修饰符55

3.2双向数据绑定vmodel56

3.2.1单向绑定与双向绑定56

3.2.2vmodel的实现机理57

3.2.3双向绑定单选框58

3.2.4双向绑定复选框59

3.2.5双向绑定下拉框60

3.3从jQuery到MVVM——前端开发模式的演变61

3.3.1传统前端框架jQuery61

3.3.2MVVM框架61

3.3.3Vue中的编程式渲染——模板引用（ref）63

第4章组件入门——自定义标签65

4.1用户卡片组件65

4.1.1用户卡片组件的效果65

4.1.2用户卡片组件的代码65

4.2Vue中的组件构架67

4.2.1组件化思想67

4.2.2组件的构成要素68

4.2.3自定义标签的应用68

4.2.4组件定义与自定义标签的关系69

4.3定义组件70

4.3.1组件的组成70

4.3.2定义组件: HTML模板模式71

4.3.3定义组件: 字符串模板72

4.3.4定义组件: 模板字符串模板72

4.4组件的使用步骤73

4.4.1注册为全局组件73

4.4.2注册为局部组件73

4.4.3组件名称的规则73

4.4.4使用组件74

4.5父组件向子组件传递数据——组件props75

4.5.1组件props的作用与父子通信机制75

4.5.2在子组件中声明props(接收数据)75

4.5.3在子组件模板中使用props数据76

4.5.4在子组件脚本中使用props数据77

4.6子组件向父组件传递数据77

4.6.1组件通信78

4.6.2子组件声明自定义事件: emits78

4.6.3子组件触发自定义事件: $emit79

4.6.4父组件监听自定义事件: von80

4.6.5父组件监听子组件数据变化: @input81

第5章Vue组件插槽机制的深入解析83

5.1插槽基础83

5.1.1父组件向子组件传递标签体83

5.1.2插槽内容与出口84

5.2无名插槽84

5.2.1定义与使用无名插槽84

5.2.2渲染作用域85

5.2.3默认内容86

5.3具名插槽87

5.3.1定义与使用具名插槽87

5.3.2动态插槽名90

5.4作用域插槽90

5.4.1作用域插槽概述90

5.4.2具名作用域插槽92

5.5总结93

第2篇前端框架构建工具与脚手架

第6章构建工具——依赖包管理976.1Node.js简介与作用97

6.1.1Node.js简介97

6.1.2Node.js的作用98

6.2安装Node.js99

6.2.1下载Node.js99

6.2.2在Windows 7上安装高版本Node.js99

6.2.3设置环境变量Path100

6.2.4测试安装100

6.3包管理器npm100

6.3.1依赖包管理100

6.3.2npm的安装与验证101

6.4npm本地仓库的配置101

6.4.1默认本地全局仓库的位置102

6.4.2设置自定义全局仓库102

6.4.3全局配置与用户配置文件102

6.4.4添加执行程序的路径103

6.5npm镜像仓库的配置及其他包管理器103

6.5.1设置npm镜像仓库103

6.5.2镜像仓库管理工具: nrm104

6.5.3Node包管理器: yarn105

6.5.4Node包管理器: pnpm106

6.6构建Node.js项目106

6.6.1使用npm init构建项目骨架106

6.6.2使用npm install安装项目依赖107

6.6.3使用npm install安装所有项目依赖108

6.6.4使用require引入依赖包108

6.6.5使用node命令运行项目109

6.7Node模块配置文件package.json109

6.7.1package.json的配置109

6.7.2必需属性112

6.7.3描述信息114

6.7.4依赖配置115

6.7.5脚本配置117

6.7.6入口文件配置118

6.7.7命令行入口配置119

6.7.8发布配置120

6.7.9第三方配置121

6.8开发工具122

6.8.1Visual Studio Code(VSCode)122

6.8.2VSCode调试功能123

6.8.3指定主程序入口123

6.8.4调试任意文件（调试当前文件）124

第7章构建Vue Hello World应用126

7.1Vue项目的构建工具126

7.1.1构建工具Vue CLI126

7.1.2安装Vue CLI127

7.1.3Windows 7安装高版本Node.js Vue错误127

7.1.4使用命令行构建项目128

7.1.5使用图形界面搭建项目128

7.2运行项目129

7.2.1运行配置129

7.2.2启动开发服务器129

7.2.3访问项目129

7.3调试Vue项目130

7.3.1配置vue.config.js130

7.3.2配置调试launch.json131

第8章Vue 3项目构建解析: Hello World深入剖析132

8.1项目构建内容132

8.1.1项目目录结构132

8.1.2项目初始文件133

8.2前端首页文件index.html133

8.2.1自动创建index.html133

8.2.2index.html的作用与特性133

8.3构建的入口文件main.js134

8.3.1后台构建的入口文件main.js134

8.3.2入口文件的配置134

8.4后台构建入口文件分析135

8.4.1导入依赖模块135

8.4.2创建Vue实例: createApp135

8.4.3挂载到主页136

8.4.4Webpack的核心作用136

第9章构建工具——语法检查ESLint138

9.1ESLint简介138

9.2检查配置138

9.2.1Vue中的配置示例138

9.2.2root参数与配制文件作用域139

9.2.3编译环境env139

9.2.4代码解析parser和parserOptions139

9.2.5继承规则extends139

9.2.6自定义规则rules140

9.2.7插件规则plugins141

9.2.8特点文件检查overrides141

9.3执行检查141

9.3.1在Vue CLI中执行ESLint检测141

9.3.2在VSCode中集成ESLint插件141

9.3.3使用EditorConfig和Prettier维护代码风格142

第10章构建工具——编译之语法转换Babel143

10.1编译工具143

10.1.1背景介绍143

10.1.2编译的本质143

10.1.3Babel编译器144

10.2插件配置144

10.2.1配置插件144

10.2.2转换插件的示例144

10.3Vue中的Babel插件145

10.3.1Vue中安装Babel插件145

10.3.2Vue中配置插件145

10.4JSX技术146

10.4.1JSX简介146

10.4.2JSX的语法147

第11章构建工具——打包工具149

11.1打包项目149

11.1.1打包工具的关键功能149

11.1.2打包需求149

11.1.3安装打包工具Webpack150

11.1.4配置打包151

11.1.5运行打包151

11.2Webpack的核心概念152

11.2.1模块打包器152

11.2.2Loader文件处理与转换152

11.2.3Plugin功能扩展与配置153

11.2.4Webpack的构建流程153

11.3开发工具vuecliservice153

11.3.1运行: vuecliservice serve154

11.3.2打包: vuecliservice build154

11.4Vite构建Vue Hello World应用155

11.4.1从Webpack到Vite的转变155

11.4.2创建并运行Vue Hello World应用155

11.4.3项目结构分析156

11.5打包工具的对比157

11.5.1Webpack158

11.5.2Rollup158

11.5.3Parcel158

11.5.4Vite158

第3篇Vue前端框架深入——模块化开发

第12章Vue组合式中的数据管理——入门16312.1模块化编程与单文件组件163

12.1.1模块化编程163

12.1.2单文件组件164

12.2组合式编程入门setup166

12.2.1JavaScript简单计数器166

12.2.2选项式下的简单计数器167

12.2.3组合式下的简单计数器168

12.2.4组合式API170

12.3响应式数据171

12.3.1包装基本类型数据: ref函数171

12.3.2包装对象数据: reactive函数173

12.4计算属性——computed函数174

12.4.1computed函数的用法174

12.4.2响应式数据175

12.4.3缓存数据176

12.5数据处理方法177

12.5.1直接定义函数177

12.5.2组合函数（自定义Hook）178

12.6监听数据变化——watch函数180

12.6.1watch函数的用法180

12.6.2watch监听示例181

12.6.3watch监听选项182

第13章Vue组合式数据管理——进阶185

13.1组合式编程深入185

13.1.1setup定义和暴露状态与行为185

13.1.2组合式API的改进与优化186

13.1.3组合式的编程思想187

13.1.4组合式与选项式188

13.2组合函数编程与模块化编程189

13.2.1独立的组合函数189

13.2.2组合函数的结构189

13.2.3组合函数的使用190

13.2.4运行测试191

13.3响应式数据进阶192

13.3.1响应式数据的实现机理192

13.3.2响应式的实现192

13.3.3浅层包装: shallowReactive193

13.3.4浅层包装: shallowRef195

13.3.5手动触发响应: triggerRef197

13.3.6自定义响应包装: customRef198

13.4计算属性computed函数199

13.4.1计算属性的内存结构199

13.4.2计算属性的包装器200

13.4.3计算属性的复用200

13.5监听数据变化——watchEffect函数201

13.5.1watch监听某些数据源201

13.5.2watchEffect监听所有响应式数据203

13.5.3副作用的执行机制204

13.5.4副作用的清除205

13.5.5停止监听器206

13.5.6底层监听函数effect207

13.6只读响应式对象207

13.6.1深层只读: readonly207

13.6.2浅层只读: shallowReadonly209

13.7响应式类型检测210

13.7.1isRef: 判断Ref类型210

13.7.2isReactive: 判断Reactive类型210

13.7.3isReadonly: 判断Readonly类型210

13.7.4isProxy: 判断Vue代理对象210

13.7.5总结211

13.8响应式类型转换211

13.8.1解构与响应性211

13.8.2响应式解包和双向绑定212

13.8.3markRaw: 标记为原始对象214

13.8.4toRaw: 解包代理对象215

13.8.5unref: 解包ref215

13.8.6toRefs: 响应式解构216

13.8.7toRef: 单属性响应式解构218

13.9副作用作用域221

13.9.1effectScope(): 作用域的隔离与管理221

13.9.2获取当前作用域: getCurrentScope223

13.9.3生命周期管理: stop223

13.9.4自动清理回调注册: onScopeDispose223

第14章组件间的数据交互与通信机制224

14.1组件间的数据交互概述224

14.1.1setup的封闭特性与外部交互方式224

14.1.2setup与组件实例的隐式交互225

14.1.3setup与组件实例的显式交互226

14.1.4组件与外部数据的传递及方向性226

14.2父组件向子组件传递数据（props）228

14.2.1使用props实现父子通信的基本流程228

14.2.2定义子组件属性229

14.2.3在子组件模板中使用组件属性229

14.2.4在子组件setup中使用组件参数230

14.2.5在父组件中绑定子组件属性230

14.3子组件向父组件通信（emit）232

14.3.1子组件向父组件通信的原理232

14.3.2子组件声明自定义事件: emits232

14.3.3组件setup的上下文: context233

14.3.4子组件触发自定义事件: context.emit233

14.3.5父组件监听自定义事件: von234

14.4祖先组件向后代组件传递（provide/inject）234

14.4.1provide/inject概述234

14.4.2provide/inject选项式235

14.4.3provide/inject组合式237

14.5非父子组件间的通信（Event Bus事件总线）239

14.5.1Event Bus的简介239

14.5.2Event Bus的应用241

14.6使用组合函数进行数据交互243

14.6.1利用use函数增强组件与外部资源的交互243

14.6.2官方提供的组合函数244

14.6.3获取非props属性: useAttrs245

13.6.4获取插槽内容: useSlots246

14.7VueUse工具库247

14.7.1VueUse工具库概述247

14.7.2VueUse工具示例247

14.8模板引用ref操作DOM248

14.8.1模板引用——选项式248

14.8.2模板引用——组合式250

第15章组件状态管理与持久化252

15.1状态管理入门252

15.1.1组件内状态252

15.1.2组件内状态保持253

15.1.3状态的有效范围254

15.1.4状态管理与数据交换254

15.2状态保持255

15.2.1全局变量状态保持256

15.2.2模块级状态保持257

15.2.3状态保持的持久化259

15.3Pinia状态管理261

15.3.1Pinia状态管理简介261

15.3.2Pinia的安装和全局注册262

15.4Pinia选项式API263

15.4.1Pinia选项式概述263

15.4.2Pinia选项式管理计数器状态263

15.5Pinia组合式API265

15.5.1Pinia的组合式管理计数器状态265

15.5.2模块共享模式替代Pinia266

15.5.3状态与组件解耦267

第16章数据服务器268

16.1创建Web服务268

16.1.1建立Node项目268

16.1.2安装Express268

16.1.3创建Express应用268

16.1.4跨域配置270

16.2学生RESTful API设计与实现270

16.2.1RESTful API概述270

16.2.2学生控制器271

16.2.3数据存储272

16.3学生RESTful API的增删改查操作273

16.3.1查询学生: GET方法273

16.3.2查询所有学生: GET方法273

16.3.3增加学生: POST方法273

16.3.4更新学生: PUT方法274

16.3.5删除学生: DELETE方法274

第17章数据获取与提交——Axios275

17.1Axios入门275

17.1.1Axios简介275

17.1.2获取数据: axios.get276

17.1.3更新数据: axios.put276

17.1.4增加数据: axios.post277

17.1.5删除数据: axios.delete278

17.2Axios的作用范围279

17.2.1组件内部作用域279

17.2.2模块共享作用域280

17.3默认全局作用域282

17.3.1全局默认配置: axios.defaults282

17.3.2组件中使用默认配置axios283

17.3.3获取数据的时机283

17.4全局挂载Axios实例284

17.4.1显式挂载到全局属性（app.config.globalProperties）284

17.4.2隐式挂载到全局属性与插件桥接284

17.5组件中使用全局Axios实例286

17.5.1访问全局属性Axios286

17.5.2通过组件实例访问Axios286

17.5.3通过导入Axios共享模块访问287

17.5.4小结287

17.6全局配置Axios287

17.6.1全局配置Axios的优点288

17.6.2Axios全局配置与实例配置288

17.7拦截器——axios.interceptors289

17.7.1请求拦截器: axios.interceptors.request289

17.7.2响应拦截器: axios.interceptors.response290

第4篇Vue前端框架高级特性

——组件深度解析、路由与样式管理第18章组件的生命周期29518.1组件的生命周期简介295

18.1.1组合式生命周期钩子295

18.1.2组合式生命周期与实例关联296

18.1.3选项式生命周期选项296

18.1.4生命周期图297

18.2选项式生命周期298

18.2.1示例说明298

18.2.2加载生命周期299

18.2.3更新生命周期300

18.2.4卸载生命周期301

18.3组合式生命周期302

18.3.1示例说明302

18.3.2加载生命周期304

18.3.3更新生命周期304

18.3.4卸载生命周期305

18.3.5运行结果305

第19章Vue路由基础307

19.1路由的概念307

19.1.1路由的定义307

19.1.2Vue 3中的路由308

19.2Vue 3路由的模式309

19.2.1Vue 3路由的模式概览309

19.2.2基于Hash（Hash Mode）的导航309

19.2.3基于HTML5 History API的导航309

19.3全局路由表配置310

19.3.1导入组件310

19.3.2配置路由表routes311

19.4全局路由配置312

19.4.1全局路由配置简介312

19.4.2创建全局路由实例312

19.4.3全局注册路由313

19.5组件中使用路由器314

19.5.1引入314

19.5.2路由器的使用314

19.5.3通过组件实例this.$router访问314

19.5.4通过组合函数useRouter访问315

19.5.5通过模块共享导入访问316

19.6路由导航——无参模式317

19.6.1路由链接组件导航317

19.6.2路由渲染位置318

19.6.3编程式导航: router.push318

第20章Vue路由进阶: 组件响应多请求的实现320

20.1路由导航——动态路由320

20.1.1动态路由的定义320

20.1.2动态路由导航: params321

20.1.3监听动态路由: route.params322

20.1.4组件接收动态路由参数: route.params322

20.2路由导航——查询参数（Query）323

20.2.1路由传参323

20.2.2路由定义查询参数324

20.2.3路由导航中的查询参数: Query325

20.2.4监听路由的查询参数: route.query326

20.2.5组件接收查询参数: route.query326

20.3路由导航——props传参326

20.3.1路由定义: props传参327

20.3.2路由导航: props参数328

20.3.3监听路由的地址: route.fullPath328

20.3.4组件从props获取参数329

20.4路由的其他知识点329

20.4.1多级路由329

20.4.2路由守卫330

20.4.3动态添加路由332

第21章组件的高级特性334

2.1.1单文件组件334

21.1.1区块预处理: lang334

21.1.2区块预处理: 自定义区块335

21.1.3区块导入文件Src336

21.1.4注释337

21.2全局应用338

21.2.1入口程序: main.js338

21.2.2定义根组件: App.vue339

21.2.3创建Vue应用: createApp340

21.2.4挂载: app.mount341

21.2.5全局提供数据: app.provide341

21.2.6安装全局插件: app.use341

21.2.7注册全局组件: app.component342

21.2.8注册全局指令: app.directive342

21.2.9注册全局复用代码块: app.mixin343

21.3全局配置343

21.3.1性能设置: app.config.performance343

21.3.2编译选项: app.config.compilerOptions343

21.3.3全局属性配置: app.config.globalProperties344

21.3.4合并选项: app.config.optionMergeStrategies344

21.4动态组件345

21.4.1基本语法345

21.4.2动态组件属性345

21.4.3动态组件事件346

21.4.4动态切换组件346

21.4.5小结347

21.5自定义渲染组件349

21.5.1自定义渲染render349

21.5.2选项式自定义渲染350

21.5.3组合式自定义渲染351

21.5.4系统指令的render实现352

21.6JSX组件354

21.6.1Vue.js中的JSX354

21.6.2JSX的用法354

21.7Mixins代码块复用356

21.7.1Mixins简介356

21.7.2Mixins的应用356

21.8自定义指令357

21.8.1自定义指令的生命周期357

21.8.2定义自定义指令358

21.8.3注册自定义指令359

21.8.4使用自定义指令360

第22章<script setup>语法糖361

22.1<script setup>语法糖入门361

22.1.1什么是<script setup>361

22.1.2<script setup>计数器361

22.1.3setup语法糖省略了什么？362

22.1.4setup语法糖编译补充363

22.2<script setup>中的组件属性和事件363

22.2.1defineProps()和defineEmits()363

22.2.2用户卡片setup模式——定义组件属性和事件364

22.2.3用户卡片列表setup模式——局部组件注册365

22.3显式暴露defineExpose与模板引用367

22.3.1隐式暴露与显式暴露367

22.3.2子组件defineExpose暴露数据和方法367

22.3.3<script setup>语法糖中的模板引用368

22.3.4在父组件中模板引用访问子组件368

22.4<script setup>的其他语法糖369

22.4.1provide和inject369

22.4.2使用自定义指令369

22.4.3顶层await370

第23章组件样式管理371

23.1单文件组件中的CSS作用域371

23.1.1局部作用域: <style scoped>371

23.1.2深度选择器: deep372

23.1.3全局选择器: global374

23.1.4混合使用局部与全局样式374

23.1.5插槽选择器:slotted375

23.2CSS模块化376

23.2.1<style module>376

23.2.2自定义注入名称377

23.2.3独立CSS模块文件378

23.3动态样式379

23.3.1使用vbind()实现动态绑定379

23.3.2使用内联样式实现动态样式381

第24章CSS预处理382

24.1CSS预处理概述382

24.1.1预处理简介382

24.1.2预处理的安装382

24.1.3语法风格383

24.1.4配置构建工具384

24.1.5单文件组件导入386

24.1.6全局样式文件导入386

24.2CSS预处理特性386

24.2.1定义变量（Variables）386

24.2.2选择器嵌套（Nesting）387

24.2.3混合（@mixin）388

24.2.4继承（@extend）390

24.2.5导入（@import）392

24.2.6注释（Comments）392

24.3CSS预处理的高级特性393

24.3.1运算393

24.3.2函数393

24.3.3颜色函数395

24.3.4控制结构——条件语句397

24.3.5Sass(Scss)循环语句398

24.3.6Less循环语句399

24.3.7Stylus循环语句400

24.4应用实例400

24.4.13D文本400

24.4.2属性前缀402

第5篇前端框架实战——第三方组件库、国际化与错误处理

第25章第三方组件库——Ant Design40725.1Ant Design for Vue407

25.1.1局部导入组件407

25.1.2全局注册组件408

25.2Ant Design列表组件408

25.2.1学生列表408

25.2.2表格组件<atable>409

25.2.3个性化列410

25.2.4卡片组件<acard>详解411

25.2.5表格组件<atable>详解412

25.2.6按钮组件<abutton>详解413

25.3Ant Design表单组件414

25.3.1编辑学生414

25.3.2表单组件<aform>415

25.3.3表单验证rules416

第26章国际化与Vuei18n417

26.1Vue 3国际化: Vuei18n基础417

26.1.1安装Vuei18n417

26.1.2创建语言包（字典表）417

26.1.3创建i18n实例418

26.1.4全局注册i18n418

26.1.5测试国际化实例418

26.2组件中使用国际化419

26.2.1通过组件实例访问419

26.2.2通过useI18n组合函数访问421

26.2.3通过导入i18n实例模块访问422

26.2.4切换语言423

第27章错误处理: 构建健壮的应用程序425

27.1全局错误处理425

27.1.1设置全局错误处理: app.config.errorHandler425

27.1.2设置全局警告处理: app.config.warnHandler425

27.2使用通知服务显示错误426

27.2.1配置全局错误处理426

27.2.2测试错误处理426

27.3组件级别错误的捕获与处理427

27.3.1使用onErrorCaptured捕获错误427

27.3.2测试错误处理427

27.3.3错误传递规则428

27.4其他错误处理方法428

27.4.1代码块级别错误处理: try/catch429

27.4.2错误日志服务429

第6篇跨框架入门——Vue、React、Angular

第28章React入门43328.1React概述433

28.1.1React简介433

28.1.2React通用设计原则434

28.2使用Create React App构建Hello World项目434

28.2.1安装构建工具CRA435

28.2.2创建新项目435

28.2.3运行项目435

28.2.4修改应用程序以输出"Hello World!"436

28.3函数组件437

28.3.1函数组件概述437

28.3.2函数组件设计模式438

28.3.3函数组件与Vue组合式API438

28.3.4函数组件与Vue的setup函数的对比439

28.3.5函数组件示例440

28.4函数组件中的状态管理441

28.4.1简单计数器示例441

28.4.2定义状态数据useState442

28.4.3处理数据——更新状态443

28.4.4渲染数据——返回渲染模板443

28.4.5使用组件445

28.5父子函数组件数据传递445

28.5.1子组件中接收属性445

28.5.2父组件中传递属性: {}445

28.5.3子组件中调用回调函数446

28.5.4父组件中绑定回调函数: {}447

28.6类组件447

28.6.1类组件的设计模式448

28.6.2类组件与Vue选项式API448

28.6.3类组件示例449

28.7类组件计数器450

28.7.1简单计数器450

28.7.2定义组件状态数据: this.state451

28.7.3更新状态: this.setState452

28.7.4渲染数据: render方法452

28.7.5父子组件的数据传递453

第29章Angular入门455

29.1Angular概述455

29.1.1Angular简介455

29.1.2Angular的架构模式456

29.1.3Angular组件的实现方式456

29.1.4Angular组件与Vue选项式API组件的对比458

29.2构建一个Angular的Hello World项目459

29.2.1使用Angular CLI创建项目459

29.2.2创建一个新的Angular项目459

29.2.3修改应用以显示Hello World459

29.2.4运行项目460

29.3类组件: 构建一个计数器460

29.3.1创建一个计数器组件: ng generate460

29.3.2组件的类文件461

29.3.3组件状态和行为462

29.3.4组件中的元数据464

29.3.5模板中的数据渲染466

29.3.6父组件中使用子组件467

29.4父子组件的数据传递468

29.4.1定义组件属性: @Input()468

29.4.2父组件绑定子组件属性: ［］468

29.4.3定义输出事件: @Output468

29.4.4父组件绑定子组件输出事件: ()469