前言
前端技术的发展过程
最早期:原生 DOM 配合 JS 实现对网页的操作;
发展:利用函数封装的技巧,把原生 DOM 封装成jQuery框架;
由于目前市场份额 被Vue抢占,目前使用较少,大多是旧项目维护
现在:
从2009年,出现了第一款工程化框架——Angual(Google公司);
从2013年,出现了第二款框架——React(Facebook公司);
从2014年,出现了国产框架——Vue(开源)
目前在国内占据了 大份额市场,并且比较适合初学者学习和使用。
一、Vue与jQuery对比
核心思想的对比
jQuery思想:“write less,do more” 写的,做的多
利用函数封装的技巧,简化DOM操作的代码
Vue思想:“不写DOM操作,一样操作DOM”
二、Vue的的实现原理
2.1 Vue实现原理(重点)
Vue的实现原理:监听对象中属性的变化,当属性发生修改时,同步更新此元素相关的DOM元素。(数据发生变化时,自动更新属性)
下面是Vue实现原理的简易代码:
<script>
var data={
msg:null
},
Object.defineProperty(data,'msg',{
set(value){
clonsole.log('元素属性被赋值为:',value)
//更新到 id=box 的元素里
box.innerHTML=value
}
})
//书写此代码,就可以自动更新 id=box 的内容
data.msg='Hello World!'
</script>
简单来说:Vue的实现原理就是通过对象的 defineProperty 方法,监听这个对象中属性值的变化,当元素的属性发生变化时,在通过元素的 innerHTML 属性,将变化的值更新到元素中。
2.2 Vue的构造过程(了解)
<body>
<div id="app"></div>
<script>
// 大概说明下: new Vue() 做了什么
function Vue(options) {
// 源代码中: 固定读取 options.el
this.$el = document.querySelector(options.el)
// 源代码中固定读取: data属性名
for (let key in options.data) {
// 遍历 data 对象的属性, 挨个保存到当前 vue对象里
this[key] = options.data[key]
}
for (let key in options.methods) {
this[key] = options.methods[key]
}
}
var a = new Vue({
// 为什么说是固定属性: el
el: '#app',
// 固定的data属性: 因为源代码中读取的是data
data: { num: 4, name: '亮亮' },
methods: {
add1() {},
add2() {},
},
})
console.log(a)
</script>
</body>
三、如何学习Vue呢?
官方文档:API — Vue.js
由于Vue是国产的开源框架,所以他的官方文档中提供了大量的说明,并且都有讲解视频,便于我们的学习和使用,所有,在使用时可以多去参考一下官方文档。
四、Vue的版本
Vue发展到现在,分为3个版本:
vue1:已经淘汰了;
vue2:目前的主流,并且比较适合新手入门学习;
vue3:未来的趋势,后续会更新(和Vue2的差异不大)。
五、Vue的开发方式
Vue的开发方式有两种:
①脚本方式;类似于jQuery,通过引入脚本 ——适合新手入门
脚本地址:安装 — Vue.js
vue版本分为开发版和生产版,开发版(未压缩版)有完备的注释、代码格式,以及见名知意的变量名和极其友好的错误提示,可读性好,适合学习和开发之用,但是体积大,不适合生产环境快速下载运行。
生产版(压缩版)去掉了所有数值和代码格式,极简化了变量名,去掉了友好的错误提示,体积小,适合生产环境快速下载运行,但是可读性差,不适合学习和开发之用。
②脚手架方式:高度自动化/高度工程化的方式 ——是实际开发中使用的
通过脚手架软件,去生成标准化的项目包
拥有固定的文件夹来存放不同功能的文件
拥有自己的服务器,有热更新功能
带有.vue文,对 vue 代码有更多支持 ——代码提示
六、MVVM的开发模式
以往的前端代码分为三个部分:HTML(专门定义网页的内容和结构)、CSS(专门为网页添加样式)、js(专门操作网页中的内容,为页面添加交互行为)。
但是HTML和CSS功能太弱,即使很小的修改,都要通过JS来操作,导致js中存在大量重复和冗余的工作。所以为了解决此问题,就需要用到MVVM设计模式。
1.MVVM设计模式
MVVM设计模式是对前端三大代码的重新划分,包括三部分;
(1)界面(View):包含以前的HTML+CSS,让HTML也支持变量、判断、循环;
(2)模型对象(Model):专门保存页面中所需的变量和函数的特殊对象;
data:{ } 专门保存界面中所需的所有变量
methods:{ } 专门保存界面中所需的所有函数
(3)视图模型(ViewModel):专门负责将模型对象中的变量和函数,自动运送到界面中指定位置的特殊对象,自动将程序中的变量和函数运送到界面中所需的位置。并且还能自动保持界面显示与程序中的数据同步。
面试题:什么是MVVM!!!
概念介绍
- MVVM分为三个部分:分别是M(Model,模型层 ),V(View,视图层),VM(ViewModel,V与M连接的桥梁,也可以看作为控制器)
1、 M:模型层,主要负责业务数据相关;
2、 V:视图层,顾名思义,负责视图相关,细分下来就是html+css层;
3、 VM:V与M沟通的桥梁,负责监听M或者V的修改,是实现MVVM双向绑定的要点;- MVVM支持双向绑定,意思就是当M层数据进行修改时,VM层会监测到变化,并且通知V层进行相应的修改,反之修改V层则会通知M层数据进行修改,以此也实现了视图与模型层的相互解耦;
· 关系图
2.vue的绑定原理(vue框架如何实现MVVM设计模式)
(1)访问器属性
a.new Vue()将data:{ }引入到new Vue()中时,先将data对象及其内部的内容全部隐藏;
b.new Vue()自动为data中每个变量创建访问器属性,监视对每个变量的修改操作,访问器属性不再隶属于data对象,而是直接隶属于new Vue();
c.只要在程序中修改变量,都会自动调用访问器属性的set()函数;
d.set()函数中提前安插了一个通知函数(),可通知外部哪个变量值发生了变化;
e.methods中所有的函数,进入new Vue()后,methods对象就被打散,原methods中所有函数直接隶属于new Vue()对象;
f.methods中的函数和data中的变量,最终会平级保存,都直接隶属于new Vue(),methods中的函数,想操作data中的变量,必须加this.。
(2)虚拟DOM树
是专门保存界面中所有可能发生变化的元素的简化版DOM树;在创建完data和methods之后,根据el属性值的选择器所指的元素,去扫描界面中指定区域的元素,一边扫描真实DOM树,一边创建虚拟DOM树,只保存可能发生变化的元素。
a.只要在程序中修改了变量值,就会自动触发访问器属性的set(),自动执行set()中的通知函数,通知函数()通知虚拟DOM树哪个变量发生了变化;
b.虚拟DOM树扫描自己内部保存的所有可能发生变化的元素,只找出受本次变量修改影响的元素;
c.可以用提前封装好的DOM操作,将变量的新值,自动修改回页面中显示。
小结(高频笔试面试):
vue绑定原理:访问器属性、虚拟DOM树;
虚拟DOM树四大优点:
(1)内容少体积小:只保存可能变化的个别元素;
(2)遍历查找快:保存的元素少,所以每次遍历查找受影响的元素时比遍历原始DOM树;
(3)修改效率高:每次只修改受影响的个别元素,不受影响的元素是不改变;
(4)避免重复编码:提前封装了DOM的增删改查+事件绑定操作。
七、Vue的使用
1、Vue三步
(1).做界面
1.1将界面中所有元素包裹在一个唯一的父元素下,通常用 id = app 的 div 的盒子作为父元素
<div id="app"> </div>
1.2找到界面中将来可能随程序自动变化的位置,用{{ 变量名 }}来标记/占位;
1.3找到界面中将来可能触发事件的元素,用专门的语法:@事件名="事件处理函数名" 来标记。
(2).创建一个new Vue()对象,用来监控div所包含的区域
var vm = new Vue({ //vue对象中,必须用el属性,指出new Vue()要监控的区域 el: "#app", })
(3).定义模型对象,来保存界面中所需的所有变量和事件处理函数
3.1创建一个data:{ }来保存界面中所需的所有变量和初始值;
3.2创建一个methods:{ }来保存界面中所需的所有事件处理函数;
注意:
模型对象就是专门替界面保存变量和事件处理函数的特殊的对象
methods中的事件处理函数中,如果要操作data中的变量,必须加this.
不用考虑如何从界面取值和如何将新值放回界面,只需考虑如何把data中的变量值修改正确。
2、插值语法
插值语法是 在界面中标记可能发生变化的元素内容的特殊语法,只要发现一个元素的内容可能随程序自动改变时,都要用插值语法来标记。
<div>{{JS的代码范围}}</div>
{{ }}的原理和模板字符串中的${ }完全一样,可以放一切有返回值的合法的js变量或表达式如变量、三目、算术计算、访问数组元素、创建对象、调用函数;不能放分支、循环以及没有返回值的js表达式。
<body>
<div id='#app'>
<!---插值语法:{{}}--->
<div>姓名:{{ename}}</div>
<div>年龄:{{age}}</div>
</div>
<script>
var a = new Vue({
el:'#app',//要管理的元素
//data:数据项(静态数据)
data:{
ename:'喜羊羊',
age:'12'
},
//固定属性:methods 用于存放函数
methods:{}.
//计算属性(使用的时候不能传值)
computed:{}
})
//通过打印输出可以看到:data中的数据项,会被自动添加 get/set 监听器,实现数据变化,更新DOM的效果
console.log(a)
</script>
</body>
在数据渲染过程中,Vue会自动帮你为data中的属性做循环、遍历等操作,给每个元素添加赋值监听和赋值读取的操作。这样就能实现在数据变化时,{{}}中的值实时发生变化。
3、事件
3.1给他元素添加事件
在Vue2.0中,给元素添加事件使用的 @事件名='函数名' eg:@click='see'。
3.2 methods中,this的指向问题
一般来说:函数在执行,函数中的this指向是其执行时所在的对象,
但是在Vue中,函数中的this指向的是 new Vue() 得到的对象
Vue底层会把 methods 中的方法抽离出来,放在自身。
<body>
<div id="app">
<!-- 给元素添加点击事件 Vue2.0版本:@click='函数名' -->
<button @click='play'>姓名:{{name}}</button>
<button @click='find'>寻找this</button>
<button></button>
</div>
<script>
new Vue({
el: '#app',
data: {
name: '张三'
},
methos: {
// 语法糖
play() {
alert('123')
},
find() {
console.log(this)
//!!! 切记: name虽然书写在data中,但是运行时是在Vue对象中
this.name='this指向了Vue'
}
}
})
</script>
</body>
3.3 综合案例——计算商品价格并且能够修改价格
<body>
<div id="app">
<span class="name">{{name}}</span>
<span class="price">单价:¥{{price}}</span>
<div class="jiajian">
<button @click='jian(-1)' :disabled='num==1'>-</button>
<span>{{num}}</span>
<button @click='jian(1)'>+</button>
</div>
<span class="total">总价:{{price*num}}</span>
<div>单价:{{price2}}</div>
<button @click='price2-=100'>-100</button>
<button @click='price2+=100'>+100</button>
<button @click='price=price2'>修改价格</button>
</div>
<script>
new Vue({
// el:选择元素 习惯上都用 id=app
el: '#app',
// 页面中的静态数据
data: {
name: '苹果',
num: 1,
price: 999,
price2: 999
},
// 专门用来存储函数
methods: {
jian(value) {
this.num += value
}
}
})
</script>
</body>
更多推荐
初识Vue(一)Vue概述、Vue的实现原理、Vue的开发方式、MVVM的开发模式以及Vue的基础使用
发布评论