12.VUE笔记

最新推荐文章于 2024-01-09 11:43:02 发布

码者_荣耀

最新推荐文章于 2024-01-09 11:43:02 发布

阅读量228

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/Faker96/article/details/121550224

版权

一. 什么是VUE:

1. 什么是VUE:

(1). 第三方开发的: 必须下载才能用

(2). 基于MVVM设计模式的: ?

(3). 渐进式的: 可以逐步在项目中使用vue技术，可以和其它技术混搭。

(4). 纯前端: 单靠浏览器就可以运行，不需要任何后端技术。

(5). js框架: 可以自动化的完成大部分重复的劳动，提高开发效率。

2. 为什么: 简单！避免重复劳动

3. 何时: 今后，只要以数据操作(增删改查)为主的项目，都可以由vue框架开发

比如: 饿了么，每天，大众点评，淘宝，京东，今日头条，微博，网易云音乐，小红书，知乎，自如，链家，携程，去哪儿...

不是以数据操作为主: 大型游戏，微信/qq，抖音，爱奇艺

二. 如何使用:

1. 官网: cn.vuejs.org

2. 下载: 2种:

(1). 只下载一个vue.js文件，引入网页使用: 4天

a. 版本: 旧项目都用2.x做，新项目都用3.x

开发版: (未压缩版)有完备的注释、代码格式，以及见名知意的变量名。还包含极其友好的错误提示。

可读性好，适合学习和开发之用

体积大，不适合生产环境快速下载运行

生产版: (压缩版)去掉了所有数值和代码格式，极简化了变量名。去掉了友好的错误提示。

体积小，适合生产环境快速下载运行

可读性差，不适合学习和开发之用。

b. 问题: 随着前端项目的规模越来越大，文件数量越来越多，如果还是零散的随意的管理大量的文件——没有标准，极其不便于大项目的写作。

c. 因为单纯，所以适合初学者快速上手学习某一项技能！

(2). 使用vue脚手架工具: 后4天

a. 什么是: 一套已经包含核心功能的标准的半成品项目文件和文件夹结构。

b. 为什么: 标准！

c. 何时: 今后，企业中开发，都是基于脚手架基础上开发的。

d. 优点: 便于大项目的标准化和分工协作。

e. 但是: 在脚手架中开发，每做一个功能，都需要综合用到很多知识。如果基础不扎实，进入脚手架，寸步难行！

3. 第一个vue程序:

1_first_jq.html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

//先实现+

//DOM 4步

//1. 查找触发事件的元素

$("#btnAdd")

//2. 绑定事件处理函数

.click(function(){

//3. 查找要修改的

var $span=$("span");

//4. 修改元素

//4.1 先取出span中现在的数量，转为整数

var n=parseInt($span.html());

//4.2 将n+1

n++;

//4.3 将新的n再放回去:

$span.html(n);

})

//再实现-

//DOM 4步

//1. 查找触发事件的元素

$('#btnMinus')

//2. 绑定事件处理函数

.click(function(){

//3. 查找要修改的

var $span=$("span");

//4. 修改元素

//4.1 先取出span中现在的数量，转为整数

var n=parseInt($span.html())

//4.2 如果n>0，才能n-1

if(n>0){ n-- }

//4.3 将新的n再放回去:

$span.html(n);

})

</script>

</body>

</html>

运行结果:

2_first_vue.html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<!--1. 先做界面

1.1 统一的要求: 界面中所有元素，都必须包裹在一个唯一的父元素下，习惯上<div id="app"></div>

1.2 找到界面中将来可能随程序自动变化的位置，用专门的语法:{ { 变量名}}来标记/占位

本例中：span的内容随程序自动变化

1.3 找到界面中将来可能触发事件的元素，用专门的语法: @事件名="事件处理函数名" 来标记

本例中: 两个按钮会触发事件:

+按钮, @click="add"

-按钮, @click="minus"-->

</div>

//2. 创建一个new Vue()对象，来监控div所包含的区域。

