2022-12-31 09:15:11

Vue笔记随笔---kalrry

VUE

vue框架的两大核心：

数据驱动和组件化。

第一周：大家需要转变编程思维的习惯：数据驱动（数据的变化会驱动页面发生变化，不用操作DOM）

第二周：大家需要转变编程思维的习惯：组件化（封装的是页面）

一、前端开发历史

1994年可以看做前端历史的起点（但是没有前端的叫法）
1995年网景推出了JavaScript
1996年微软推出了iframe标签，实现了异步的局部加载
1999年W3C发布第四代HTML标准，微软推出用于异步数据传输的 ActiveX(ActiveXObject)，各大浏览器厂商模仿实现了 XMLHttpRequest（这是前端的真正的起始）
2006年，XMLHttpRequest被W3C正式纳入标准（这是前端正式的起始，叫作富（胖）客户端）
2006年, 发布了jQuery
2008年问世的谷歌V8引擎，发布H5的草案
2009年发布了第五代JavaScript
2009年 AngularJS 诞生

2010年 backbone.js 诞生
2011年React和Ember诞生
2014年Vue.js诞生
2014年，第五代HTML标准发布
2014年左右，4G时代到来，混合开发（js, android, ios混合开发）
2016年微信小程序诞生
2017年微信小程序正式投入运营
2017年底年微信小游戏
以前的三大框架： angular, react, vue，现在： react， vue，小程序（微信、支付宝、百度、头条）
以后： js ----- ts (typescript)

二、MV*模式

库 VS 框架

把一小部分通用的业务逻辑进行封装（函数），多个封装形成一个模块或者文件，多个模块或者文件就发展成为库或者框架

库：函数库，不会改变编程的思想，如：jQuery。

框架：框架改变了编码思想，代码的整体结构，如：vue，react，小程序等等。

MVC架构模式

MVC的出现是用在后端（全栈时代）

M：model，模型，主要完成业务功能，在数据库相关的项目中，数据库的增删改查属于模型（重点）。(nodeJS)

V：view，视图，主要负责数据的显示（HTML+CSS）

C：controller，控制器，主要负责每个业务的核心流程，在项目中体现在路由以及中间件上(nodeJS)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2q0UYwwp-1649151781899)(.\img\01mvc.png)]

优点：耦合度低、复用性高、生命周期成本低、部署快、可维护性高、有利软件工程化管理
缺点：由于模型和视图要严格的分离，这样也给调试应用程序带来了一定的困难。

MVP架构模式

MVP是单词Model View Presenter的首字母的缩写，分别表示数据层、视图层、发布层，它是MVC架构的一种演变。作为一种新的模式，

M：model，模型，主要完成业务功能，在数据库相关的项目中，数据库的增删改查属于模型（重点）。
V：view，视图，主要负责数据的显示
P：Presenter负责业务流程的逻辑的处理，Presenter是从Model中获取数据并提供给View的层，Presenter还负责处理后端任务。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0VRBKWDb-1649151781900)(.\img\02mvp.png)]

MVP模式与MVC模式的区别：

在MVP中View并不直接使用Model，而在MVC中View可以绕过Controller从直接Model中读取数据。

MVVM架构模式

MVVM是Model-View-ViewModel的缩写，MVVM模式把Presenter改名为ViewModel，基本与MVP模式相似。
唯一区别是：MVVM采用数据双向绑定的方式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2DLgw6t8-1649151781900)(.\img\03mvvm.png)]

vue是MVVM

MVC衍生出很多变体，MVP,MVVM,MV*, VUE是MVVM，M----V----VM，M数据，V视图, VM是负责M与V相互通信

总结：

架构只是一种思维方式，不管是MVC，MVP，还是MVVM，都只是一种思考问题解决问题的思维，其目的是要解决编程过程中，模块内部高内聚，模块与模块之间低耦合，可维护性，易测试等问题。
架构在于，做好代码的分工，配合。

三、开发工具

vscode，webstorm，HbuilderX等等

四、vue框架的初识

