原生API vs 函数库 vs 框架
DOM jQuery Vue
- 原生API:浏览器/平台已经实现的,咱们可直接使用的API 。比如: DOM BOM
- 优点: 万能; 缺点: 繁琐
- 函数库(library):基于原生API,进一步封装的,更简化的一组函数的集合。比如: jQuery
- 优点: 每个API都极简化; 缺点: 没有改变做事的方式。比如: 依然需要增删改查和事件绑定
- 框架(framework):前人将多次成功的项目经验总结起来,形成的半成品项目。比如: Vue
Vue概述:
- 什么是Vue.js:
- 一个渐进式的,基于MVVM设计模式的JavaScript框架。
- 渐进式(progressive):虽然提供了很多功能,但不强迫全部使用。可逐渐使用,逐渐扩大使用范围。
- 何时: 适用于以数据操作为主的项目
- 如何: 官网: https://cn.vuejs.org/
特点:不支持IE8及以下版本
MVVM设计模式:
- 传统网页组成: 3部分:
- HTML:定义网页的内容
- CSS:定义网页样式
- JS:添加交互行为
- 问题: JS肩负的任务太多太杂了,就产生了大量重复的劳动
- 重新划分3部分:
- View视图: 包含网页内容(HTML)和样式(CSS)
- Model 模型数据: 指程序中创建的或从服务器端获取的数据
- ViewModel 视图模型/控制器: 代替之前的DOM/JQUERY操作,自动把模型中的数据,绑定到View中的指定位置。
- 其实就是new Vue()
引入Vue.js时,等于在全局引入了一种新类型Vue
包含:
- 1.构造函数: 创建该类型的子对象
- 2.原型对象:包含该类型子对象共用的成员
new Vue()
创建Vue类型的一个实例,其实是创建一个用于同步Model和View的ViewModel对象
1 | new Vue({ |
new Vue():2件事(2大子系统)
1. 响应系统:
new Vue()将 data 中的每个模型数据提升为整个 Vue 对象的访问器属性。
在访问器属性的 set 方法中,只要修改模型数据的值,就触发通知。通知 Vue 框架修改页面。
一句话就是,通过数据劫持 + 发布订阅模式。使用 Object.defineProperty()
方法来实现数据劫持
2. 虚拟DOM树:
什么是: 用js程序模拟的一棵简化版的 DOM 子树
为什么:真实 DOM 树包含的内容太多!极其不便于比较和遍历。
如何生成虚拟DOM树:
new Vue({el:"选择器"})
会查找指定父元素,并遍历其中所有子内容。仅将可能发生变化的元素和属性用js对象结构集中存储在内存中。何时使用虚拟DOM树:
- 当修改模型数据,触发响应系统时,响应系统通知 Vue 要修改DOM树。
- Vue 框架就遍历虚拟 DOM 树,找到发生变化的节点,利用底层的 DOM API 仅修改发生变化的 DOM 元素
虚拟DOM树的优点:
- 1.节点个数和属性个数都比真实 DOM 树少的多,极其便于遍历和比较
- 2.仅修改受影响的 DOM 元素,不变的元素不用修改。
数据绑定语法:
{{}}:双括号语法,外号大胡子语法(Mustache)
什么是数据绑定: 选择特定的Model变量,绑定到View试图中指定位置。使视图中指定位置的值,随Model变量同步变化。
何时: 只要希望用Model中的一个变量,填补View中的一个动态显示位置时。
如何:
{{模型变量名}}
执行时,会用模型变量的当前值,代替{{}}位置
- {{}}中可包含以下几种情况的内容:
- 1.{{ 模型变量名 }} 比如:
{{ uname }}
- 2.{{ 运算 }} : 算术/比较/逻辑/三目运算
{{ price * count}}
- 3.{{ 方法调用}} 比如:
{{ uname.toUpperCase() }}
- 4.{{ 对象.属性 }} 比如:
{{ address.city }}
- 5.{{ 数组[i] }}
- 注意!不能写if else for 等程序解构
- 1.{{ 模型变量名 }} 比如:
问题: {{}} 只能绑定innerHTML,不能绑定属性和事件
解决: 指令
指令(directive)
什么是:Vue.js提供的,专门用于增强HTML功能的特殊属性
为什么: HTML本身是静态的,写死的,无法根据数据动态变化属性值。
何时: 只要希望动态绑定HTML属性时,都用指令
包括: 13个:
1. v-bind: 专门绑定属性值。
- 如何:
<ANY v-bind:属性="模型变量">
- 强调: 不用加{{}}
- 简写: v-bind可省略,只写”:属性=”
2. v-for: 根据数组或集合内容,反复生成多个相同的HTML元素
何时: 只要根据数组数据反复生成多个相同的HTML元素
如何:
<ANY v-for="(元素值,下标) in 数组|对象|字符串">
结果:
- 根据in后的数组/集合中元素的个数,反复生成当前HTML元素。
- 每次in都会取出数组/集合中当前元素值和位置下标
- 如果 ANY下还有子元素,则子元素可用for获得元素值和下标继续绑定内容。
强调: v-for必须放在要反复生成的HTML元素上,不能放在父元素上!
简写:
- 1.如果不关心下标,只关心内容: v-for=”变量 in 数组”
- 2.in可换为of,
3. v-if: 根据一个 Boolean 类型的模型变量值作为条件,控制是否生成该元素到 DOM 树(控制一个元素的显示和隐藏)
- 何时: 根据条件,控制一个元素的显示和隐藏
- 如何:
<ANY v-if="true" >
- 依次判断每个条件,只要条件为true,就生成该元素,其余元素不生成(隐藏)
- 强调: v-if,v-else-if,v-else之间必须紧邻,不能插入其它元素。
4. v-show: 用法和v-if几乎完全一样!也可以控制一个元素的显示隐藏。
- 如何:
<ANY v-show="bool类型的模型变量">
笔试题目: v-show vs v-if的区别:
- v-show,不改变DOM树,通过display:none/block控制显示隐藏
- 优: 效率高!
- 缺: 只适合控制一个元素的显示隐藏。如果控制多个元素的显示隐藏时,代码会很繁琐
- v-if,通过添加/删除DOM树上元素节点的方式控制显示隐藏
- 缺: 效率低!
- 优: 专门控制多个元素选其一显示,代码精简。
- 如果一个元素频繁显示隐藏切换,首选v-show
- 如果多个元素控制选其一显示,首选v-if, v-else-if, v-else
5. v-on:专门为元素绑定事件处理函数
1.在new Vue()实例对象内添加事件处理函数:
1
2
3
4
5
6
7
8
9new Vue({
el:"选择器"
data: { 模型变量:值, ... ... }
methods:{
处理函数(参数列表){
//访问当前Vue内自己的模型变量: this.变量名
}
}
})2.在HTML元素上绑定事件处理函数:
<ANY v-on:事件名="处理函数()">
获得事件对象e:<ANY v-on:事件名="处理函数($event)">
$event是Vue内置的事件对象,不能随便改名
简写: v-on: 被@替代:<ANY @事件名="处理函数()">
事件修饰符: 对常用事件操作的简写!
1.取消冒泡: e.stopPropagation()<ANY @事件名.stop="处理函数()">
2.阻止默认行为: e.preventDefault();<ANY @事件名.prevent="处理函数()">
3.键盘事件:<ANY @事件名.按键号="处理函数()">
6. v-html和v-text
v-html 使用模型变量替换当前元素的innerHTML
何时: 如果绑定一段HTML代码片段
v-text 使用模型变量替换当前元素的textContent
何时: 如果绑定纯文本内容
笔试题目:{{}} vs v-text vs v-html
- 是否编译内容:
v-html,专门用于绑定HTML片段,绑定的内容会被浏览器解析为正文。{{}}和v-text,专门用于绑定不需要解析的纯文本内容,保持内容的原样不变。 - 屏蔽{{}}
问题: 当请求响应慢时,用户可能短暂看到{{}}语法。
解决: 用v-text和v-html代替{{}}。但是v-text和v-html在请求响应慢时,暂时显示为空白
7. v-cloak:
- 什么是: 在vue实例加载完之前,暂时隐藏需要绑定的元素。
- 为什么: 避免在vue实例加载完之前,用户短暂看到{{}}
- 何时: 只要希望在vue实例加载前,不然该用户看到{{}}
- 如何:
- 1.自定义v-cloak属性选择器,定义display:none
- 2.在要绑定的元素上,添加v-cloak
- 原理: new Vue()实例加载完成后,会自动找到v-cloak属性,并移除。
8. v-pre: 保护内容中的{{}}不被编译,保持原样
何时: 正文中刚好也有{{}}时,不想被Vue识别
9. v-once: 让当前元素只在首次加载时,绑定一次。之后,即使模型数据发生变化,页面也不改变。
原理: 标有v-once的元素在首次加载后,就从监视队列中移除了。不再受监视。
10. 双向绑定:
单向绑定: 仅能将内存中模型数据的修改更新到视图中(M->V)
双向绑定:即能将内存中模型数据的修改更新到视图中(M->V),又能将视图中的更改,反向更新回内存中的模型数据(V->M)
何时: 只要页面上内容修改,也想反向更新回内存中的模型数据时——专门用于绑定表单元素
如何: <表单元素 v-model:value="模型数据">
简写: 可省略:value,<表单元素 v-model="模型数据">
自定义监听函数: 监听函数就是当模型数据发生变化时自动执行的函数
何时: 只要希望模型数据一发生变化就立刻执行一项任务——搜索帮助/表单验证
如何:
1 | new Vue({ |
各种表单元素的绑定方式:
- 文本框/文本域:
v-model="模型变量"
- 单选按钮:
<input type="radio" name="组名" value="值1" v-model="变量">
<input type="radio" name="组名" value="值2" v-model="变量">
其实v-model绑定的是checked属性checked= (变量==value)
复选框: v-model绑定的也是checked属性
选择框: v-model 绑定selected= (变量==option的value)
绑定class和style属性
class 2种方式:
- 1.用字符串方式绑定class和style
- 2.用对象方式绑定:
1
<ANY class="固定不变的class" :class=" xxxClassObj " />
1
2
3
4
5
6
7
8
9new Vue({
data:{
xxxClassObj:{
fade: 'true/false',
in: 'true/false',
active: 'true/false'
}
}
})
结果:
- 动态class中的类会和class中的类合并
- 动态class中只有值为true的类名才能出现在class中
总结: - 1.在多个元素之间切换一个class,首选用字符串方式
- 2.控制一个元素的class,有与没有切换,首选用对象方式
style 2种方式:
- 1.作为字符串属性绑定:
- 2.用对象方式:
1
<ANY :style="styleObj" />
1
2
3
4
5
6
7new Vue({
data:{
styleObj:{
'css属性': '属性值'
}
}
})
建议: 今后所有style都采用对象语法绑定。
计算属性:
什么是: 不实际存储属性值,而是根据其他属性的值动态计算获得。
为什么: 不是所有值都可直接获得。
何时: 只要一个值不能直接获得,需要根据其它值计算获得时
如何:
1 | new Vue({ |
绑定:和普通属性的绑定完全一样!{{属性名}} 强调: 不要加()
计算属性 vs 函数
计算属性的值可被Vue缓存并重复使用,只要计算属性依赖的其它属性不改变,就不用重复计算!
函数只要调用,就重新计算!
自定义指令
如何自定义:
- 创建自定义指令:
Vue.directive("指令名",{
Vue.directive("指令名",{ //创建一个自定义指令 inserted(elem){ //当当前元素被挂载到DOM树后自动执行 //elem 当前所在元素的DOM对象 //elem可调用一切DOM的API } })
强调: 定义指令时,指令名不要加v-前缀!
2. 使用自定义指令: <any v-指令名>
- 本文作者: Jambo
- 版权声明: 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处!