var vm=new Vue({

//vue对象中，必须用el属性，告诉new Vue()要监控的区域是哪里: (el其实是element的缩写)

el:"#app",//id选择器

//3. 定义模型对象，来保存界面中所需的所有变量和事件处理函数

//什么是模型对象: 就是专门替界面保存变量和事件处理函数的特殊的对象

//3.1 先创建一个data:{}来保存界面中所需的所有变量和初始值

//本例中: 因为界面上需要一个变量n，所以，data中只有一个变量n即可

data:{

n:0

//3.2 再创建一个methods:{}来保存界面中所需的所有事件处理函数

//本例中: 界面上一共需要2个事件处理函数

methods:{

add(){ this.n++},

minus(){

if(this.n>0){

this.n--

}

//强调:

//3.2.1 methods中的事件处理函数中，如果要操作data中的变量，必须加this.

//3.2.2 methods中的事件处理函数中，根本不用考虑如何从界面取值，也不用考虑如何将新值放回界面，只需要专门考虑如何把data中的变量值修改正确即可！

//new Vue()会自动保持界面中变量n和data中变量n同步:

//开局时，data中n是几，new Vue()就把n的值送到页面上，对应位置显示给人看

//当methods中修改了n的值，new Vue()会自动把n的新值自动更新到界面中n所在的位置给人看

});

console.log(vm);

</script>

</body>

</html>

运行结果:

三. MVVM:

1. 旧的前端代码分为三大部分:

(1). HTML:专门定义网页的内容和结构

(2). CSS: 专门为网页添加样式

(3). js: 专门操作网页中的内容，为页面添加交互行为

2. 问题:

(1). HTML和CSS功能太弱了！连程序最基本的因素(变量、判断、循环)都不支持！——生活不能自理

(2). 导致，哪怕很小的修改，都要麻烦JS来操作。导致，js中存在大量重复和冗余的工作。

3. 解决: MVVM设计模式:

(1). 什么是: 对前端三大代码的重新划分:

(2). 三部分:

a. 界面(View):

1). 包含以前的HTML+CSS

2). 增强版: 让HTML也支持变量、判断、循环——HTML初步生活可以自理！

b. 模型对象(Model):

1). 什么是: 专门保存页面中所需的变量和函数的特殊对象

2). 包含2个:

i. data:{} 专门保存界面中所需的所有变量

ii. methods:{} 专门保存界面中所需的所有函数

3). 问题: 模型对象中的变量和函数，不会自己长腿跑到页面上

c. 视图模型(ViewModel)

1). 什么是: 专门负责将模型对象中的变量和函数，自动运送到界面中指定位置的特殊对象。——快递小哥

2). 作用: 可自动将程序中的变量和函数运送到界面中所需的位置。并且，还能自动保持界面显示与程序中的数据同步。

4. vue框架如何实现MVVM设计模式: vue的绑定原理

(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树

a. 什么是: 专门保存界面中所有可能发生变化的元素的简化版DOM树。

b. 何时创建:

1). new Vue()的第二大步，在创建完data和methods之后，根据el属性值的选择器所指的元素，去扫描界面中指定区域的元素。

2). 一边扫描真实DOM树，一边就创建虚拟DOM树，只保存可能发生变化的元素。

c. 将来

1). 只要在程序中修改了变量值，就会自动触发访问器属性的set()，就会自动执行set()中的通知函数。通知函数()通知虚拟DOM树，哪个变量发生了变化。

2). 虚拟DOM树扫描自己内部保存的所有可能发生变化的元素，只找出受本次变量修改影响的元素。

3). 可以用提前封装好的DOM操作，将变量的新值，自动修改回页面中显示。

d. 虚拟DOM树的优点: 4大优点:

1). 小: 只保存可能变化的个别元素

2). 快: 因为保存的元素少，所以每次遍历查找受影响的元素时，比遍历原始DOM树，快的多！

3). 修改效率高: 因为每次只修改受影响的个别元素。不受影响的元素是不会改变的！

4). 避免重复: 因为虚拟DOM树中已经封装了DOM的增删改查+事件绑定操作。所以，不用我们再手工查找、手工修改。都是自动完成的！

四. 绑定语法: 学名: 插值语法 Interpolation

1. 什么是: 在界面中标记可能发生变化的元素内容的特殊语法

2. 何时: 今后，只要发现一个元素的内容可能随程序自动改变时，都要用绑定语法来标记

