文档介绍:
Date
1
.
为什么存在框架?
Date
2
.
主流框架分析
纯模板引擎:最少的就是纯模板引擎,只管状态到界面的映射。
React和Vue:其实这两者都是非常专注的只做状态到界面映射,
Date
1
.
为什么存在框架?
Date
2
.
主流框架分析
纯模板引擎:最少的就是纯模板引擎,只管状态到界面的映射。
React和Vue:其实这两者都是非常专注的只做状态到界面映射,以及组件。
Backbone:它会给你多一些架构上指导,比如它会让你分层。
Angular:它做的事情就更多,它有自己的路由,这些都会包含在里面。
Ember:相比Angular,Ember做得就更加彻底,Ember信奉的是约定优于配置,它会将一切都帮你设计好打包好,你就开箱用就可以了。
Meteor:Meteor只是一个极端,它是从前到后全都包含,从前端到数据层到数据库,全都帮你打包好。
Date
3
.
React+ & Vue+
Date
4
.
Vue 现状
Date
5
.
Vue 现状
Date
6
.
简介
(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。
Date
7
.
Date
8
.
MVVM
Demo001
Date
9
.
生命周期
Demo005
每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些 生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会。
Date
10
.
模板语法
使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
Demo003
Date
11
.
计算属性
模板内的表达式是非常便利的,但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如
<div id="example">
{{ ('').reverse().join('') }}
</div>
对于复杂逻辑,使用计算属性
Demo008
Date
12
.
指令
指令(Directives)是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式(除了 v-for,之后再讨论)。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。
Demo007
Date
13
.
过滤器
允许你自定义过滤器,可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。
Demo004
Date
14
.
事件处理
用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。许多事件处理的逻辑都很复杂,所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用。
Demo006
Date
15
.
表单
你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件以更新数据,并特别处理一些极端的例子。
Demo009
Date
16
.
深入响应式原理
Date
17
.
组件系统
。可以说,。
Demo002
Date
18
.
谢谢
Date
19
.
此课件下载可自行编辑修改,供参考!
感谢您的支持,我们努力做得更好!
20
.