vue官网](https://cn.vuejs.org/)

作者：尤雨溪 ( 华人 ) , 前Google员工

vue的介绍

构建数据驱动的web应用开发框架
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
Vue 被设计为可以自底向上逐层应用
Vue 的核心库只关注视图层
vue框架的核心：数据驱动和组件化
便于与第三方库或既有项目整合,另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，
Vue 也完全能够为复杂的单页应用程序提供驱动。
Vue 不支持 IE8 及以下版本

vue的示例代码

<body>
  V
  <div id="app">
    要被控制的html{{key}}
  </div>
    
</body>
<script src="vue.js"></script>
<script>
	let vm = new Vue({
    	el:'#app'  //el：element。要控制的那片html代码  
    	data:{
    	    key:value
    	}//数据  M
  })
</script>

vue框架的理解

1、首先：一个页面包括：结构（HTML模板），表现（css），行为（js）
2、其次：原生JS中的做法：写好HTML的模板和css样式，用js产生数据（逻辑），通过dom的方式控制数据显示在HTML中的那个位置，包括如何显示（DOM的方式改变样式）
3、vue框架：vue中，写好HTML模板，声明式地告知vuejs库，数据显示在何处，在vue对象中处理数据，不用做DOM操作（vuejs库负责）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uwhCuV5Z-1649151781901)(\img\04vuejs.png)]

简单理解：new出来一个Vue的实例，传一堆配置参数，控制一片html

记住一点：有了vue，不用程序员操作dom了，因为，vue把dom操作都做好了。

数据驱动和声明式渲染

1、数据驱动
数据驱动，就是通过控制数据的变化来改变（驱动）DOM。背后使用了观察者模式，靠数据的变化来控制页面的变化。这是vue框架的核心，第一周，一定要把数据驱动的思路和编程习惯养成。

2、声明式渲染

声明的意思就是告知，广而告之，即告知程序（Vue框架），在何处渲染什么数据

Vue 实现数据绑定，响应式的原理（面试题）

vue数据绑定是通过 数据劫持和观察者模式 的方式来实现的
1、数据劫持：vue2.× 使用Object.defineProperty(); Vue3使用的是proxy。
当你把一个普通的 JavaScript 对象（json）传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
目的是：感知属性的变化。当给属性赋值时，程序是能够感知的（知道的）。如果知道的话，就可以控制属性值的有效范围，也可以改变其它属性的值等，在Vue中也可以去改变模板上的显示。
Object.defineProperty()函数：https://blog.csdn.net/jiang7701037/article/details/102785223

2、观察者模式（发布订阅模式）：
目的：当属性发生变化时，所有使用该数据地方跟着变化

数据绑定：涵盖了：数据绑定，响应式。

五、vue语法（view层）

data选项

功能：

data选项中存储的是页面中需要显示的数据（当然数据可以进行一定的加工后再显示）

是初始化数据的位置，是元数据，是vue实例的一个实例属性，可以接受的数据类型: number/string/boolean/array/json/undefined/null/function

数据绑定

把data中的数据，显示在html中的某处。

https://cn.vuejs.org/v2/guide/syntax.html#%E6%8F%92%E5%80%BC

插值表达式

功能：可以让html标签里的内容变成动态的（从data中获取），使用 mustache语法

格式：{{变量|属性名|表达式|函数调用等等}}；

示例：

<div id="app">
    <span>Message: {{ msg }}</span>
</div>

new Vue({
    el:"#app"
	data:{
	    msg:"hello 哥们！"
	}
});

这种写法叫作：声明式渲染，即：只需要告知vue，数据在何处显示。

内容指令

内容指令：让标签的内容变成动态的。

指令名：v-text 和 v-html

指令是什么？指令就是html标签的自定义属性

1、v-text="数据名" 转义输出

功能：可以让html标签里的内容变成动态的（从data中获取），相当于innerText。

示例：

<p v-text="str">内容：</p>

对比v-text和插值({{}})表达式：

1）、当网络速度慢的时候，插值表达式会在页面上出现 {{}} 的显示，但是指令v-text不会，因为，v-text是自定义属性，最多不做解读。当，标签中的内容全部来自于属性，那么，可以使用v-text。

2）、插值表达式更加灵活，可以在标签里面的某个地方显示，但是v-text会让整个标签的内容全部变化。

2、v-html="数据" 非转义输出

功能：可以让html标签里的内容变成动态的（从data中获取），但是不会对内容中的html标签进行转义。相当于innerHTML。

示例：

 输出真正的 HTML
 <p  v-html="str">内容：</p>

注