3. 如何: <元素>xxxx{ { 自定义变量名}}xxx</元素>

4. { {}}可以和其它写死的文本内容混搭

5. { {}}中: 原理和模板字符串中的${}完全一样的！

(1). 可以放: 一切有返回值的合法的js变量或表达式

比如: 变量，三目，算术计算，访问数组元素，创建对象，调用函数

(2). 不能放: 分支、循环以及没有返回值的js表达式

6. 示例: 使用{ {}}显示隐藏不同数据:

3_{ {}}.html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h3>Welcome { {uname}}</h3>

<h3>小计:¥{ {(price*count).toFixed(2)}}</h3>

<h3>下单时间: { {new Date(orderTime).toLocaleString()}}</h3>

</div>

new Vue({

el:"#app",

data:{

uname:"dingding",

sex:1,

price:12.5,

count:5,

orderTime:1614158191101,

arr:["日","一","二","三","四","五","六"],

// 0 1 2 3 4 5 6

day:new Date().getDay()

}

})

</script>

</body>

</html>

运行结果:

五. 指令(directive):

1. 什么是: 专门给HTML元素添加新功能的特殊HTML属性

2. 包括: 13种

(1). v-bind:

a. 问题: 如果元素的属性值可能随程序自动变化，则不能用{ ~~{}}~~绑定。

b. 解决: 今后，只要元素的属性值有可能随程序自动变化，都可以用v-bind指令代替{ {}}绑定属性值

c. 如何: <元素 v-bind:属性名="js变量或表达式">

d. 简写: <元素 :属性名="js变量或表达式">

e. 原理: new Vue()在扫描页面时，只要发现:开头的属性，都会先自动计算=右边的js变量或表达式的值。然后，将变量或表达式的值作为当前属性的属性值。

f. 强调: 加了:，就不要再加{ ~~{}}~~了！加了:，=右边的""就起到了{ {}}的作用！""中也可以写一切有返回值的js变量和表达式。

g. 示例: 根据pm2.5数值，显示不同表情:

4_v-bind.html

<!DOCTYPE html>

<head>

<title>根据程序中PM25的数值显示不同的表情</title>

</head>

<body>

<img :src="

pm25<100?'img/1.png':

pm25<200?'img/2.png':

pm25<300?'img/3.png':

'img/4.png'

<h3>{ {

pm25<100?'img/1.png':

pm25<200?'img/2.png':

pm25<300?'img/3.png':

'img/4.png'

}}</h3>

</div>

var vm=new Vue({

el:"#app",

data:{

//程序中只保存pm2.5的数值，不保存图片路径

pm25:360

}

})

//运行后，F12打开控制台，console，输入vm.pm25=数值，观察页面上图片的变化.

</script>

</body>

</html>

运行结果:

(2). v-show:

a. 什么是: 专门控制一个元素显示隐藏的特殊指令

b. 何时: 只要用程序控制一个元素的显示隐藏时，都用v-show。

c. 如何:

<元素 v-show="bool类型的变量或判断条件">
d. 原理: 只要new Vue()扫描到v-show，就会先计算=右边的判断条件的值:

1). 如果=右边的判断条件值为true，则v-show什么也不做，当前元素默认显示

2). 如果=右边的判断条件值为false，则v-show自动被翻译为style="display:none"，当前元素就隐藏。

e. 示例: 打开和关闭对话框:

5_v-show.html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

#pop{

position:fixed;

top:50%;

left:50%;

width:300px;

height:100px;

margin-left:-150px;

margin-top:-50px;

background-color:lightBlue

}

#pop>a{

float:right;

margin-right:20px;

text-decoration:none;

}

</style>

</head>

<body>

<!--VUE 3步

1. 做界面: 又3步

1.1 唯一父元素

1.2 找可能发生变化的元素

本例中：div id="pop"的显示隐藏状态来回切换。所以，应该用v-show

1.3 找触发事件的元素

本例中: 两个元素触发事件

点按钮，让对话框显示

点×，让对话框隐藏-->

<button @click="show">click me</button>

</div>

//2. 创建new Vue()对象，监控id为app的区域

