目录
一. 什么是VUE
1. 什么是vue
(1). 第三方开发的: 必须要下载才能使用
(2). 基于MVVM设计模式的: (待续...)
(3). 渐进式的: 可以逐步在项目中使用vue的技术。比较容易和其他技术(DOM、jQuery)混搭。但是,强烈不建议!
(4). 纯前端js框架: 与nodejs无关,只需要浏览器就可以运行!
vue是一套用于快捷开发前端应用的框架技术。它的特点用于构建用户界面的前端渐进式框架,采用自底向上的逐层应用,只关于视图层,技术简单易于上手。
2. 为什么要用vue
传统DOM和jQuery都存在着大量重复的编码!只有vue以及同类框架技术,才能几乎彻底的避免大量重复编码!提高开发效率
3. 何时用vue
今后,只要以数据操作为主的项目,都可用vue开发:
比如: 淘宝, 京东, 美团, 饿了么, 头条, 微博, ...
二. 如何使用vue
1. 下载: 2种
(1). 下载vue.js文件到项目本地,然后引入.html页面中使用(前三天)
a. 官网: cn.vuejs.org
b. 版本: 2.6
1). 开发版: 未压缩版本。有完备的注释,代码格式,见名知意的变量名,友好的错误提示。
i. 优点: 可读性好,便于学习和开发之用
ii. 缺点: 体积大,不便于快速下载,不适合于生产环境
2). 生产版: 压缩版。去掉了完备的注释,代码格式。极简化了变量名。去掉了几乎所有的友好的错误提示!
i. 优点: 体积小,便于快速下载,适合于生产环境
ii. 缺点: 可读性差,不适合学习和开发之用
c. 引入: <script src="js/vue.js">
(2). 下载并安装vue脚手架代码: (企业中都用,后两天使用)
2. 我的第一个vue程序
1_jq.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button>-</button>
<span>0</span>
<button>+</button>
<script src="js/jquery-1.11.3.js"></script>
<script>
//先做+
//DOM 4步
//1. 查找触发事件的元素
//本例中: 查找内容为+的按钮
$("button:contains(+)")
//2. 绑定事件处理函数
.click(function(){
//3. 查找要修改的元素
//本例中: 查找当前按钮的前一个兄弟
var $span=$(this).prev();
//4. 修改元素
//4.1 取出span现在的内容,转为整数
var n=parseInt($span.html())
//4.2 n+1
n++;
//4.3 放回去
$span.html(n);
})
//再做-
//DOM 4步
//1. 查找触发事件的元素
//本例中: 查找内容为-的按钮
$("button:contains(-)")
//2. 绑定事件处理函数
.click(function(){
//3. 查找要修改的元素
//本例中: 查找当前按钮的前一个兄弟
var $span=$(this).next();
//4. 修改元素
//4.1 取出span现在的内容,转为整数
var n=parseInt($span.html())
//4.2 如果n>0,才n-1
if(n>0){ n-- }
//4.3 放回去
$span.html(n);
})
</script>
</body>
</html>
运行结果:
1_vue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
</head>
<body>
<!--3步-->
<!--1. 做界面
要求:
1.1 整个界面只能包裹在一个唯一的父元素中
1.2 找到界面中将来可能发生变化的位置,用专门的语法标记出来: {{变量名}}
//本例中: span元素的内容将来会发生变化,所以不要写死内容。应该替换为{{n}}
1.3 找到界面中触发事件的元素,用专门的语法标记出来: @事件名="事件处理函数名"
//本例中: 两个按钮会触发单击事件
-->
<div id="app">
<button @click="minus">-</button>
<span>{{n}}</span>
<button @click="add">+</button>
</div>
<script>
//2. 创建一个new Vue()对象,让它负责监视页面中一块指定的区域
new Vue({
// 选择器
el:"#app", //让这个new Vue()对象负责监控页面中id为app的元素及其子内容。
//3. 创建模型对象,为界面提供支持
//3.1 创建一个data对象,保存所有界面所需的变量
//本例中: 界面中只需要一个变量n
data:{
n:0 //开局是0
},
//3.2 创建一个methods对象,保存所有界面所需的事件处理函数
//本例中: 界面中共需要2个事件处理函数
methods:{
//复习js高级第七天的对象方法简写
//minus:function(){
minus(){
//注意: 只需要关注如何修改变量即可!无需关注变量值将来显示在什么地方去!单纯
//强调: methods中的方法内,想使用data中的变量,必须加this.(待续...)
if(this.n>0){
this.n--
}
},
add(){
this.n++
}
}
})
</script>
</body>
</html>
运行结果:
三. MVVM
1. 旧的前端代码划分为: 3部分:
(1). HTML: 专门负责定义网页的内容和结构
(2). CSS: 专门为网页添加样式
(3). JS: 专门为网页添加交互行为
2. 问题: HTML和CSS太弱了!生活不能自理!一切哪怕是细微的改变,都要js来反复操作。结果,DOM和jQuery都存在着大量重复的劳动!
3. 新的前端代码划分为: 3部分 MVVM设计模式
(1). 界面(View): HTML+CSS View视图对象/界面 / view视图层 小区👈
a. 增强版的: HTML支持变量、分支、循环等程序的要素。
b. 好处: 大大减少了js代码中重复的劳动
c. 比如: <div id="app">...</div>
(2). 模型对象(Model): Model模型对象/model模型数据层 仓库👈
a. 专门替界面保存所有所需的变量和方法的特殊对象
b. 界面需要几个变量,模型对象中就要有几个变量
c. 界面中需要几个函数,模型对象中就要有几个函数
d. 比如: data:{ ... }, methods:{ ... }
(3). 视图模型对象(ViewModel): VM视图模型对象/viewModel控制器层 快递员👈
a. 什么是: 专门将界面和模型对象绑定起来的一种特殊的对象
b. 绑定: 只要模型对象中数据发生变化,视图模型可以自动保证界面上自动同步更新内容。
c. 比如: new Vue({ el:"#app", data:{ ... }, methods:{ ... } })
4. vue是如何实现MVVM设计模式的:vue的绑定原理:
(1). 通过访问器属性来监控模型对象中每个变量的变化:
a. 创建new Vue()之后,立刻创建data:{...}对象。
b. new Vue()会自动为data对象中每个变量请保镖——访问器属性
c. 结果: 从此我们用的data中的变量,早就不是原版的变量了。其实都是同名的访问器属性。
d. 然后new Vue()会继续引入methods对象,并打散methods对象。
e. 结果: 从此methods中的方法都直接隶属于new Vue()。所以,methods中的方法中想访问new Vue()下的其它变量,必须加this.
f. 当在new Vue()任何位置修改变量值时,其实修改的都是访问器属性,就会自动触发访问器属性的set()。new Vue()在set()函数中悄悄添加了一个"通知函数"。只要修改任何变量,都会自动调用set()中的通知函数。告知外部,哪个变量被修改了!
(2). 虚拟DOM树:
a. 什么是虚拟DOM树: 内存中专门保存所有可能发生变化的元素的简化版DOM树——本质是一个巨大的对象,其中包含很多可能发生变化的DOM元素
b. 何时创建:
1). 当new Vue()中data:{}和methods:{}对象都创建完之后,new Vue()会根据el属性的指引,去扫描对应的界面内容
2). 只找出可能发生变化的元素,保存到“虚拟DOM树”中
c. 今后当某个变量值更新时:
1). 该变量的访问器属性set()一定会发出通知,给虚拟DOM树。
2). 虚拟DOM树收到通知,会遍历虚拟DOM树中所有可能发生变化的元素。只找到受本次变量修改影响的个别元素。
3). (虚拟DOM树)用提前封装好的原生DOM操作,来只修改受影响的个别元素!
5. 为什么很多框架都选择虚拟DOM树?虚拟DOM树的优点
(1). 小: 只保存可能变化的元素!
(2). 遍历快: 因为小,所以遍历快
(3). 更新效率高: 只修改受影响的个别元素
(4). 避免重复编码: 已经提前封装了原生的DOM增删改查操作!
💥 扩展:this判断—8种指向
this 8种指向: 判断this,一定不要看定义在哪儿!只看调用时!
➡️ 1. obj.fun() this->obj
➡️ 2. fun() 或 (function(){ ... })() 或 多数回调函数 或 定时器函数 this->window
➡️ 3. new Fun() this->new正在创建的新对象
➡️ 4. 类型名.prototype.共有方法=function(){ ... } this->将来谁调用指谁,同第一种情况
➡️ 5. DOM或jq中事件处理函数中的this->当前正在触发事件的DOM元素对象
如果需要使用简化版函数,必须$(this)
➡️ 6. 箭头函数中的this->箭头函数外部作用域中的this
➡️ 7. jQuery.fn.自定义函数=function(){ ... } this->将来调用这个自定义函数的.前的jQuery子对象,不用再$(this)
➡️ 8. new Vue()中methods中的函数中的this->当前new Vue()对象
⬛ 总结:知识点提炼
1. MVVM: 界面View+模型Model+视图模型ViewModel
2. Vue绑定原理: 访问器属性+虚拟DOM树
变量被修改时: 访问器属性发出通知,虚拟DOM树扫描并仅更新受影响的元素
3. 虚拟DOM树优点:
(1). 小: 只包含可能变化的元素。
(2). 遍历查找快
(3). 修改效率高: 只修改受影响的元素。
(4). 避免重复编码: 已封装DOM增删改查代码
4. Vue功能3步:
(1). 先创建增强版的界面:
a. 整个界面必须包含在一个唯一的父元素下:
通常是<div id="app">
b. 可能变化的元素内容用{{自定义变量名}}标记
c. 触发事件的元素用@click="自定义处理函数名"标记
(2). 再创建new Vue()对象,其中el:指向new Vue()要监控的页面区域
(3). 在new Vue()对象内定义模型对象data和methods
a.界面所需的所有变量都放在data中
b.界面所需的所有事件处理函数都放在methods中
【后文传送门】👉 vue的插值语法及常用指令的应用_02
如果这篇【文章】有帮助到你,希望可以给【青春木鱼】点个赞👍,创作不易,相比官方的陈述,我更喜欢用【通俗易懂】的文笔去讲解每一个知识点,如果有对【前端技术】感兴趣的小可爱,也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️,我将会给你带来巨大的【收获与惊喜】💕💕!