双花括号和 v-text（相当于innerText）会将数据解释为普通文本。
v-html相当于innerHTML

属性指令

属性指令：让标签的属性部分变成动态的。

指令名：v-bind

功能：可以让html标签里的**属性（名和值）**变成动态的（从data中获取）

1、属性值动态绑定：v-bind:html属性="数据" 简写 :html属性=“数据”`

2、属性名动态绑定： v-bind:[属性名]="数据"

示例：

<div v-bind:id="dynamicId"></div>

注意：属性值是布尔值的情况
   <button v-bind:disabled="isButtonDisabled">Button</button>
如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled 属性甚至不会被包含在渲染出来的元素中

javascript表达式

在dom里面插入数据，除了可以写原始的数据，还可以使用javascript表达式

格式：{{数据+表达式}} 、 v-指令="数据+表达式"

示例：

{{ number + 1 }}     
{{ ok ? 'YES' : 'NO' }}     
{{ 'i love you'.split('').reverse().join('') }}
<div  v-bind:id="'list-' + id"></div>

注意：

不能使用语句，条件语句可以使用三元表达式代替

条件渲染(指令)

https://cn.vuejs.org/v2/guide/conditional.html

指令名: v-if 和 v-show

功能：一段dom可以根据条件进行渲染

<div v-if="false">box2</div>

<div v-show="true">box1</div>

v-show VS v-if

	v-show=“布尔”	v-if=“布尔”
（原理上）区别	操作css的display属性	操作dom（添加和删除dom完成的）
使用场景	适合频繁切换	适合不频繁切换
性能消耗	初始渲染消耗（就算元素不显示，也得创建元素）	频繁切换消耗

面试题： v-if和 v-show的区别?

相同点：
v-show和 v-if都是控制 dom元素的显示和隐藏的。

不同点：
1、原理：

v-show是通过控制元素的样式属性display的值，来完成显示和隐藏；
v-if是通过对dom元素的添加和删除，完成显示和隐藏

2、使用场景：由原理（做法）得出使用场景的区别

v-show：使用在dom元素频繁切换的场景
v-if：当dom元素的切换不频繁，可以使用。特别是，首次元素处于隐藏的情况下。

补充： dom的操作（如：创建和删除）是非常耗性能的。为什么？
请看：https://blog.csdn.net/jiang7701037/article/details/98516468

另外，v-if指令还可以结合v-else-if ， v-else一起使用。

示例：

<p v-if="age<10"> 宝宝 </p>
<p v-else-if="age<18">大宝宝</p>
<p v-else>非宝宝</p>

列表渲染(循环指令)

https://cn.vuejs.org/v2/guide/list.html

指令名: 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连用？

https://blog.csdn.net/jiang7701037/article/details/114954542

列表渲染时的key:

在标签里使用属性key，可以唯一标识一个元素。

 1、当 Vue.js 用 v-for **更新**已渲染过的元素列表时，它默认用“就地复用”策略。即：**尽量不进行dom元素的操作，只替换文本**。

2、如果你希望进行dom操作，就用key（key不要使用下标），因为key的目的是为了唯一标识一个元素。

有了key后，可以跟踪每个节点的身份，从而重用和重新排序现有元素
建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为（就地复用）以获取性能上的提升。

注意：

key不要使用（数组）下标，并不是会报错，而是失去了唯一标识的意义

事件绑定(指令)

https://cn.vuejs.org/v2/guide/events.html

指令名：v-on

v-on指令可以简写为：@

功能：绑定事件，vue通过v-on指令把事件和处理函数进行绑定。

事件处理函数需要放在methods选项当中去，事件名不带on，函数可以按照ES5的写法，也可以按照ES6的写法。

格式：

<input type="button" v-on:事件名="方法"  >
<input type="button" v-on:事件名="方法(参数)" >
<input type="button" v-on:事件名="方法($event,参数)">

new Vue({
    el:，
    data:{}
  methods:{
    方法1:function(ev,参数){
        业务
        这里面的this是vue对象本身
    }
    方法2(ev,参数){
         业务
	}
  }
})

获取事件对象：

1、不传参，默认第一个参数，就是事件对象

如：

<button type="button" @click="fn02()">修改数据</button>
………………
fn02(ev){
	console.log('事件对象',ev);
},

2、传参，事件对象需要手动传入(使用vue框架官方提供的 $event)

如：

<button type="button" @click="fn03('qq',$event)">修改数据</button>
………………
fn03(str,ev){
    console.log('事件对象',ev);
    console.log('参数',str);
},

事件处理函数的this：

1、methods选项里的函数里的this都是vue对象本身，所以，事件处理函数里的this也是vue对象本身

2、vue提供的选项的值如果是函数时，不可用箭头函数 , 会造成this丢失

事件修饰符

<div @click.修饰符="函数"></div>
					 .stop          阻止单击事件继续传播（阻止事件流）
					 .prevent       阻止默认行为
     			     .capture 		使用事件捕获模式
					 .self			点到自己时才触发，不是从其它地方（事件流的流）流过来的
					 .once  		只会触发一次
					 .passive 		onScroll事件 结束时触发一次，不会频繁触发，移动端使用

注意:

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.stop.self 会阻止所有的点击，而 `v-on:click.self.stop 阻止自身的点击，stop就不起作用了