new Vue({

el:"#app",

//3. 创建模型对象:

//3.1 创建data对象

//本例中: 因为界面上只需要一个visible变量，表示对话框是否显示

data:{

visible: false //默认对话框不显示

//3.2 创建methods对象

//本例中: 因为界面中需要两个函数,所以

methods:{

show(){ //让对话框显示

this.visible=true;

hide(){ //让对话框隐藏

this.visible=false;

}

})

</script>

</body>

</html>

运行结果:

(3). v-if, v-else:

a. 什么是: 专门控制两个元素二选一显示的指令

b. 何时: 今后，只要控制两个元素二选一显示，都用v-if和v-else

c. 如何:

<元素1 v-if="条件1">
<元素2 v-else>

d. 原理: 每当new Vue()扫描到v-if时，先计算=右边条件变量或表达式的值。

1). 如果v-if等号右边的条件为true，则new Vue()会保留v-if所在元素。删除v-else所在元素

2). 如果v-if等号右边的条件为false，则new Vue()会先删除v-if所在的元素，保留v-else所在的元素。

e. 强调:

1). v-if和v-else两个元素之间必须紧挨着写，不能插入其他元素。

2). v-else后不要写=xxx (和程序中else后一样要求)

f. v-show和v-if的差别:

1). v-show，用display:none来隐藏元素

2). v-if和v-else是通过添加删除元素方式来控制元素显示隐藏。

g. 示例: 切换用户登录状态:

6_v-if_v-else.html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<!--VUE 3步

1. 做界面

1.1 唯一父元素包裹

1.2 找可能发生变化的元素

本例中: 两个div二选一显示，所以用v-if和v-else

1.3 找触发事件的元素

本例中: 登录和注销两个a元素可以触发事件-->

<h3>Welcome dingding <a href="javascript:;" @click="logout">注销</a></h3>

</div>

<a href="javascript:;" @click="login">登录</a> |

</div>

//2. 创建new Vue()

new Vue({

el:"#app",

//3. 创建模型对象

//3.1 创建data对象

//本例中：因为界面中只需要1个变量isLogin来标记用户是否登录

data:{

isLogin:false //开局，用户默认未登录

//3.2 创建methods对象

//本例中：因为界面需要两个事件处理函数

methods:{

this.isLogin=true;

logout(){ //将用户登录状态改为未登录

this.isLogin=false;

}

})

</script>

</body>

</html>

运行结果:

(4). v-else-if

a. 什么是: 专门和v-if和v-else一起控制多个元素多选一显示隐藏

b. 何时: 今后，只要控制多个元素多选一显示隐藏时，都用v-else-if
c. 如何:

<元素1 v-if="条件1">
<元素2 v-else-if="条件2">

<元素3 v-else-if="条件3">
... ...

<元素n v-else>

d. 原理: 当new Vue()扫描到v-if时，先计算v-if后的条件:

1). 如果v-if条件为true，则保留v-if所在元素，删除其余v-else-if、v-else元素

2). 如果v-if条件为false，则先删除v-if所在元素，然后，继续计算每个v-else-if后的条件。如果任意一个v-else-if的条件为true，则只保留着一个v-else-if所在元素，删除其余v-if、v-else-if和v-else元素

3). 如果所有v-if和v-else-if的条件都不满足，则只保留v-else，删除其余v-if和v-else-if的元素

4). 强调: v-if和v-else-if和v-else必须紧挨着写，中间不能插入其他元素。

e. 示例: 使用v-else-if实现根据pm2.5数值不同显示不同的表情

day01剩余/7_v-else-if.html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

var vm=new Vue({

el:"#app",

data:{

pm25:360

}

})

</script>

</body>

</html>

运行结果:

(5). v-for:

a. 什么是: 专门在网页中根据一个数组或对象的成员，连续生成多个结构相同，内容不同的一组html元素的特殊指令

b. 何时: 今后，只要连续生成一组结构相同，但是内容不同的HTML元素时，都用v-for批量生成

c. 如何:

<要反复生成的元素 v-for="(元素值, 下标) of 数组或对象">

d. 强调: vue中v-for统一了js中的for in和for of的功能。vue中的v-for既可以遍历索引数组，又可以遍历对象

e. 原理: 每当new Vue()扫描到v-for时

1). 先遍历数组或对象中每个成员

