***
①数据驱动 数据驱动,就是通过控制数据的变化来改变(驱动)DOM。背后使用了观察者模式,靠数据的变化来控制页面的变化。这是vue框架的核心,第一周,一定要把数据驱动的思路和编程习惯养成。
②声明式渲染(声明的意思就是告知,广而告之,即告知程序(Vue框架),在何处渲染什么数据)
③响应式(当时数据发生变化时,页面会自动发生变化)
一、MV*模式
库 VS 框架
把一小部分通用的业务逻辑进行封装(函数),多个封装形成一个模块或者文件,多个模块或者文件就发展成为库或者框架
库:函数库,不会改变编程的思想,如:jQuery。
框架:框架改变了编码思想,代码的整体结构,如:vue,react,小程序等等。
①MVC架构模式
MVC的出现是用在后端(全栈时代)
M:model,模型,主要完成业务功能,在数据库相关的项目中,数据库的增删改查属于模型(重点)。(nodeJS中的db文件夹),没有页面,是纯粹的逻辑
V:view,视图,主要负责数据的显示(HTML+CSS,动态网页(jsp,含有html的php文件))页面的展示和用户的交互。
C:controller,控制器,主要负责每个业务的核心流程,在项目中体现在路由以及中间件上(nodeJS中的routes文件夹。
优点:耦合度低、复用性高、生命周期成本低、部署快、可维护性高、有利软件工程化管理 缺点:由于模型和视图要严格的分离,这样也给调试应用程序带来了一定的困难。
②MVP架构模式
MVP是单词Model View Presenter的首字母的缩写,分别表示数据层、视图层、发布层,它是MVC架构的一种演变 作为一种新的模式
M:model,模型,主要完成业务功能,在数据库相关的项目中,数据库的增删改查属于模型(重点)。
V:view,视图,主要负责数据的显示
P:Presenter负责业务流程的逻辑的处理,Presenter是从Model中获取数据并提供给View的层,Presenter还负责处理后端任务
MVP模式与MVC模式的区别:
在MVP中View并不直接使用Model,而在MVC中View可以绕过Controller从直接Model中读取数据。
③MVVM架构模式
MVVM是Model-View-ViewModel的缩写,MVVM模式把Presenter改名为ViewModel,基本与MVP模式相似。 唯一区别是:MVVM采用数据双向绑定的方式
vue是MVVM
MVC衍生出很多变体,MVP,MVVM,MV*, VUE是MVVM,M----V----VM,M数据(及其数据处理),V视图, VM是负责M与V相互通信
总结:(项目)架构只是一种思维方式,不管是MVC,MVP,还是MVVM,都只是一种思考问题解决问题的思维,其目的是要解决编程过程中,模块内部高内聚,模块与模块之间低耦合,可维护性,易测试等问题。 架构在于,做好代码的分工,配合。
二.vue框架的理解
1、首先:一个页面包括:结构(HTML模板),表现(css),行为(js)
2、其次:原生JS中的做法:写好HTML的模板和css样式,用js产生数据(逻辑),通过dom的方式控制数据显示在HTML中的那个位置,包括如何显示(DOM的方式改变样式)
3、vue框架:vue中,写好HTML模板,声明式地告知vuejs库,数据显示在何处,在vue对象中处理数据,不用做DOM操作(vuejs框架负责)
简单理解:new出来一个Vue的实例,传一堆配置参数,控制一片html
(有了vue,不用程序员操作dom了,因为,vue把dom操作都做好了)
三.Vue2的基本代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- V:view -->
<div id="app">
<!-- 声明式的告知vue,数据显示在何处 -->
<p>{{msg}}</p>
<p>{{msg}}</p>
<div>
我是{{str}}
</div>
</div>
</body>
</html>
<!-- vm: -->
<script src="./js/vue2.js"></script>
<script>
// M:model
let vm = new Vue({
el: "#app",
data: {
msg: "hello vue",
str: "张三"
}
});
</script>
四.Vue2 实现数据绑定(响应式)的原理
vue2的 数据绑定是通过 数据劫持和观察者模式 的方式来实现的
①数据劫持: vue2 使用Object.defineProperty();
当你把一个普通的 JavaScript 对象(json)传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
目的是:感知属性的变化。当修改属性 值时,程序是能够感知的(知道的)。如果知道的话,在Vue中可以去改变模板上的显示(使用发布订阅者模式)。
Object.defineProperty()函数:
作用就是直接在一个对象上定义一个新属性,或者修改一个已经存在的属性
Object.defineProperty()函数的格式:Object.defineProperty(obj, prop, desc)
参数:Obj:表示增加属性的对象 Prop:属性名 Desc:属性描述符
②观察者模式(发布订阅模式):
目的:当属性发生变化时,所有使用(直接使用和间接使用)该数据地方(订阅)跟着变化
vue2框架会把模板使用该数据的所有dom元素做订阅。当数据发生变化时,然后,发布给所有的订阅者。
五、vue语法(view层)
①data选项(model层)
功能:data选项中存储的是页面中需要显示的数据(当然数据可以进行一定的加工后再显示)
是初始化数据的位置,是元数据,是vue实例的一个实例属性,可以接受的数据类型: number/string/boolean/array/json/undefined/null/function
②数据绑定
把data中的数据,显示在html中的某处
③插值表达式
功能:可以让html标签里的(全部)内容变成动态的(从data中获取), 使用 mustache语法
格式:{{变量|属性名|表达式|函数调用等等}};
这种写法叫作:声明式渲染,即:只需要告知vue,数据在何处显示。
④内容指令
内容指令:让标签的内容变成动态的。
指令名:v-text 和 v-html
指令就是html标签的自定义属性
1、v-text=“数据名”
转义输出
功能:可以让html标签里的内容变成动态的(从data中获取),相当于innerText。
示例:
<p v-text="age"></p><!-- 12 -->
<p>{{age}}</p><!-- 12 -->
<p v-text="age">年龄:</p><!-- 12(没有显示文字年龄:) -->
<p>年龄:{{age}}</p><!-- 年龄:12 -->
<p v-text="msg"><b>12</b></p><!-- <b>12</b> -->
2、v-html="数据"
非转义输出(原封不动进行替换)
功能:可以让html标签里的内容变成动态的(从data中获取),但是不会对内容中的html标签进行转义。相当于innerHTML。
示例:<p v-html="msg"></p><!-- (12)(b标签加粗) -->
3、补充:
v-html和v-text的区别:
a、相同点:都是让标签的全部内容变成动态(数据)
b、不同点:
v-text:会对html标签做解析,相当于innerText。
v-html:不会对html标签做解析,相当于innerHTML
对比v-text和插值({{}})表达式:
a、当网络速度慢的时候(vueJs还没有处理自己的语法(v-text和{{}}),插值表达式会在页面上出现 {{}} 的显示,但是指令v-text不会,因为v-text是自定义属性,最多不做解读。当标签中的内容全部来自于属性,那么可以使用v-text。
b、插值表达式更加灵活,可以在标签里面的某个地方显示,但是v-text会让整个标签的内容全部变化。
⑤属性指令
属性指令:让标签的属性部分变成动态的。
指令名:v-bind
功能:可以让html标签里的属性(名和值)变成动态的(从data中获取)
属性值动态绑定:v-bind:html属性="数据"
属性名动态绑定: v-bind:[属性名变量]="数据"
示例:<div v-bind:id="dynamicId"></div>
注意: 属性值是布尔值 的情况
<input type="button" v-bind:disabled="isButtonDisabled" value="测试"> 如果 isButtonDisabled 的值是 null、undefined 或 false,则 disabled 属性甚至不会被包含在渲染出来的 <input> 元素中
⑥条件渲染(指令)
指令名: v-if 和 v-show
功能:一段dom可以根据条件进行渲染
v-show="布尔" | v-if="布尔" | |
---|---|---|
(原理上)区别 | 操作css的display属性 | 操作dom(添加和删除dom完成的) |
使用场景 | 适合频繁切换 | 适合不频繁切换 |
性能消耗 | 初始渲染消耗(就算元素不显示,也得创建元素) | 频繁切换消耗 |
安全性的不同 | 安全性不好 | 安全性好 |
补充:
面试题: v-if和 v-show的区别?
相同点: v-show和 v-if都是 控制 dom元素 的 显示和隐藏 的。
不同点:
1、原理不同:
v-if是通过dom元素的删除和添加,来完成显示和隐藏,
v-show是通过修改样式属性display的值,来完成显示和隐藏。
2、性能消耗的不同
v-if的性能损耗体现在切换时,
v-show的性能损耗在首次(特别是首次处于的显示的情况下)
3、使用场景的不同
v-if使用在元素切换不频繁的场景。
v-show使用在元素切换频繁的场景。
4、安全性的不同
v-if的安全性好
v-show的安全性不好。
dom的操作(如:创建和删除)是非常耗性能的。为什么? 请看:页面的重排和回流(提升移动端网页性能)_田江的博客-CSDN博客
⑦列表渲染(循环指令)
指令名: v-for
功能:把数据进行循环显示在html里(渲染)。推荐操作的数据类型:数组、对象、字符串、数字
格式:
用in或者用of都可以:
<li v-for="值 in 数据" v-bind:属性="值">{{值}}</li>
<li v-for="值 of 数据">{{值}}</li>
各种情况:
<li v-for="(值,索引) in 数组">{{值}}/{{索引}}</li>
<li v-for="(对象,索引) in 数组">{{对象.key}}/{{索引}}</li>
<li v-for="(值,键) in 对象">
<li v-for="(数,索引) in 数字">
<li v-for="(单字符,索引) in 字符串">
注意:
1、空数组,null,undefined不循环
2、也可以进行循环嵌套
3、v-for和v-if使用在同一个标签里时,v-for 的优先级比 v-if 更高,即:v-for套着v-if,先循环再判断
补充:
面试题:为什么不建议把v-for和v-if连用?
应该说,建议不要连用,或者说,在循环时,通过if只能拿到少部分数据时,建议不要使用。
原因: v-for比v-if优先级高,如果遍历的数组元素个数比较多,但是满足v-if条件比较少的情况下。会浪费性能。而且,每次刷新页面时,都会执行这样性能不高的代码。
解决:可以在computed里循环数组,通过filter的方式,过滤出需要的数据。v-for直接循环计算属性的结果(不用v-if)。而computed是有缓存的,所以,在原始数据没有变化时,不会多次过滤数据,这样,就提高了效率。
如下示例:
computed:{
isCompleteTask:function(){
return this.todos.filter(item=>item.isComplete);
}
}
⑧列表渲染时的key
在标签里使用属性key,可以唯一标识一个元素。
a、当 Vue.js 用 v-for 更新已渲染过的元素列表时,它默认用“就地复用”策略。即:尽量不进行dom元素的操作,只替换文本
b、如果你希望进行dom操作,就用key(key不要使用下标),因为key的目的是为了唯一标识一个元素。
有了key后,可以跟踪每个节点的身份,从而重用和重新排序现有元素
建议尽可能在使用 v-for 时提供 key attribute,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为(就地复用)以获取性能上的提升。
(注意:key不要使用(数组)下标,并不是会报错,而是失去了唯一标识的意义)