<div class="greenbox" @click="fnGreen">
     <!-- <div class="redbox" @click.self.stop="fnRed"> -->
     <div class="redbox" @click.stop.self="fnRed">
             <div class="bluebox" @click="fnBlue"></div>
      </div>
</div>

按键修饰符

<!--普通键-->
<div @keyup.修饰符="函数"></div>
     			.left				左
				.enter				回车
				.13  				可以使用键码

<!--系统(组合)键-->
<div @keyup.修饰符="函数"></div>
     			.ctrl 				
				.alt					
				.shift  				
				.exact  精准控制,@键盘事件.修饰符1.修饰符2.exact  只有1+2才可触发 1+2+3不可以

<!--鼠标-->
<div @mousedown.修饰符="函数"></div>
     			 .left 				
				 .right					
				 .middle	鼠标中键

双向绑定(指令)_表单控件绑定

https://cn.vuejs.org/v2/guide/forms.html

指令名：v-model

功能：视图控制数据，数据也可控制视图,这就是双向绑定，可通过属性+事件来实现双向绑定。而vue中直接提供了一个指令v-model直接完成（v-model 本质上不过是语法糖）。v-model指令只能使用在表单元素上。

不使用v-model完成双向绑定
<input type="text" :value="data数据" v-on:input="changeIptValue">

使用v-model完成双向绑定
<input type="text" v-model="data数据">

其它表单元素的双向绑定

https://cn.vuejs.org/v2/guide/forms.html

表单修饰符

<input v-model.修饰符="数据" />
			  .number 	把标签的值转成数字赋给vue的数据
			  .trim 	删除前后空格
			  .lazy   	确认时才修改model数据

示例：

//需求：    
//在下拉框里选择 房间类型（一个房子住多少人，即：几人间）
//动态产生 相应数量的文本框

 <select v-model.number="num"  >
    <option value="1">1人间</option>
    <option value="2">2人间</option>
    <option value="3">3人间</option>
</select>

<hr>
    
<input v-for="i in num" type="text"  :value="i" >

指令总结

指令 (Directives) 是带有 v- 前缀的特殊属性。其实就是html标签的里的自定义属性。指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM，以下是官方的指令，程序员也可以自定义指令。

常见指令：

v-text：更新元素的 textContent。如果要更新部分的 textContent ，需要使用 {{ Mustache }} 插值。
v-html：更新元素的 innerHTML
v-bind：动态地绑定一个或多个属性（特性），或一个组件 prop 到表达式。
v-show：根据表达式值的真假，切换元素的 display （CSS 属性）。
v-if：根据表达式的值的真假条件渲染元素（与编程语言中的if是同样的意思）
v-else：表示否则（与编程语言中的else是同样的意思）
v-else-if：（与编程语言中的else if是同样的意思）
v-for：可以循环数组，对象，字符串，数字，
v-on：绑定事件监听器。事件类型由参数指定。
v-model：在表单控件或者组件上创建双向绑定
v-pre：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。
v-cloak：防闪烁，模板没编译完，电脑配置差，有可能会看到{{}}，体验不佳，不如用css先隐藏，之后再显示，包括被包裹的子元素。这个指令保持在元素上直到关联实例结束编译。和 CSS 规则，如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
v-once:只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

指令缩写：