2). 每遍历一个成员:

i. 取出当前成员的属性名和属性值，将属性值交给of前的()中第一个变量，将属性名/下标交给of前的()中第二各变量

ii. 同时，还会自动创建当前v-for所在元素的一个新副本。数组或对象包含几个成员，v-for就会反复创建几个HTML元素副本。

3). of前的两个变量，虽然没有在new Vue()的data中的定义，但是，却可以在v-for所在元素及其子元素范围内用于绑定语法和指令！

f. vue2的问题: 都是由访问器属性的问题引起的。

1). 在vue2中使用下标修改数组中的元素值，无法自动更新页面。——new Vue()不会对数字下标的元素添加访问器属性。所以，所有数字下标的元素都不受监控！

有办法解决: 尽量用数组家的API代替下标修改数组元素

比如: vm.arr[1]="涛涛" //错误！

应改为: vm.arr.splice(1,1,"涛涛") //替换

//删除1位置的1个元素

//在1位置插入一个新元素涛涛

//复习一阶段数组函数

2). 只有开局时就有的成员才受监控，后来新加入的成员也不受监控！

因为: new VUE()只有在首次加载对象时，才给对象中每个属性自动创建访问器属性。但是，后来强行添加的新成员，就无法获得访问器属性了！

g. 解决: vue3中，以上两个问题都得到了完美解决(未完待续...)

h. v-for的问题: 即使只修改了数组或对象中一个成员的值，v-for默认也会删除所有元素副本，重新遍历，重新创建HTML元素副本。——效率极低！

原因: v-for生成的多个HTML元素副本，除了内容不同之外，元素本身没有任何差别，所以v-for每次只能删除所有HTML副本，再重建整个列表。

i. 解决: vue规定，今后，只要使用v-for都必须同时绑定一个专门的属性: :key="不重复的值"

比如: <li v-for="(元素值, i) of arr" :key="i">

g. 结果: 从此，v-for反复生成的每个HTML元素上，都有一个唯一的key="值"。v-for就可以通过key属性值来鉴别每个HTML元素副本不同。修改时，只要修改某一个key的元素即可！不用重建整个列表。

k. v-for为什么必须加:key: 3句话:

为每个元素添加唯一标识

避免重建整个列表

提高修改的效率

l. 示例: 根据数组或对象的内容反复生成多个元素

day01剩余/8_v-for.html

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h3>遍历数组中每个元素</h3>

<ul>

</ul>

<h3>遍历对象中每个属性</h3>

<ul>

</ul>

</div>

var vm=new Vue({

el:"#app",

data:{

arr:["亮亮","楠楠","东东"],

lilei:{

sname:"Li Lei",

sage:11,

class:"初一2班"

}

})

//比较:

//手工在F12 控制台中测试:

//vm.arr[1]="小月月"，能否修改数组，能否更新界面？

//vm.arr.splice(1,1,"小月月")，能否修改数组，能否更新界面？

//vm.lilei.sage=12 页面跟着变

//vm.lilei.money=100 页面不变

</script>

</body>

</html>

运行结果:

m. v-for还会数数:

1). 何时: 只要希望反复生成指定数量的相同结构元素副本时

2). 如何: <元素 v-for="i of n" :key="i">
3). 原理: v-for默认从1开始数数，数到n结束。每数一个数，就自动创建当前元素的一个副本

4). 示例: 根据页数生成分页按钮:

day01剩余/9_v-for_pages.html

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

ul{

list-style: none;

}

ul>li{

float:left;

width:40px;

height:40px;

text-align:center;

line-height:40px;

最低0.47元/天解锁文章

码者_荣耀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12.VUE笔记

一. 什么是VUE:1. 什么是VUE: (1). 第三方开发的:必须下载才能用(2). 基于MVVM设计模式的:?(3). 渐进式的:可以逐步在项目中使用vue技术，可以和其它技术混搭。(4). 纯前端:单靠浏览器就可以运行，不需要任何后端技术。(5). js框架:可以自动化的完成大部分重复的劳动，提高开发效率。2. 为什么:简单！避免重复劳动3. 何时:今后，只要以数据操作(增删改查)为主的项目，都可以由vue框架开发比如:饿...
复制链接

扫一扫