开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情
动态页面开发的基本模式
1. 什么是动态页面？
- 页面上的元素可以与用户动态交互，甚至页面通过浏览器可以与远程服务器进行交互。
2. 动态页面开发基本模式
-
结构页面 -> 赋予数据 -> 交互获取 -> 事件响应 -> 修改数据 -> 渲染页面
-
作为程序，一旦页面（视图）结构完成，那么视图的再次变化，就由数据的变化来驱动。
-
可以简单的概括为：数据驱动页面变化，页面收集数据变化
- 这种模式为：
M - V - V - M即：Model - View - View - Model
3. 数据的改变，具有不确定性，随着交互业务的变更而变更。但是视图的渲染具有特定的规律。
- 由此，将视图渲染抽取集成，就产生一些具有一定底层视图渲染能力的框架。
比如：VUE、React、AngularJS- 本质上它们都提供了一种底层模板封装技术，可以将数据渲染到模板中，并挂到页面上。
- 框架提供了由数据到页面渲染的基本过程，程序开发者只需将数据与渲染之间做绑定即可。可以让程序员更加关注于业务逻辑的处理。
3-1. 涉及两大核心技术：
1. 模板渲染引擎
2. 数据监听引擎
3. 学习类似框架的核心，要理解基本编程模式
(1). 要能够识别出影响视图变化的数据
(2). 要知道变化的数据如何影响视图
(3). 要能够编写出数据改变的逻辑
4. Vue框架
定义：是一个非侵入式的，渐进式的 MVVM 框架。应用场景比较多
4-1. Vue基本语法
1. 插入表达式
- 在HTML模板中的文本节点，使用{{ }} 来引用数据模型，或者计算表达式 + javascript 表达都能在这里使用，但不能有语句。 + 显示的结果就是表达的值
- 如果插值表达式的计算结果是一个 HTML 元素字符串,那么它将被原样的显示在该元素中。 + 要想按照元素进行添加，只能使用 V-html 指令来执行。
2. 属性绑定
- 插值表达式在元素的子元素位置，或者说在元素的文本结点位置插入数据，或渲染模板。
- 属性绑定就是与元素的属性结点相关。可以通过数据模型来改变元素的属性信息。 (1). 要绑定的属性 - V-bind:<html 属性名称> (2). 属性的值 - 表达式或者模型 >+ 属性绑定非常强大，对模板渲染可能会带很多丰富的解决方案。 绑定的值类型不同，则效果也各异，特别是针对不同类型的属性。
3. 数据类型
- (1) 布尔值
:disabled :checked :selected- (2) 通过定义对象数据模型，对元素的多个属性进行统一绑定
4. 事件绑定
- 事件绑定本质上是一种特殊的属性绑定。
- 在 Vue 中所有的事件注册都在元素属性上完成的。
- 定义时使用 v-on 指定，其参数是事件名称，事件名称就是元素标准事件属性去 on
比如：onClick，绑定时：v-on:click，简写:@click，其值是函数调用表达式
5. 指令
- 定义： + 以 v- 为前缀的，使用在元素的上 Vue 特定属性。 + 我们把指令所在的元素称为
当前元素
5-1. 插值指令
- v-html 指令：可以在当前元素的子节点上挂载HTML元素
- v-text 指令：它与插值表达式的功能一样，在当前元素下显示纯文本
5-2. 绑定指令
- v-bind 指令：该指令将表达式或模型绑定到一个
HTML元素的属性上。 - v-bind 的参数：即 ":" 后的文本，就是要绑定的属性名称。
- v-bind:id 其中 id 就是v-bind 的指令。
- v-bind:class
- v-bind:width
- v-bind:disabled
- 上述的 v-bind 指令使用都是要将动态数据绑定到属性上。
5-3. v-on指令：用于绑定元素的事件属性。其参数是事件名称，其值是表达式（包括函数的调用）
5-4. 结构指令
- v-if指令：条件结构。如果v-if的值为true，则当前元素显示，否则，不显示。
- 如果指令的表达式是动态计算的结果，则可以用于切换元素的显示状态。类似于 display:none
5-5. 循环迭代
- v-for指令：迭代结构。令当前元素可以 重复绘制。