v-bind 缩写是冒号
v-on 缩写是 @

样式操作

https://cn.vuejs.org/v2/guide/class-and-style.html

操作样式，就是属性绑定，只不过绑定的属性是class和style，vue在class和style属性上做了加强，给样式属性赋的值还可以是对象，数组。

绑定姿势（格式）

<div v-bind:class="数据|属性|变量|表达式"></div>
<div v-bind:style="数据|属性|变量|表达式"></div>

属性值的类型支持

字符串/对象 / 数组


<div :class="{active:true,t1:false}"></div>
<div :style="[{css属性名:值},{css属性名小驼峰：值}]"></div>

class的属性值（对象的方式）示例：

 //
 <div class='big-box' :class="{active:isActive,borderbox:isBorder}"></div>
  let vm = new Vue({
        el: "#app",
        data: {
              isActive:true,
              isBorder:true
        }
    });

注：vue绑定的class属性和普通的class属性可以共存

class的属性值（数组的方式）示例：

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
     activeClass: 'active',
     errorClass: 'text-danger'
}

style的属性值（对象的方式）示例：

<div id="app">
  <p v-bind:style="str">我是个p</p>
 <p v-bind:style="{ width:widthVal+'px',height:'100px',backgroundColor:'blue'}">我是p</p>
 <input type="button" value="测试" @click="fn">
</div>


 let vm = new Vue({
        el: "#app",
        data: {
            // style属性的值是个对象
            str: { width:"200px",height:"100px",backgroundColor:"blue"},
            widthVal:200
        },
        methods:{
            fn(){
                this.str.width="250px";
                this.widthVal ++;
            }
        }
    });

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
      activeColor: 'red',
      fontSize: 30
}

style的属性值（数组的方式）示例：

<div :style="[obj1,obj2]"> 我是div</div>
 data: {
            obj1:{
                    width:"200px",
                    height:"150px"
            },
            obj2:{
                   "background-color":"red"
            }
        }

示例：

todoList 练习的实现

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TMPIy2WW-1649151781901)(C:\Users\31759\AppData\Roaming\Typora\typora-user-images\1594365849928.png)]

为了让大家体会vue是数据驱动，根据班级情况尝试扩展如下：
二阶段的运动
全选反选（购物车）

非响应式情况

什么是响应式？数据a发生变化了，那么界面使用a的所有地方也会变化（依赖a的所有的数据和界面都会发生变化），背后使用了观察者模式。

什么是非响应式？数据发生变化了，而依赖该数据的地方没有任何变化。

在vue中，使用某些方式改变数据（model层）时，vue不会把结果呈现在页面上（view层），这就是vue出现的非响应式的情况：

对数组使用了 非变异 (non-mutating method) 方法（方法的调用不会改变原始数组的内容，如：concat）。因为，没有改变原始数组的内容（如：concat）
使用数组的索引（根索引)的方式改变数组的元素时
修改数组的长度时
给对象添加新的属性时。

所以，强烈建议：不要修改数组的根键，不要修改数组的长度，可以把未来需要的数据都声明在data选项内部，不要对数组使用非变异的api（数组的变异方法：https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E6%9B%B4%E6%96%B9%E6%B3%95）

vue也提供了非响应式问题解决方案(尽量不要使用)

Vue.set|this.$set(数组, index, value)

Vue.set|this.$set(对象, key, value)

this.$forceUpdate() 强制刷新

六、vue语法（model层）vue的配置项

data属性：

不再说了

methods:

也暂时不说了

计算属性

在模板(HTML)中放入太多的逻辑会让模板过重且难以维护，而且不好阅读。计算属性computed来帮忙。

计算属性是一个函数，是经过元数据（data里）进一步运算后的数据，计算属性的优点是：当元数据不发生变化时，不会再做计算（即：缓存），只有元数据发生变化时，才做计算。是响应式的，需要在模板中渲染才可调用（计算属性只能在模板上使用）

语法

//定义
computed:{
  计算属性: function(){return 返回值}		
}

//使用
使用:	{{计算属性}} |  v-指令="计算属性"

面试题：

computed VS methods

methods	computed
每次调用都会执行函数里的代码	基于它们的响应式依赖进行缓存的，如果依赖没有变化，就不再调用
性能一般	性能高
{{methodname()}}	{{computedname}}
适合