VUE

vue框架的两大核心:

数据驱动组件化

一、前端开发历史

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,不含html的php文件),没有页面,是纯粹的逻辑

V:view,视图,主要负责数据的显示(HTML+CSS,动态网页(jsp,含有html的php文件))页面的展示和用户的交互。

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

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

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

MVP架构模式

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

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

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

MVP模式与MVC模式的区别:

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

MVVM架构模式

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PY9qqBh3-1651577687603)(.\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-bjqGNkK1-1651577687603)(\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选项(model层)

功能:

​ 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)、当网络速度慢的时候(vueJs还没有处理自己的语法(v-text和{{}}),插值表达式会在页面上出现 {{}} 的显示,但是指令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数据(文本框,用的是change事件)

示例:

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




 <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和v-if 是例外情况)。指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM,以下是官方的指令,程序员也可以自定义指令。

常见指令:

  • v-text: 更新元素的 textContent。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。
  • v-html:更新元素的 innerHTML
  • v-bind:动态地绑定一个或多个属性(特性),或一个组件 prop 到表达式。
  • v-on:绑定事件监听器。事件类型由参数指定。
  • v-model:在表单控件或者组件上创建双向绑定v-show:根据表达式值的真假,切换元素的 display (CSS 属性)。
  • v-if:根据表达式的值的真假条件渲染元素(与编程语言中的if是同样的意思)
  • v-else:表示否则(与编程语言中的else是同样的意思)
  • v-else-if:(与编程语言中的else if是同样的意思)
  • v-for:可以循环数组,对象,字符串,数字,
  • v-pre:跳过这个元素和它的子元素的编译过程(vue处理的过程)。可以用来显示原始 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-XDKGNE5g-1651577687604)(img\1594365849928.png)]

非响应式情况

​ 什么是响应式?数据a发生变化了,那么界面使用a的所有地方也会变化(依赖a的所有的数据和界面都会发生变化,或者说,直接间接使用a的地方都会跟着变化),背后使用了观察者模式。

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

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

  • 对数组使用了 非变异 (non-mutating method) 方法(方法的调用不会改变原始数组的内容,如:concat,filter,map)。因为,没有改变原始数组的内容。

  • 使用数组的索引(根索引)的方式改变数组的元素时

  • 修改数组的长度时

  • 给对象添加新的属性时。

    ​ 所以,强烈建议:不要用下标的方式修改数组的元素,不要修改数组的长度,可以把未来需要的数据都声明在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:

也暂时不说了,这里面放的是函数的定义,就是普通函数的定义。这些函数可以作为事件处理函数,也可以在其它地方调用。

计算属性(computed)

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

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

语法

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

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

面试题:

computed VS methods

methodscomputed
每次调用都会执行函数里的代码基于它们的响应式依赖进行缓存的,如果依赖没有变化,就不再调用
性能一般性能高
{{methodname()}}{{computedname}}
适合强制执行和渲染适合做筛选

属性检测(侦听属性)watch

https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7-vs-%E4%BE%A6%E5%90%AC%E5%B1%9E%E6%80%A7

​ 需要在数据变化时执行异步或开销较大的操作时,这个时候需要属性检测watch。而不要使用计算属性,因为计算属性是同步的(需要立即返回结果)

定义一个选项

watch:{
  被侦听的属性名:'methods的里函数名'    //数据名==data的key
  被侦听的属性名:函数体(new,old){}
  被侦听的属性名:{
    handler:function(new,old){},
    deep: true //面试题:深度检测,当侦听的属性是个对象,修改对象的某个键时,就能检测到
    immediate: true //首次运行,要不要监听
  }
}

示例:

请输入您的问题:<input type="text" v-model.lazy="question" /><br/>
         答案:<input type="text" v-model="answer" /><br/>
        
 let vm = new Vue({
        el:"#app",
        data:{
            question:"",
            answer:""
        },
        watch:{
            question:function(){
                setTimeout(()=>{
                    this.answer = "吃的是草"
                },2000);
            }
        }
    });

深度检测:

<div id="app">
    <input type="button" value="测试" @click="fn" />
</div>

let vm = new Vue({
        el:"#app",
        data:{
            person:{
                name:"张三疯",
                wife:{
                    name:"梅超风"
                }
            },
        },
        methods:{
            fn(){
                this.person.name="李思峰";
            }
        },
        watch:{
            person:{
                deep: true, //深度检测,当侦听的属性是个对象,修改对象的某个键时,就能检测到
                handler:function(){ 
                   console.log("person变了");
                },
                immediate: true
            }
        }
    });

面试题:

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

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

计算属性 VS 函数 (方法)VS 属性检测

计算属性(computed)函数(methods)属性检测(侦听)(watch)
作用为了显示而用只是处理逻辑,跟普通的函数一样属性变化的检测(相当于事件),当属性的值发生变化时,可以调用函数
依赖模板调用√(只能在模板上调用的)√(可以在模板使用)×(不能在模板上使用)
是否缓存×
异步×(必须是同步)√(可以有异步)√(可以有异步)

自定义指令

https://cn.vuejs.org/v2/guide/custom-directive.html

系统(官方)指令在不够用的情况下,考虑自定义,指令是个函数|对象,用来操作dom的, 里面的this 返回window

全局定义
Vue.directive('指令名',{
	bind:function(el,binding){
        binding.arg    v-bind:class
    }//指令第一次绑定到元素时调用,此时DOM元素还没有显示在页面上
	inserted:function(el,binding){} //绑定指令的DOM元素插入到父节点时调用。DOM已经渲染(显示)
	update:function(el,binding){}  //指令所在的元素的model层的数据被修改,view有更新请求时
	componentUpdated:function(el,binding){}  //更新完成时,不讲
})
  • **指令名:**定义指令时,不用加 v- , 使用指令时,加 v-

  • 钩子函数的参数:

    钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。
    https://cn.vuejs.org/v2/guide/custom-directive.html#%E9%92%A9%E5%AD%90%E5%87%BD%E6%95%B0%E5%8F%82%E6%95%B0

​ name: 指令名(不带v-)

​ arg:写在指令名后面的参数,如:v-myfocus:id , arg就是id 。 v-bind:value ,arg就是value

​ expression: 等号后面的表达式,如:v-myfocus:id=“msg+‘1’” ,expression就是msg+‘1’。

​ value:绑定数据的值,如:v-myfocus:id=“msg+‘1’” , value就是msg的值和1拼接的结果

示例:

获得焦点

//定义指令:
Vue.directive('myfocus', {
  inserted: function (el) {   // 当被绑定的元素插入到 DOM 中时……
    // 聚焦元素
    el.focus()
  }
})
使用指令
<div>
    <input type="text" v-myfocus />
</div>
    

    

模拟v-bind指令的功能:

 Vue.directive("mybind",{
     bind:function(el,binding){
         el[binding.arg] = binding.value;
     },
     update:function(el,binding){
         el[binding.arg] = binding.value;
     }
 });

全局定义格式(简写)

Vue.directive('指令名', function(el,binding){ //等价于:bind + update
})

模拟v-bind指令的功能:

Vue.directive("mybind",function(el,binding){
    el[binding.arg] = binding.value;
});

钩子函数的详解:

bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (学到此处时,怎么理解:当指令对应的数据发生变化,就会调用update)
componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind:只调用一次,指令与元素解绑时调用。

局部定义
new Vue({
    
	directives:{
    指令名	: function(el,binding){},//简写方式: bind + update
  	指令名(el,binding){},
    指令名:{
				bind:fn(el,binding){}	//指令第一次绑定到元素时调用	v-drag
				inserted:fn(el,binding){}		//绑定指令的元素插入到父节点时调用  v-focus
				update:fn(el,binding){}	//指令所在的元素的model层的数据,view有更新请求时
				componentUpdated:fn(el,binding){}	//更新完成时
    }
  }
})
示例:

回到顶部

//自定义指令的代码
// 注册一个全局自定义指令 `v-pagetop`
Vue.directive('pagetop', {
    inserted: function (el) {
        el.onclick = function(){
            document.body.scrollTop = 0;
            document.documentElement.scrollTop = 0;
        }
    }
})

//使用指令
<div id="app" >
        <div v-pagetop  style="position:fixed;bottom:10px;right:10px;width: 100px;height: 100px;background-color:red;">
            回到顶部
        </div>
</div> 

拖拽:

./js/mydirections.js

Vue.directive("drag", {
    inserted: function (el, binding) {
        el.style.position = "absolute";
        let offsetX;
        let offsetY;
        let parentLeft = el.offsetParent.offsetLeft;
        let parentTop = el.offsetParent.offsetTop;
        let maxLeft = el.offsetParent.offsetWidth - el.offsetWidth;
        let maxTop = el.offsetParent.offsetHeight - el.offsetHeight;

        // 鼠标按下的函数
        function mousedownFn(event) {
            let e = event || window.event;
            offsetX = e.offsetX
            offsetY = e.offsetY
            // onmousemove
            // offsetParent: 找到最近的有定位属性的那个元素
            el.offsetParent.addEventListener("mousemove", mousemoveFn);
        };

        // 鼠标移动的函数
        function mousemoveFn(event) {
            let e = event || window.event;
            // 一、数据处理
            let left1 = e.pageX - parentLeft - offsetX;
            let top1 = e.pageY - parentTop - offsetY;
            if (left1 < 0) {
                left1 = 0;
            }
            if (left1 > maxLeft) {
                left1 = maxLeft;
            }
            if (top1 < 0) {
                top1 = 0;
            }
            if (top1 > maxTop) {
                top1 = maxTop;
            }
            // 二、外观呈现
            el.style.left = left1 + "px";
            el.style.top = top1 + "px";
        }

        // onmousedown
        el.addEventListener("mousedown", mousedownFn);

        // onmouseup
        document.addEventListener("mouseup", function () {
            el.offsetParent.removeEventListener("mousemove", mousemoveFn);
        });

    }
    }
);


<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .redbox {
            width: 200px;
            height: 200px;
            border-radius: 10px;
            background-color: red;
        }
        #box{
            position: relative;
            border: 1px solid black;
            width: 500px;
            height: 400px;
        }
    </style>
</head>

<body style="height: 1200px">
    <div id="box">
        <div class="redbox" v-drag>我可以被拖拽</div>
    </div>
</body>

</html>
<script src="./js/vue.js"></script>
<script src="./js/mydirections.js"></script>
<script>
    let vm = new Vue({
        el: "#box",
        data: {}
    });

</script>

过滤器

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

​ 对数据在模板中的表现过滤,符合预期,比如:数据是0和1,想要表现成对错、成功失败、数据需要过滤器来格式化,vue1.x版本有系统自带过滤器,vue2.x之后完全需要自定义,没有自带过滤器

全局定义
Vue.filter('过滤器名称',函数(要过滤的元数据,参数1,参数n){
           		过滤器的功能
           		return 过滤的结果           
           })
使用

{{数据名 | 过滤器名(参数1,参数2)}}

v-bind:属性="数据| 过滤器名(参数1,参数2)"
局部定义
new Vue({
    ……………………
    filters:{
      过滤器名称:函数(要过滤的元数据,参数){
            过滤器的功能
            return 过滤的结果      
      }	//函数必须要有返回值
    }
})
示例:

阿拉伯数字的金额转为大写的金额: 12.56

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <style>
       
    </style>
</head>

<body>
    <div id="box">
        <input type="number" v-model.number="money"><br/>
        <p>¥:{{money}}</p>
        <p>大写:{{money | toChina}}</p>
    </div>
</body>

</html>
<script src="./js/vue.js"></script>
<script>

    Vue.filter("toChina",function(value){
            let money = value.toFixed(2);//保留两位小数
             //汉字的数字
            var cnNums = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖'];
            //基本单位
            var cnIntRadice = ['', '拾', '佰', '仟'];
            //对应整数部分扩展单位
            var cnIntUnits = ['', '万', '亿', '兆'];
            //对应小数部分单位
            var cnDecUnits = ['角', '分', '毫', '厘'];
            //整数金额时后面跟的字符
            var cnInteger = '整';
            //整型完以后的单位
            var cnIntLast = '元';
            //最大处理的数字
            var maxNum = 999999999999999.9999;
            //金额整数部分
            var integerNum;
            //金额小数部分
            var decimalNum;
            //输出的中文金额字符串
            var chineseStr = '';
            //分离金额后用的数组,预定义
            var parts;
            if (money == '') { return ''; }
            money = parseFloat(money);
            if (money >= maxNum) {
                //超出最大处理数字
                return '';
            }
            if (money == 0) {
                chineseStr = cnNums[0] + cnIntLast + cnInteger;
                return chineseStr;
            }
            //转换为字符串
            money = money.toString();
            if (money.indexOf('.') == -1) {
                integerNum = money;
                decimalNum = '';
            } else {
                parts = money.split('.');
                integerNum = parts[0];
                decimalNum = parts[1].substr(0, 4);
            }
            //获取整型部分转换
            if (parseInt(integerNum, 10) > 0) {
                var zeroCount = 0;
                var IntLen = integerNum.length;
                for (var i = 0; i < IntLen; i++) {
                var n = integerNum.substr(i, 1);
                var p = IntLen - i - 1;
                var q = p / 4;
                var m = p % 4;
                if (n == '0') {
                    zeroCount++;
                } else {
                    if (zeroCount > 0) {
                    chineseStr += cnNums[0];
                    }
                    //归零
                    zeroCount = 0;
                    chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
                }
                if (m == 0 && zeroCount < 4) {
                    chineseStr += cnIntUnits[q];
                }
                }
                chineseStr += cnIntLast;
            }
            //小数部分
            if (decimalNum != '') {
                var decLen = decimalNum.length;
                for (var i = 0; i < decLen; i++) {
                var n = decimalNum.substr(i, 1);
                if (n != '0') {
                    chineseStr += cnNums[Number(n)] + cnDecUnits[i];
                }
                }
            }
            if (chineseStr == '') {
                chineseStr += cnNums[0] + cnIntLast + cnInteger;
            } else if (decimalNum == '') {
                chineseStr += cnInteger;
            }
            return chineseStr;
        }
    );

    let vm = new Vue({
        el: "#box",
        data: {
            money:12.56
        }
    });

</script>

自定义指令和过滤器的使用场景区别

1、相同点:自定义指令和过滤器都是封装

2、不同的:

​ 1)、自定义指令使用在,dom操作上

​ 2)、过滤器使用在:不需要做逻辑处理,只做数据转换。

混入

​ 意义在于分发 Vue 组件(对象)中的可复用功能,混入对象就是一个json对象,json对象的属性就是 Vue对象的配置项(data,methods等等,但是没有el)

用法

1、定义格式

let mixin1 = {
  data: ...
  methods: ...
}

let mixin2 = {
  data: ...
  methods: ...
}

2、局部混入(组件内部混入 组件选项内)

mixins: [mixin1,mixin2] //当混入的键与引入键冲突时以组件内的键为主

new Vue({ 
      el:"#app"data:{
      	msg:"hello"
  	  }
      mixins: [mixin1,mixin2]
})

3、全局混入:

 Vue.mixin(mixin1)//绝对不推荐的

​ 混入普通选项与组件(vue对象)选项合并,遇冲突,以组件(Vue对象)为主,即:就近原则。

​ 如果是生命周期钩子函数,那么都会调用(混入的钩子先调用),所以,不推荐使用全局混入。

自定义指令、过滤器、混入的使用场景区别

1、相同点:自定义指令、过滤器、混入都是封装

2、不同的:

​ 1)、自定义指令使用在 dom操作上

​ 2)、过滤器使用在:不需要做逻辑处理,只做数据转换。

​ 3)、混入的功能比较强大,比较综合。因为,它里面包含了vue配置项的所有配置项。

预购阿里云服务器(ecs云服务器)

链接 -》个人云 -》突发性能型 t5(74/年)-》系统(centOs系统,认准ecs云服务器-》控制台做一下实名认证

域名购买

链接


虚拟DOM和diff算法(原理)(面试题)

什么是虚拟DOM(virtual DOM):
所谓的虚拟 dom,也就是我们常说的虚拟节点,它是通过JS的Object对象模拟DOM中的节点,然后再通过特定的render(渲染)方法将其渲染成真实的DOM的节点。

为什么使用虚拟DOM:
使用js操作DOM时(增删改查等等),那么DOM元素的变化自然会引起页面的回流(重排)或者重绘,页面的DOM回流(重排)或者重绘自然会导致页面性能下降,那么如何尽可能的去减少DOM的操作是框架需要考虑的一个重要问题!
https://blog.csdn.net/jiang7701037/article/details/98516468。

​ vue中,使用虚拟DOM 来提高性能。

真实DOM和虚拟DOM的区别:

虚拟DOM不会进行排版与重绘操作

真实DOM频繁排版与重绘的效率是相当低

虚拟DOM进行频繁修改,然后一次性比较(使用diff算法)并修改真实DOM中需要改的部分,最后并在真实DOM中进行排版与重绘,减少过多DOM节点排版与重绘损耗

虚拟DOM有效降低了重绘与排版的次数,因为,最终把虚拟dom与真实DOM比较差异,可以只渲染局部

diff算法:
虚拟DOM,是一种为了尽可能减少页面频繁操作DOM的方式,那么在虚拟DOM中,通过什么方式才能做到呢? 就是Diff算法进行对比

diff算法的原理:
逐步解析newVdom的节点,找到它在oldVdom中的位置,如果找到了就移动对应的DOM元素,如果没找到说明是新增节点,则新建一个节点插入。遍历完成之后如果oldVdom中还 没处理过的节点,则说明这些节点在newVdom中被删除了,删除它们即可。

总结:

1、产生两个虚拟DOM树:newVDom,oldVDom。

2、oldVDom和真实DOM保持一致

3、数据变化时,影响的是(操作的是)newVDom

4、操作后newVDom后,通过diff算法对比newVDom和oldVDom的差异,并在oldVDom标注哪些节点要删除,哪些节点要增加,修改

5、根据oldVDom操作真实的DOM,让真实Dom和oldVDom保持一致

总结:

虚拟DOM: 用JSON对象模拟的真实dom

diff算法:用来比较两个虚拟dom的不同之处。

vue-dev-tools安装

方案1: 登录谷歌应用商城->索引vue-dev-tools->安装->重启浏览器

方案2: https://blog.csdn.net/jiang7701037/article/details/99708017

七、组件

​ 组件封装的是完整的页面功能(包括:HTML、CSS、JS),而函数只封装JS(逻辑)

组件的概念:

​ 组件是自定义标签,vueJS提供的组件可以让程序员自定义标签,对页面进行模块化。每个标签里包含HTML,CSS,JS。

​ vue的组件就是一个vue对象。(vue的两大核心:数据驱动,组件化) 。vue对象的配置项,在vue组件里也可以使用。
​ 组件的配置项如下:
​ 没有el属性。
​ template:html模板代码,只能有一个根标签

​ data:必须是个函数
​ methods:

​ ………………………………

一个完整的标签格式是: <标签名 属性名=“属性值" 事件=”函数“>内容</标签名>

vue组件的基本使用(标签名):
1、定义组件:

​ 第一种:

let 组件变量名= Vue.extend({
        template:'<div class="header">{{msg}},我是header组件</div>'
        data:function(){
			return {
				msg:”hi”
			}
		},
  });

第二种(简化写法):

let 组件变量名={
    template:'<div class="header">{{msg}},我是header组件</div>'
    data:function(){
        return {
            msg:”hi”
        }
    },
}; 
2、注册组件:

全局注册:

Vue.component('标签名',组件变量名);

全局注册的组件,在任何vue对象里都可以使用

局部注册:

//在vue对象的components选项里进行注册
new Vue({
     el:
     components:{
    	 标签名:组件变量名
     }     
});

局部注册的组件,只能在当前vue对象(组件)里使用。

3、使用组件:

组件就是自定义标签,所以,使用组件,就跟使用标签是同样的。

<标签名></标签名>

示例代码:

<body >
    <div id="box">
        <!--使用组件(组件就是自定义标签,所以,就是使用标签)-->
       <chat></chat>
    </div>
</body>

</html>
<script src="./js/vue.js"></script>

<script>

// 定义组件
let chatObj = {
    template:`
        <div>
            <div style="width:200px;height:300px;border:1px solid black" v-html="msg"></div><br/>
            <input type="text" v-model="str" />
            <input type="button" value="发送" @click="send" />
        </div>
    `,
    data:function(){
        return{
            str:"",
            msg:""
        }
    },
    methods:{
        send(){
            this.msg += this.str+"<br/>"
            this.str ="";
        }
    }
};

// 2、全局注册
Vue.component("chat",chatObj);
     
let vm = new Vue({
        el: "#box",
        data: {
        },
    	//局部注册:
        components:{
            "chat":chatObj
        }
    });

</script>
4、组件嵌套:

把一个组件的标签写在另外一个组件的template里,就是组件嵌套。

如:

  //子组件 
  let mycomson = {
        template:"<div>我是son里的div:{{msg}}</div>",    
        data:function(){
            return {
                msg:"hi:son"
            }
        }
    };

   //父组件
    let myComParent = {
        template:`<div>
                        <p>我是p:{{msg}}</p>
                        <mycomson></mycomson>                    
                    </div>`,
        data:function(){
            return {
                msg:"hi"
            }
        },
        components:{
            // 局部注册了另外一个组件
            "my-com-son":myComSon
        }    
    };
5、组件编写方式与 Vue 实例的区别:

​ 1、组件名(标签名)不可和html官方的标签名同名,组件名如果小驼峰,那么使用时,用短横线(羊肉串的写法),或者组件名首字母大写(这个规则是在未来的单文件组件,模块化的写法里使用)。

​ 2、组件没有el选项,只有根实例存在el,组件里使用template定义模板

​ 3、组件模板(html代码)只能有一个根标签

​ 4、data是个函数(面试题)

​ 一个组件的 data 选项必须是一个函数,且要有返回object(就是vue对象的data),只有这样,每个实例(vue组件对象)就可以维护一份被返回对象的独立的拷贝,否则,组件复用时,数据相互影响。即:组件的作用域(应该)是独立的。

​ 简单回答:如果不是函数,那么,复用的组件的data共享同一块内存空间。

组件的属性(标签的属性)

​ 使用props(property的简写)来完成组件属性的声明。 props是外部给组件传入的数据。data是组件内部的数据。

使用 Prop 传递静态数据

1)、在组件内部增加配置项 props来声明组件里的属性。props里面可以声明多个属性,所以,是个数组。


let myComParent = {
        props:["name","sex"], //声明了两个自定义属性
        template:`<div>
                        <p>我是p:{{msg}}</p>     
                        <p>人的信息:</p>             
                        <p>姓名:{{name}}</p>             
                        <p>性别:{{sex}}</p>             
                    </div>`,
        data:function(){
            return {
                msg:"hi"
            }
        } 
    };

2)、使用组件时,给属性传入数据:

<!-- 使用组件时,给属性传入值,传入的值,就可以在组件内部使用 -->
<my-com-parent name="张三疯他哥" sex=""></my-com-parent>

总结提升认识:

把封装组件和封装函数进行类比:

​ 在组件内部用props声明的属性,相当于封装函数时声明的形参。

​ 使用组件时,相当于调用函数,传递实参。

​ props是外部给组件传入的数据(相当于函数中的参数)。data是组件内部的数据(相当于函数里的局部变量)

动态Prop

组件属性和官方标签的属性是同样的道理,所以,给组件的属性也可以v-bind 数据。即:绑定动态的数据

<my-com-parent v-bind:name="name" sex=""></my-com-parent>	

​ 如果你想把一个对象的所有属性作为 prop 进行传递,可以使用不带任何参数的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如,已知一个 todo 对象:

todo: {
  text: 'Learn Vue',
  isComplete: false
}

<todo-item  v-bind="todo"></todo-item>

等价于:
<todo-item 
  v-bind:text="todo.text"
  v-bind:is-complete="todo.isComplete"
></todo-item>

奇葩情况(组件的属性是引用类型)

​ 在 JavaScript 中对象和数组是通过引用传入的(传的是地址),所以对于一个数组或对象类型的 prop 来说,在子组件中改变这个对象或数组本身将会影响到父组件的状态(data),相当于函数的形参是引用类型

Prop 验证

​ vueJS还提供了对属性类型的验证、属性默认值,是否必须等等。这时候,props不能使用数组,而需要使用对象。

如:

  props:{
            "name":{
                type:String, //限制name属性的类型是字符串
                required:true //限制name属性是必须传入值的。
            },
            "sex":[String,Number], //限制sex属性的值可以为字符串,也可以为数字
            "age":{
                type:Number, //限制age属性的类型是数字型
                default:10 // age属性的默认值是10 。如果没有给age传值,那么age就是10。
            },
            "isadult":Boolean
        },
单向数据流

​ Prop 是单向绑定的:当父组件的属性(数据)变化时,将传导给子组件,但是反过来不会。这是为了防止子组件无意间修改了父组件的状态,来避免应用的数据流变得难以理解。
​ 另外,每次父组件更新时,子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了,Vue 会在控制台给出警告。

总结:

组件就是标签,prop是标签的属性。

prop是外部传入的数据,data是组件内部的数据。

组件的事件

​ 1、绑定事件(父组件里写):

​ HTML(标签)里的绑定方式:v-on

​ JS(Vue)里绑定方式: vue对象.$on(“事件名”,事件处理函数)

​ 2、触发事件(子组件里写) : vue对象.$emit(“事件名”,参数);

示例:

//子组件:
Vue.component('button-counter',{
	template: "<input type='button' v-on:click='incrementCounter' v-model='counter' />",
	data:function(){
		return {
			counter:0
		}
	},
	methods:{
		incrementCounter:function(){
			this.counter += 1
			this.$emit('increment')
		}
	}
});

//父组件:

<div id="app1">
    <p>{{ total }}</p>
    <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

var app1 = new Vue({
	el: '#app1',
	data:{
		total:0
	},
	methods:{
		incrementTotal:function(){
			this.total += 1;
		}
	}
});
组件的内容(插槽)

​ 组件的内容就是标签的innerHTML。vueJS里使用**Slot(插槽)**分发内容。

​ props用来处理标签的属性 ,slot用来处理标签的内容。
​ 将父组件的内容(DOM)放到子组件指定的位置叫作内容分发。

单个插槽
 //子组件
 let person = {      
        template:`<div>
                        <hr/>
                            <p>我是上p</p>
                            <slot></slot>
                            <p>我时下p</p>
                        <hr/>
                    </div>`
    };

//父组件:
   <div id="app">
        <person>
            <div>我是div</div>
        </person>        
    </div>

    new Vue({
        el:"#app",
        components:{
            person
        }
    });
具名插槽(多个插槽需要使用名字)

​ 如果父级给子级传来了好多DOM(HTML元素),而且需要把不同的DOM放在子组件不同位置时,就需要给slot起名字,这就是具名插槽。slot元素可以用一个特殊的属性name 来配置如何分发内容。

格式:

<slot name="插槽名"></slot>

示例:

//子组件
     let person = {      
        template:`<div>
                        <hr/>
                            <p>我是上p</p>
                            <slot name="s1"></slot>
                            <p>我是中p</p>
                            <slot name="s2"></slot>
                            <p>我是下p</p>
                        <hr/>
                    </div>`
    };
//父组件
  <div id="app">
        <person>
            <div slot="s1">我是div1</div>
            <div slot="s2">我是div2</div>
        </person>        
    </div>
   new Vue({
        el:"#app",
        components:{
            person
        }
    });
编译作用域

​ 父组件模板的内容在父组件作用域内(父组件对应的对象的作用域)编译;子组件模板的内容在子组件作用域内编译。

示例:

//子组件
let person = {      
        template:`<div>
                        <hr/>
                            <p>我是上p:{{t}}</p>
                            <p>我是下p</p>
                        <hr/>
                    </div>`,
        data(){
            return{
            	t:"我是子组件的数据"
        	}
        }
    };
    
//父组件:
  <div id="app">
        <input :value="msg" />         
        <person v-show="s">
            <p>{{msg}}</p>
            <div>我是div1:{{msg}}</div>
        </person>
  </div>

    new Vue({
        el:"#app",        
        data:{
            msg:"hi",
            s:true
        },
        components:{
            person
        }
    });

自行研究:作用域插槽

作用域插槽
组件(间)的通信(面试中经常问的)

​ vue组件之间的通信(传递数据)是必然的,依据vue组件之间的关系(父子,兄弟,或者无关组件)会有不同的做法:

1)、父子组件:
父—> 子: props, 子—> 父:事件

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

2)、父给子组件:refs

3)、兄弟组件,或者无关组件:事件总线,集中管理,vueX等

refs

​ 首先,需要知道:用标签的方式使用组件(如:),实际就是创建了组件对象。只要拿到组件对象,那么组件对象里的methods就可以使用。refs是vue中获取dom的一种方式,dom也就是标签,标签就是组件对象。即就是:拿到了dom,就相当于拿到了组件对象(这段话需要慢慢品……)

​ 如果某个元素使用ref属性,那么,在vue对象里,就能用this.$refs 访问。可以认为是给元素增加了个id属性,在vue里就可以操作该dom了

​ 格式:

如:
    <p ref = "pId"> {{msg}}</p>
    <p ref = "pId02"> {{msg}}</p>

 methods:{
     testf:function(){
       	this.$refs.pId.innerHTML = "hi";
     }
}

示例:


let myCom = {
    template:`
        <div>            
        </div>
    `,
    data(){
        return {

        }
    },
    methods:{
        focusFn(str){
            console.log(str);
        }
    }
}

Vue.component("my-com",myCom);

new Vue({
    el:"#app",
    data:{
        msg:"hi"
    },
    methods:{
        fn(){
            this.$refs.comId.focusFn(this.msg);//focusFn()是子组件里的函数。
        }
    }
});
事件总线(event-bus)

​ event-bus实质就是创建一个vue实例,通过一个空的vue实例作为桥梁实现vue组件间的通信。它是实现非父子组件(其实,也可以实现父子)通信的一种解决方案。

步骤:

1、单独new一个Vue空对象:  let bus= new Vue();
2、在组件A里,绑定一个自定义事件(相当于定义了一个自定义事件):
	    bus.$on('eclick',target => {
          console.log(target) 
        })
3、在组件B里,触发事件
      bus.$emit('eclick',"b传给a的");

示例:

// 定义一个vue对象(作为事件总线的对象)
let bus = new Vue();

let myCom1 = {
    template:`
        <div>
            <hr>
            组件com1
            <hr>
        </div>
    `,
    created(){
        // 注册了一个事件
        bus.$on("eclick",(target)=>{
            console.log(target);
        });        
    }
}

let myCom2 = {
    template:`
        <div>
            <input type="button" value="  传 " @click="fn" />
        </div>
    `,
    methods:{
        fn(){
            //触发事件
            bus.$emit("eclick","hello");
        }
    }
}

Vue.component("my-com1",myCom1);
Vue.component("my-com2",myCom2);

new Vue({
    el:"#app"
});

集中管理($root)

把数据存到根实例的data选项,其他组件直接修改或者使用

定义

new Vue({
  data:{
      a:1
  }
})

使用

//子组件内部
this // 子组件本身
this.$root // vm 根实例
this.xx //组件内部数据
this.$root.a //根实例数据
动态组件

​ 有的时候,在不同组件之间进行动态切换是非常有用的。即页面的某个位置要显示的组件是不确定的,是会变化的。

​ vue中使用的方式实现。

示例:

<div id="app">
        <span @click="show(0)">娱乐</span>|<span  @click="show(1)">八卦</span>|<span @click="show(2)">体育</span>
        <div>
            <component :is="currCom"></component>
        </div>
</div>

let yuLe = {
    template:"<div>娱乐新闻</div>"
}
let eightGua = {
    template:"<div>八卦新闻</div>"
}
let sports = {
    template:"<div>体育新闻</div>"
}

new Vue({
    el:"#app",
    data:{
        currCom:"yuLe",
        coms:["yuLe","eightGua","sports"]
    },
    methods:{
        show(index){
            this.currCom = this.coms[index];
        }
    },
    components:{
        yuLe,eightGua,sports
    }
});

根据班级情况尝试扩展如下:
增删改查(或者留言板,或者员工信息)

八、vue对象

类和实例API

https://cn.vuejs.org/v2/api/#%E5%85%A8%E5%B1%80-API

https://cn.vuejs.org/v2/api/#%E5%AE%9E%E4%BE%8B-property

Vue类的属性和方法

​ Vue 是个类,所以Vue.属性名,是类属性|静态属性,Vue.方法名() 是类方法(也叫静态方法)
​ 如:Vue.extend(),Vue. mixin(),Vue.component()……………………

Vue实例(对象)属性和方法

​ let vm = new Vue() 返回的是实例,所以vm. 属 性 名 是 实 例 属 性 , v m . 属性名 是实例属性,vm. vm.方法名()是实例方法,同时vue类内部的this指向的是实例vm。 实例 vm.$属性名对等 vue选项的 根key。

​ 如:vm. o n ( ) v m . on() vm. on()vm.emit(),vm. d a t a , v m . data, vm. datavm.el ……………………。

生命周期(面试题)

​ 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会

链接

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

面试题:请问您对vue的生命周期是怎么理解的?

一、vue生命周期是什么

就是vue对象从创建,到使用,到销毁的过程。

二、vue对象生命周期经历了四个阶段,同时有八个钩子函数:

1)、数据挂载 阶段 :把传入的data属性的内容(data配置项),赋给vue对象。即:把形参中data的属性赋给vue对象。

​ 前后分别的钩子函数是:beforeCreate、created

2)、模板渲染阶段:把vue对象中data渲染到dom对象上(模板上,视图上)。

​ 前后分别的钩子函数是:beforeMount、mounted

3)、组件(模板)更新阶段:当数据(必须是在模板上使用的数据)发生变化时,会触发组件的更新,组件会重新渲染。

​ 前后分别的钩子函数是:beforeUpdate、updated

4)、组件销毁阶段:

​ 前后分别的钩子函数是:beforeDestroy、destroyed

​ 如果组件在缓存的话,那么,组件切换时,会调用的钩子函数是:

activated 和 deactivated

三、(当页面初始的数据来自后端)发送请求在哪个钩子函数,created

四、在beforeDestroy钩子函数里,会做什么事情?

​ 清除定时器。因为,定时器是属于window对象的,启动的定时器也属于window对象,只要网页不关闭,window对象就不会销毁。所以,组件销毁时,并不会销毁定时器:

<body >
    <div id="box">
       <span @click="show(0)">娱乐</span>|<span  @click="show(1)">八卦</span>
       <div>
        <component :is="currCom"></component>
       </div>
    </div>
</body>

</html>
<script src="./js/vue.js"></script>

<script>


let yuLe = {
    template:"<div>娱乐新闻</div>",
    data(){
        return {
            timer:null,
            msg:"hi"
        }
    },
    created(){
        console.log("娱乐组件创建");
        var ord=0;
        this.timer = setInterval(function(){
            console.log("定时器:"+ord++);
        },1000);
    },
    beforeDestroy(){
        window.clearInterval(this.timer);
        console.log("娱乐组件销毁前");
    }
}

let eightGua = {
    template:"<div>八卦新闻</div>",
    beforeCreate(){
        console.log("八卦组件创建");
    }
}


let vm = new Vue({
    el: "#box",
    data: {
        currCom:yuLe,
        coms:[yuLe,eightGua]
    },
    components:{
        yuLe,
        eightGua
    },
    methods:{
        show(idx){
            this.currCom = this.coms[idx];
        }
    }
});
</script>

总结:

1、vue组件(对象)从创建到(初次)显示在用户眼前:经历了 beforeCreate,created,beforeMount,mounted

2、数据(必须在模板中使用的数据)更新:调用beforeUpdate和updated函数

3、为什么叫钩子函数:和回调函数是同样的道理,只不过钩子函数更多会强调(函数调用的)时机。

思考题:

1、如果一打开组件,就需要显示数据,那么请求,应该在哪个钩子函数里写?为什么?

​ created,

​ 因为,一般来说,后端返回来的数据需要赋给vue对象的属性(this.属性名),在created里是最早能够拿到vue对象属性的。如果在beforeMount和mounted里就有点晚了。

2、如果组件在keep-alive里,而且有定时器(比如:轮播图),如果说deactivated时,可以停止定时器。

项目环境(脚手架)

脚手架搭建的项目环境是一个模块化,工程化,自动化的环境。

单文件组件

xx.vue,内部组成(template + script +style)

​ 概念: 把一个组件的所有代码(HTML模板,样式,js(vue对象))写在一个文件里,扩展名是.vue。一个文件里就只有一个组件。这就是单文件组件。
基本结构:

<template>
      HTML代码
</template>

<script>
      vue对象 (使用模块化导出vue对象):可以使用es6的写法
</script>

<style scoped> //scoped: 表示局部作用域,表示当前style标签的样式只会应用在当前vue文件里的模板里
     样式
</style>

示例:

<template>
     <p>{{msg}}</p>
</template>

<script>
	export default {
        
        data(){
 		 return {  
 		 	msg:”hello” 
 		 }
 	   }
	}
</script>
<style scoped>
	p{
          color:red;
          font-size:12px
    }
</style>

脚手架(vue-cli)环境搭建

cli: command line interface

  • 通过官方脚手架,(命令行的方式)搭建模块化,工程化,自动化开发环境

  • 搭建脚手架3/4+

    
    //1、安装(脚手架工具的3.x/4.x)
    npm install -g @vue/cli
    
    //1、创建项目:使用脚手架搭建项目(文件夹)
    //1)、如果想搭建版本 v3.x/4.x
    vue create 项目目录
    
    

如果还想搭建脚手架2的项目

//1、查看版本(这是查看脚手架的版本) 
vue -V  

//2、如果版本是低于3.X,那么卸载脚手架,安装最新的。
npm uninstall vue-cli -g

//3、安装(脚手架工具)
//1)、装脚手架工具的3.x/4.x
npm install -g @vue/cli
//2)、桥接2.X(兼容脚手架2.X)
npm install -g @vue/cli-init 

//4、创建项目:使用脚手架搭建项目(文件夹)

//1)、如果想搭建版本 v3.x/4.x
vue create 项目目录
//2)、如果想搭建版本 2.X
vue init webpack 项目目录

注意:项目目录,不要和官方的或者第三方的模块重名,也不要使用汉字(每一级文件夹尽量不要使用汉字)

  • HbuildX自动搭建模块化,工程化,自动化开发环境
工作区-》右键-》创建项目-》普通项目-》vue-cli项目
  • 直接copy他人生成的项目环境也可以。

去掉eslint提示:

1、在项目的根目录下创建文件:vue.config.js。

2、在vue.config.js里增加如下代码:

module.exports = {

​ lintOnSave:false,

}

3、重启项目:

​ 按 ctrl +C 把项目先结束了,重新运行 npm run serve

脚手架搭建好的项目的讲解

1)、vue-cli2.X

build文件夹(暂时不需要关注): webpack的相关配置

config文件夹(暂时不需要关注):项目环境的配置。

src文件夹:源代码的文件夹,程序员就在此目录下写代码

src/assets文件夹: 存放静态资源(css,图片,字体文件,视频,音频等等),这些静态资源会做(webpack)打包处理(编译)

src/components文件夹: 所有的组件

src/App.vue:main.js所引入的App.vue是模板(main.js里的Vue对象的模板)

src/main.js: 就是唯一的html文件所对应的唯一的Vue对象(根实例)。入口文件。

static文件夹:存放静态资源(但是该文件夹下的文件不做(webpack)打包处理)。

index.html:唯一的HTML文件。

2)、vue-cli3+

区别:

隐藏了build和config文件夹

把static文件夹变成了public文件夹:放置静态资源,把唯一的index.html也放在了public下。

main.js

Vue.config.productionTip = false//设置为 false 以阻止 vue 在启动时生成生产提示。
render: h => h(App)
//↓
render: function(createElement){
  // return createElement('h3','内容')
  // return createElement(组件)
  return createElement(App)
}

es6模块化复习

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

1)、export

输出

//定义一个文件: a.js

//export 可以在一个模块里面多次使用
//export可以对外导出任意类型的数据
//export 导出的数据要有名字(变量名,函数名)

export const a = 100
export var b = 200
export var person ={
   
}

输入(方式一)

//引入:需要解构
import {a,b,person} from './a.js'
import {a,person} from './a.js'

输入(方式二)

可以把模块输出的所有变量包装成一个对象
import * as obj from './a.js'  
即:obj就是有三个属性的对象
{
	a,
	b,
	person
}

2)、export default

输出

//定义一个文件: a.js

//export default 在一个模块里面只能出现一次
//export default可以对外导出任意类型的数据
//export default导出的数据是匿名的(不能写变量名),即就是,只导出值。

格式: export default 任何类型的变量的值(大部分时候是对象)

export default 100;

export default {  };

输入

格式:
import 变量名 from "模块所在的路径及其文件名"; (如果是自定义模块就需要写路径,如果是官方的或第三方的模块,不需要写路径)

import a from "./a.js";

a就是export default导出的数据。
a其实就是个变量名。

这种写法其实就是,把变量名和赋的值分在了两个模块里。

css 规则

style-loader 插入到style标签,style标签多了,选择器冲突问题就出来了,解决方案如下

/* 方案1:	命名空间 不太推荐BEM命名风格*/
/*B__E--M  block 区域块  element 元素  midiler 描述|状态 */
.search{
    
}
.search__input{}
.search__input--focus{}
.search__input--change{}
.search__button{}

//  B__E--M
//  b-b-b__e-e-e--m-m-m
<!--方案2 css模块化 -->
<template>
	<div :class="$style.box">
    ...
  </div>
</template>

<script>
export default {
  mounted(){
    this.$style //返回一个对象 {选择器:'混淆后的选择器',xx:oo}
  }
}
</script>

<style module>
  /* 注意: 选择器名(支持 id,类,或者id、类开头其他选择器,不支持标签名(标签名开头的)) */
  .box{}
  #box2{}
  .box3  div{}
  #box3 div{}
</style>

模块化的好处:使用实例属性$style可以访问到样式。
<!--方案3 独立样式作用域-->
<template></template>
<script></script>
<style scoped></style>

注意:在vue脚手架里,图片(静态资源)的路径问题:

​ 1、如果img标签src使用的是静态的写法(就是纯粹html代码),那么,文件来自于 assets 下,按照正常路径写。

​ 2、如果img标签的src使用的动态的写法(vue去给它赋值,使用v-bind),那么,文件来自于 public下,但是,src后面的值,不能带“public”

​ 原因(原理):

​ 1、开发目录和发布目录(二阶段用的gulp,三阶段用的webpack(vue脚手架里用的webpack))

​ 2、在浏览器运行的是发布目录的代码

​ 所以说,最终的路径应该以发布目录的路径为准。

​ 二阶段能够直接看到发布目录的代码,webpack默认是在内存中放的。如果想看那就用 npm run build打包

​ webpack只做打包,并不执行js代码。

明确一些名词(叫法):

1、vue.js :是一个js框架。现在讲的版本是 2.×.× ,最新的版本是3.×.×

2、vue-cli:vue脚手架,脚手架是个工具,帮程序员自动搭建项目环境(创建了一些文件夹和文件,并写了最基础的代码)。 现在市面上使用的版本有 2.×.×和 4. ×.×

坑:

1、不要在单文件组件里使用

单页面应用(SPA)

单页面应用的概念

SPA:single page application,单页面应用。

​ 就是整个项目就只有一个html页面(文件),首次加载时,把所有的html,css,js全部加载下来。通过操作dom的删除和创建(添加)来完成页面的切换

单页面应用优缺点

优点:

1,局部刷新,所以,用户体验好
2,前后端分离
3,页面效果会比较炫酷(比如切换页面内容时的转场动画)

缺点:
1,不利于seo
2,导航不可用,如果一定要导航需要自行实现前进、后退。
3,初次加载时耗时多
4,页面复杂度提高很多

SPA和MPA的区别

SPA:single page application。只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入,单页面的页面跳转,仅刷新局部资源。vue后来做了改进,有些组件按需加载

MPA:multiple page application 。就是指一个应用中有多个页面,页面跳转时是整页刷新。

插槽页面模式多页面模式(MPA Multi-page Application)单页面模式(SPA Single-page Application)
页面组成多个完整页面, 例如page1.html、page2.html等由一个初始页面和多个页面模块组成, 例如:index.html
公共文件加载跳转页面前后,js/css/img等公用文件重新加载js/css/img等公用文件只在加载初始页面时加载,更换页面内容前后无需重新加载
页面跳转/内容更新页面通过window.location.href = "./page2.html"跳转通过使用js方法,append/remove或者show/hide等方式来进行页面内容的更换
数据的传递可以使用路径携带数据传递的方式,例如:http://index.html?account=“123”&password=123456"",或者localstorage、cookie等存储方式直接通过参数传递,或者全局变量的方式进行,因为都是在一个页面的脚本环境下
用户体验如果页面加载的文件相对较大(多),页面切换加载会很慢页面片段间切换较快,用户体验好,因为初次已经加载好相关文件。但是初次加载页面时需要调整优化,因为加载文件较多
场景适用于高度追求高度支持搜索引擎的应用高要求的体验度,追求界面流畅的应用
转场动画不容易实现容易实现

单页面模式:相对比较有优势,无论在用户体验还是页面切换的数据传递、页面切换动画,都可以有比较大的操作空间 多页面模式:比较适用于页面跳转较少,数据传递较少的项目中开发,否则使用cookie,localstorage进行数据传递,是一件很可怕而又不稳定的无奈选择

mock数据

​ mock这词本意是虚拟,模拟的意思。mock server工具,通俗来说,就是模拟服务端接口数据,一般用在前后端分离后,前端人员可以不依赖API开发,而在本地搭建一个JSON服务,自己产生测试数据。即:今天要讲的json-server就是个存储json数据的server
​ json-server 支持CORS和JSONP跨域请求。

json-server

使用步骤:
1、初始化项目:

​ npm init -y

2、安装json-server

​ npm i json-server -D

3、打开项目编写数据

在项目根目录下创建db.json,并写上合法的json数据,如下:

{
  "inc": {
    "count": 3
  },
  "vips": [
    {
      "username": "李茂军",
      "userpass": "123666",
      "id": 2
    }
    {
      "username": "王翠霞",
      "userpass": "123888",
      "id": 6
    }
  ],
  "bannerImgs": [
    "/imgs/1.jpg",
    "/imgs/2.jpg",
    "/imgs/3.jpg",
    "/imgs/4.jpg"
  ],
  "comments": [
    {
      "bookId": "878911",
      "id": "001",
      "username": "李茂军",
      "time": "2021-10-27 11:40:15",
      "content": "三国演义很有内涵"
    },
    {
      "bookId": "878911",
      "id": "002",
      "username": "李茂军02",
      "time": "2021-10-27 11:41:15",
      "content": "三国演义很有内涵,女朋友很喜欢"
    }
  ],
  "books": [
    {
      "id": "878911",
      "name": "三国",
      "author": "罗贯中",
      "price": 51.2,
      "img": "/imgs/1.jpg",
      "type": "hot"
    },
    {
      "id": "878912",
      "name": "水浒",
      "author": "施耐庵",
      "price": 51.5,
      "img": "/imgs/2.jpg",
      "type": "hot"
    },
    {
      "id": "878913",
      "name": "红楼梦",
      "author": "曹雪芹",
      "price": 51.8,
      "img": "/imgs/3.jpg",
      "type": "hot"
    },
    {
      "id": "878914",
      "name": "西游记",
      "author": "吴承恩",
      "price": 51.8,
      "img": "/imgs/4.jpg",
      "type": "hot"
    },
    {
      "id": "878915",
      "name": "大学",
      "author": "李茂军",
      "price": 52.8,
      "img": "/imgs/img1.jpg",
      "type": "new"
    },
    {
      "id": "878916",
      "name": "中庸",
      "author": "王翠霞",
      "price": 52.9,
      "img": "/imgs/img2.jpg",
      "type": "new"
    },
    {
      "id": "878917",
      "name": "论语",
      "author": "王锐",
      "price": 53.8,
      "img": "/imgs/img3.jpg",
      "type": "new"
    },
    {
      "id": "878918",
      "name": "孟子",
      "author": "李家恒",
      "price": 54.8,
      "img": "/imgs/img4.jpg",
      "type": "new"
    },
    {
      "id": "878919",
      "name": "孟子2",
      "author": "李家恒",
      "price": 54.8,
      "img": "/images/img4.jpg",
      "type": "new"
    },
    {
      "id": "878920",
      "name": "孟子3",
      "author": "李家恒",
      "price": 54.8,
      "img": "/images/img4.jpg",
      "type": "new"
    },
    {
      "id": "878921",
      "name": "孟子4",
      "author": "李家恒",
      "price": 54.8,
      "img": "/images/img4.jpg",
      "type": "new"
    },
    {
      "id": "878922",
      "name": "孟子5",
      "author": "李家恒",
      "price": 54.8,
      "img": "/images/img4.jpg",
      "type": "new"
    },
    {
      "id": "878923",
      "name": "孟子6",
      "author": "李家恒",
      "price": 54.8,
      "img": "/images/img4.jpg",
      "type": "new"
    }
  ],
  "readers": [
    {
      "id": "007",
      "name": "张三疯",
      "age": 35
    },
    {
      "id": "008",
      "name": "张四疯",
      "age": 32
    }
  ]
}

注意:每个键后面的值,只能是对象或者数组。

4、启动配置

在package.json下增加如下代码:

"scripts": {
    + "server":"json-server db.json"
},
5、运行

在命令行运行: npm run server

JSON-SERVER的各种请求:

可以使用postman等工具测试以下请求。

  • GET 请求数据列表

    获取所有的书籍

    localhost:3000/bookS
    
  • GET 请求指定ID的数据

    localhost:3000/bookS/878911
    
  • GET 请求指定字段值的数据

    localhost:3000/users?name=李四&age=15
    
  • GET 数据分页

    localhost:3000/bookS?_page=1&_limit=2
    

    _page表示页码

    _limit表示每页的条数

  • GET 数据排序

    localhost:3000/bookS?_sort=price&_order=asc
    - asc 升序 desc 降序
    
  • GET 区间查询

    搜索 age属性的值大于等于30 而 小于等于40的记录

    localhost:3000/users?age_gte=30&age_lte=40
    

    搜索 price 属性的值大于等于51.2而 小于等于51.8的记录

http://localhost:3000/bookS?price_gte=51.2&price_lte=51.8
  • GET 搜索

    搜索所有属性值里包括“三”的记录,模糊查询。在所有属性中进行查询。

    localhost:3000/bookS?q=
  • GET 关联查询

    http://localhost:3000/books/878911?_embed=comments
    

查询books中id为878911,并把comments中 bookId为878911的数据关联出来,结果是:

{
  "id": "878911",
  "name": "三国",
  "author": "罗贯中",
  "price": 51.2,
  "img": "/imgs/1.jpg",
  "type": "hot",
  "comments": [
    {
      "bookId": "878911",
      "id": "001",
      "username": "李茂军",
      "time": "2021-10-27 11:40:15",
      "content": "三国演义很有内涵"
    },
    {
      "bookId": "878911",
      "id": "002",
      "username": "李茂军02",
      "time": "2021-10-27 11:41:15",
      "content": "三国演义很有内涵,女朋友很喜欢"
    }
  ]
}
  • POST 添加数据

    请求方式为:POST

    • localhost:3000/users
    • Headers:{ Content-Type:‘application/json’ }
    • body -> raw
     {
         "name": "赵六",
         "age": 50,
         "companyId": 3
     }
    
  • delete 删除数据

    请求方式为:DELETE

    localhost:3000/users/1
    
  • patch 更新数据

    请求方式为:PATCH

    • localhost:3000/users/3
    • Headers:{ Content-Type:‘application/json’ }
    • body -> raw
     {
         "age": 100
     }
    
json-server的路由

需求场景:当使用mock数据,并且需要反向代理时:

1、在json-server的文件夹下新建route.json文件,写上如下代码:
{
“/api/*”: “/$1” // /api/posts => /posts
}
上面route.json的意思就是,当请求/api/posts时,重定向到/posts。
2、命令行中输入如下命令( 路由文件通过–routes 参数来指定):
json-server --routes route.json db.json

mock.js(自行研究)

数据交互

向服务器发送ajax请求,抓取数据

解决方案

  • 自行通过XMLHttpRequest对象封装一个ajax(已经讲过)
  • 使用第三方自带的ajax库,如:jquery(已经讲过)
  • ES6新增的 fetch
  • 使用第三方ajax封装成promise习惯的库,如:vue-resourceaxios

fetch

ES6新增的前后端交互方案。

格式:Promise fetch(String url,配置);

Promise fetch(url,{
  method:
  headers:
  body:
})

功能:发送请求
返回值:一个 Promise,resolve 时回传 Response 对象
参数:
URL: 请求地址。
配置:(包括请求方式,请求参数等等)
method: 请求使用的方法,如 GET、POST。默认是GET
headers: 请求的头信息,形式为 Headers 对象或 ByteString。
body: 请求的 body 信息:可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。

GET方式:

fetch(url?id=001,{method:'GET',})
.then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))

POST方式:

fetch(url,{
		method:"POST",
		headers: new Headers({
		   'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
		}),
	    body: "id=001&name=张三疯" // post请求的参数
	})
.then(response => response.json())
.then(data => console.log(data))
.catch(e => console.log("Oops, error", e))

asyncawait的写法:

try {
     let response = await fetch(url);
     let data = response.json();
     console.log(data);
} catch(e) {
     console.log("Oops, error", e);
}

特点:

  • 语法简洁,更加语义化

  • 基于标准 Promise 实现,支持 async/await

  • 同构方便,使用 isomorphic-fetch

  • Fetch 请求默认是不带 cookie 的,需要设置 fetch(url, {credentials: ‘include’})

  • 服务器返回 400,500 错误码时并不会 reject,只有网络错误这些导致请求不能完成时,fetch 才会被 reject。

axios

概念:

一个基于 promise 的 第三方 库,可以用在浏览器(前端)和 node.js(后端) 中

格式:

Promise axios(配置)

Promise axios({
        url : “地址“ 
		method: “ 提交方式”
		params:{} 地址栏携带的数据(get方式)
		data:{} 非地址栏携带数据(如:post,put等等),
		baseURL:如果url不是绝对地址,那么将会加在其前面。当axios使用相对地址时这个设置非常方便
}).then(res=>{
    console.log(res.data);
})

axios的完整格式,和axios的别名(get和post)

//axios的完整的格式

axios({配置}).then(成功回调(res)).catch(失败回调(res))

//axios的别名:

axios.get(url,{配置}).then(成功回调(res)).catch(失败回调(res))

axios.post(url,data,{配置}).then(成功回调(res)).catch(失败回调(res))

res: 响应体 数据是在res.data里

示例:

get请求:

axios({
        url:'getGoodsListNew.php',
       	 // method:'get',  默认是get请求
        params:{
			count:3
		}
})
.then(res=>this.goodslist=res.data);

post请求示例:

1)、data是字符串

​ 当data是字符串时,请求头里的content-type是 application/x-www-form-urlencoded,network中看到的数据类型是:formData

data 是字符串类型

    axios(
      {
       	 method:'post',
       	 url:'regSave.php', 
         data:'username=jzmdd&userpass=123'
      })
    .then(res=>{  ……………………     });


2)、data是URLSearchParams对象

​ 当data是URLSearchParams对象时(跟data是字符串是一样的),请求头里的content-type是 application/x-www-form-urlencoded,network中看到的数据类型是:formData

  var params = new URLSearchParams();
    params.append('username', 张三疯);  
    params.append('userpass', '123');  

    axios(
      {
       	 method:'post',
       	 url:'regSave.php', 
         data:params
      })
    .then(res=>{  ……………………     });

3)、data是json对象

​ 当data是json对象时,请求头里的content-type是 application/json,network中看到的数据类型是:request payload

axios({
        url:"/vips",
        method:"post",
        data:{
            name:this.name,
            pass:this.pass,
            sex:this.sex
        },
        baseURL:"http://localhost:3000"                
        })
        .then(res=>console.log(res.data))

在google浏览器的network里能够看到传输的数据格式

注意:

使用post方式,在和后端联调时,如果后端接不到数据,需要看network中的

Content-type和数据的格式;

1)、如果data是字符串或者是URLSearchParams

​ content-type:application/x-www-form-urlencoded

​ 数据格式:form data

2)、如果data是json对象(现在:大部分情况会用这个)

​ content-type:application/json

​ 数据格式:request payload

读取php接口get 示例:
axios({
  url: 'http://localhost:80/php7/get.php',
  params: {//地址栏数据
    a: 11,
    b: 22
  }
}).then(
  res => this.list = res.data
)
读取php接口post示例:
let params = new URLSearchParams(); //创建一个url传输的实例
  params.append("a", "1"); //添加一个key/value
  params.append("b", "22"); //添加一个key/value
  // params.delete("a")  删除
  // params.set("a","11");//修改
  // params.has("a")  返回 true/false

axios({
  url: 'http://localhost:80/php7/post.php',
  method: 'POST', 
  // data: {//非地址栏数据 ***
  //   a: 11,
  //   b: 22
  // },
  // data: "a=11&b=22",
  data: params,//URLSearchParams类型
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  } //php 默认要求传递请求头
}).then(
  res => this.list = res.data
)
处理并发

axios.all(iterable)//all函数执行所有的请求
axios.spread(callback)//处理响应回来的回调函数

	function getbooks(){  
	   return axios.get('api/books');
	}
	
	function getreaders(){  
		return axios.get('api/readers'); 
    }
	
	axios.all([axios.get('api/books'),axios.get('api/readers')]).then(
		axios.spread(function (books, readers) { 
			//所有请求完毕后,调用该函数,books是第一个请求的结果,readers是第二个请求的结果
			console.log(books.data);
			console.log(readers.data);
		})
	);
	
	对比一下,发送一个请求和发送多个请求:
	//1)、发送一个请求
	axios.get('api/books').then(books=>books.data);
	//2)、发送两个请求
	axios.all([axios.get('api/books'),axios.get('api/readers')]).then(
		axios.spread(function(books,readers){
			books.data
			readers.data
		});
	);
全局配置
所有axios请求的基础地址:
axios.defaults.baseURL = 'https://api.example.com';
所有post请求的默认content-type的值
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
拦截器

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

请求拦截器

请求拦截器是在请求到达后端之前,可以进行“拦截”(所有请求的全局处理),可以对配置进行修改,如:url,检查并在请求头携带token

axios.interceptors.request.use(function(config){ //config是请求时的配置信息。
	//一、可以修改baseURL
    // config.baseURL = "http://localhost:3000";
  
	//二、可以增加token的携带
	
    // token:是验证身份的。    
    // token的逻辑:    
    
    //1、token什么时候存储的?当登录成功时,后端会产生一个token,发给前端,前端拿到token,
        // 保存在cookie或者localStorage。

    //2、在请求拦截器里,就需要携带token给服务器端。
    
    // 1)、(假定存储在localStorage中)从localStorage中获取token
    let token = localStorage.getItem("token");
    if(token){
        config.headers.authorization = token;
    }
    
    //三、显示loading窗口
    // Loading = true;
    
    return config;
},function(){
    出错
});			
响应拦截器

​ 给返回的数据增加公共信息,或者,根据后端返回的状态码,来决定让用户进行再次登录,也可以改变loading的状态为false

axios.interceptors.response.use(
function (response) {//response参数是响应对象
   
   response.data.unshift({“goodsid”:“商品编号”,“goodsname”:“商品名称”,“goodsprice”:“商品价格”});//给响应的数据增加一个对象
   
   //隐藏loading窗口
   
   return response;
}, function (error) {
	console.log('响应出错')
	return Promise.reject(error)
})
特点:

从浏览器中创建 XMLHttpRequest/从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求数据和响应数据
取消请求 abort
自动转换 JSON 数据
客户端支持防御 CSRF

面试题:

Ajax、jQuery ajax、axios和fetch的区别

1、Ajax:
ajax:最早出现的前后端交互技术,是原生js,核心使用XMLHttpRequest对象,多个请求之间如果有先后关系的话,就会出现回调地狱。

2、Jquery Ajax:
jquery Ajax是原生ajax的封装

3、Fetch:
fetch是ES6新增的,Fetch是基于promise设计的。fetch不是ajax的进一步封装,而是原生js。Fetch函数就是原生js,没有使用XMLHttpRequest对象。

4、axios:
axios是原生ajax的封装,基于promise对象的。Axios也可以在请求和响应阶段进行拦截。它不但可以在客户端使用,也可以在nodejs端使用。

swiper

$nextTick();

什么时候使用$nextTick()

答:当需要操作 ”数据更新影响的(新的)dom时“,就使用$nextTick()。

​ 换种说法:当需要操作dom,而且这个dom是由于数据更新(修改)后引起重新渲染的dom。

https://cn.vuejs.org/v2/guide/reactivity.html 异步更新队列

https://blog.csdn.net/jiang7701037/article/details/95887439 事件循环

特别注意:

n e x t T i c k 跟 是 否 发 送 请 求 没 有 关 系 。 只 要 你 需 要 操 作 d o m 是 由 于 数 据 更 新 的 。 那 就 需 要 使 用 nextTick跟是否发送请求没有关系。只要你需要操作dom是由于数据更新的。那就需要使用 nextTickdom使nextTick();

<template>
  <div>  
    <p>{{msg}}</p>
    <input type="button" value="测试" @click="fn">
  </div>
</template>
<script>

export default {
  name: "Banner",
  data: function () {
    return {
      msg:"hi"
    };
  },
  methods:{
    fn(){
      this.msg = "hello";
      this.$nextTick(()=>{
           console.log(p标签的innerHTML);
      });
    }
  }
};
</script>

路由

一、路由的作用

vue的路由使用在SPA应用中的组件跳转,相当于多页面的 a标签。官网

二、路由的基本使用

1、引入js文件的方式
1)、引入vue-router.js文件
<script src="js/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
2)、定义若干个组件(为了跳转用)
let goodlist = {
   template:"<div>商品列表</div>"
}

let goodsdetail = {
   template:"<div>商品详情</div>"
}
3)、定义路由对象

3.1)路由配置(json数组)

let routes = [
	{path:'/goodslist',component:goodlist},
	{path:'/goodsdetail',component:goodsdetail}
];

3.2)、实例化一个vueRouter对象

let router = new VueRouter({
	   routes:routes
});
4)、挂载vueRouter对象

实例化vue对象,(把vueRouter对象,挂载(注册)到vue对象里)

let vm = new Vue({
    el:"#app",
    router
});
5)、跳转代码(声明式)
  <h1>路由跳转</h1>
  <hr/>
  <router-link to='/goodslist'>商品列表</router-link>
  <router-link to='/goodsdetail'>商品详情</router-link>
  <hr/>
  <router-view></router-view>

解释:

: 超链, 相当于标签a 。

: 组件显示的位置。

2、模块化的方式(脚手架里)

脚手架安装时,会默认安装vue-router。

1)、安装
npm i vue-router -S--save的缩写)
2)、定义组件(单文件组件)

如:HelloWorld.vue 、 Home.vue

3)、创建vueRouter对象,并做路由配置和引入

3.1)、创建vueRouter对象(定义路由对象,配置路由)

// src/router/index.js

import Vue from 'vue'

//1. 引入路由包
import Router from 'vue-router'

//2. 安装插件包到Vue上, 
Vue.use(Router)

//3. 路由配置
let routes = [
  {
      path: '/', 
      component: HelloWorld
  },
  {
      path: '/home',
   	  component: Home
  }, //route  一条路由的配置
]

//4.路由实例
let router = new Router({ //插件路由对象
  // routes:routes
  routes,
});

//5.导出路由实例,让它去控制vue根
export default router

3.2)、在main.js中引入vueRouter对象,并植入到根属性

// src/main.js
import router from './router/index';

new Vue({
  el: '#app',
  router, //植入根属性,在组件里就可以使用 this.$router
  ………………
})
4)、跳转
4.1)、声明式跳转
//1、路径使用字符串
<router-link to="/home">声明式跳转</router-link>
<router-link to="/home" tag='li' active-class='类名' >声明式跳转</router-link>

//2、路径使用对象
<router-link :to="{path:'/home'}">声明式跳转</router-link>

router-link 组件属性:

​ to:跳转的路径

​ tag=‘li’ 指定编译后的标签,默认是 a 标签。

​ active-class=‘类名’ 指定激活后的样式 模糊匹配

​ exact-active-class=‘类名’ 指定激活后的样式 严格匹配

4.2)编程式跳转(编程式导航)

**1)、this.$router.push(字符串/对象):**添加一个路由 (记录到历史记录)

// 字符串
$router.push('/home')

// 对象
$router.push({ path: '/home' })

** r o u t e r : ∗ ∗ 表 示 v u e R o u t e r 对 象 , 由 于 我 们 在 v u e 对 象 里 把 v u e R o u t e r 对 象 植 入 到 根 属 性 里 , 所 以 , 在 组 件 内 部 是 可 以 使 用 router:**表示vueRouter对象,由于我们在vue对象里把vueRouter对象植入到根属性里,所以,在组件内部是可以使用 routervueRoutervuevueRouter使router拿到该对象的。

2)、this.$router.replace({name:‘…’}) //替换一个路由 (不记录到历史记录)

3)、this.$router.go(-1|1)|back()|forward() //回退/前进

5)、展示
<router-view>展示区</router-view>

三、动态路由匹配

1、路由传参

路由配置

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头,相当于在path里声明了一个变量 id
    { 
        path: '/user/:id', 
        component: User 
    }
  ]
})

跳转

//匹配上 '/user/:id' 路径,01001的值会赋给id
<router-link to="/user/01001">用户01001的信息</router-link>
<router-link to="/user/01002">用户01002的信息</router-link>

组件中获取id的值

 模板里的写法:
 $route.params.id 
 
 脚本里的写法:
 this.$route.params.id
r o u t e r 和 router和 routerroute

** r o u t e r : ∗ ∗ 表 示 v u e R o u t e r 对 象 , 由 于 我 们 在 v u e 对 象 里 把 v u e R o u t e r 对 象 植 入 到 根 属 性 里 , 所 以 , 在 组 件 内 部 是 可 以 使 用 router:**表示vueRouter对象,由于我们在vue对象里把vueRouter对象植入到根属性里,所以,在组件内部是可以使用 routervueRoutervuevueRouter使router拿到该对象的。

**$route:**表示匹配到的当前路由对象,可以简单粗暴的理解为,路由配置中的某个json对象。当然,这个对象里的信息比路由配置的更多。

2、捕获所有路由或 404 Not found 路由

1)、通配符 *

{ 
    path:'*'  会匹配所有路径,即:所有的路径都会跳到当前对应组件
    component:
}

{
    path:'/user-*'  会匹配以 `/user-` 开头的任意路径
	component:
}


注意:路由匹配的顺序是按照路由配置的顺序进行的,所以,你肯定不能把 * 的路径放在最前面,否则,后面的路由配置都不起作用了。

当使用一个通配符时,$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分。

如:

路由配置:

{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

路由跳转:

this.$router.push('/user-admin')

组件里:

this.$route.params.pathMatch // 'admin'

404

{
  path: '*',
  component: NoPage组件
}

四、命名路由

给路由起个名字,就可以使用名字来指定路由

1、路由配置

const router = new VueRouter({
  routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]
})

2、跳转

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

五、重定向

redirect:

{
  path: '/',  //默认页
  redirect: '/home' //配置型跳转
}, 

路由传参:

一、params

1、传:

1)、动态路由匹配(路由配置里写)

{ 
    name:"user",
    path: '/user/:id', 
    component: User
}   //id:相当于声明了变量

2)、跳转时传参

1)、跳转时,使用字符串
//声明式
<router-link to="/user/01001">用户01001的信息</router-link>
//编程式
this.$router.push("/user/01001");

2)、跳转时,使用对象
//声明式: 命名的路由,同时传参
<router-link :to="{ name: 'user', params: { id: '01001' }}">User</router-link>
//编程式:
this.$router.push({ name: 'user', params: { id: '01001' }})

2、接:

 //模板里的写法:
 $route.params.参数名
 
 //脚本里的写法:
 this.$route.params.参数名
二、query

1、传:

1)、路由配置不用改(不用动态路由匹配)

{ path: '/user', component: User }

2)、跳转时,使用 path

//1)、跳转时,使用字符串
//声明式: 
<router-link to="/Reg?userid=007&username=mjl">User</router-link>
//编程式:
this.$router.push("/Reg?userid=007&username=mjl");


//跳转时,使用对象:
//声明式: 
<router-link :to="{ path: '/user', query: { id: '01001' }}">User</router-link>
//编程式:
$router.push({ path: '/user', query: { id: '01001' }})

注意:如果提供了 path,那么params 会被忽略
// 带查询参数,变成 /user?id=01001

params和query的对象写法的区别:

name 对应params

path对应query

2、接

 //模板里的写法:
 $route.query.参数名
 
 //脚本里的写法:
 this.$route.query.参数名

使用场景的区别:

query:传递多个参数时,query方式对应的地址栏上好阅读。

params:传递一个参数时,比较方便

六、路由传参和props

​ 一个组件在项目中,有两种使用方式,或者说,组件要在浏览器中显示,有两种方式:

​ 1、标签的方式,外部给组件传数据,用props

​ 2、使用路由跳转的方式,外部给组件传数据,用params或者query。

​ 如果, 一个组件需要从外部传入数据, 并且在项目中,这两种方式的使用都会出现,那么,在组件内部就需要适应这两种情况。

如何使用 props 属性将 组件和路由解耦

props 被设置为 trueroute.params 将会被设置为组件属性。

路由配置:

{ 
    path: '/user/:id',
    component: User,
    props: true 
},

组件:

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}

七、嵌套路由

子路由嵌套

1、路由配置

// src/router/index.js

const router = new VueRouter({
  routes: [
    { 
        path: '/user/:id',
        component: User,
        children: [
       		 {
          		// 当 /user/:id/profile 匹配成功,
          		// UserProfile 会被渲染在 User 的 <router-view> 中
          		path: 'profile',
          		component: UserProfile //子组件UserProfile显示在父组件User里的<router-view>
        	},
        	{
          		// 当 /user/:id/posts 匹配成功
          		// UserPosts 会被渲染在 User 的 <router-view> 中
          		path: 'posts',
          		component: UserPosts//子组件UserPosts显示在父组件User里的<router-view>
        	}
      	]
    }
  ]
})

后台管理系统里,经常要使用子路由嵌套

2、组件的展示:

​ 子组件会展示在父组件里的 的位置。

八、路由模式

路由模式分为两种:hash和history。

区别(面试题):

1)、外观上

hash模式时,路径上有#。

history模式时,路径上没有#。

2)、跟后端有关的区别

hash模式不会给后端发请求

history模式会给后端发请求,需要后端配合。要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。否则,就会返回404。如果后端有同名的url,那么就会找后端的url。

// src/router/index.js

let router = new VueRouter({ //插件路由对象
   routes,
   // mode:'hash'//哈希模式   location.href
   mode:'history'//历史记录   history.pushState
});

九、扩展

路由守卫

全局守卫

// src/router/index.js

//前置钩子
router.beforeEach((to, from, next) => {
  
  //	to: 目标路由
  //	from: 当前路由
  
  // next() 跳转  一定要调用
  next(false);//不让走
  next(true);//继续前行
  next('/login')//走哪
  next({path:'/detail/2',params:{},query:{}})//带点货
  
  // 守卫业务
  if(to.path=='/login' || to.path=='/reg' ){    
    next(true)
  }else{
      //是否登录的判断
      if(没有登录过){
          next('/login');
       }else{
          next(true);
       }
  }
})

//后置
router.afterEach((to,from)=>{
  //全局后置守卫业务
})

//过程:
1、请求一个路径:如:/Index
2、经历前置守卫(路由配置前)
   决定了能去哪个路径
3、根据去的路径,找对应component(路由配置)
4、经过后置守卫(路由配置后)
5、创建组件

路由独享守卫(只有前置)

// src/router/index.js
{
  path: '/user',
  component: User,
  //路由独享守卫
  beforeEnter: (to,from,next)=>{ //路由独享守卫 前置 
    console.log('路由独享守卫');
    if(Math.random()<.5){
      next()
    }else{
      next('/login')
    }
  }
 }

独享,没有后置

组件内部守卫

//在组件内部写:

//组件内部钩子
beforeRouteEnter (to, from, next) {//前置
  // 不!能!获取组件实例 `this`
  // 因为当守卫执行前,组件实例还没被创建
  // 虽然,这个函数的代码,在组件的内部写着,但是,它编译后,并不隶属于当前组件。
},
    
beforeRouteUpdate (to, from, next) {
  // 在当前路径改变,但是该组件被复用时调用
  // 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
  // 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
  // 可以访问组件实例 `this`
},
    
beforeRouteLeave (to, from, next) {//后置
  // 导航离开该组件的对应路由时调用
  // 可以访问组件实例 `this`
}

注意:

路由独享守卫,守的是path

组件内部守卫,守的是component

路由元信息

定义路由的时候配置 meta 字段

//src/plugins/router.js
{
  path: '/home',
  component: Home,
  meta: { 
      requiresAuth: true 
  }
}

访问 meta 字段

this.$route.meta
to.meta
路由懒加载

​ 当打包构建应用时,JavaScript 包会变得非常大,影响页面(特别是首次)加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。

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

转场效果:transition

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

第三方动画库( V3.5.2——CSS3动画库 )的地址:

​ 官网: https://www.jq22.com/yanshi819

​ CDN: https://cdn.jsdelivr.net/npm/animate.css@3.5.1

状态(数据)管理(VueX)

官网

大型项目中使用,不是必须的,但是,咱们在学习阶段,在项目中一定要用。

抛出一个问题

​ vue单页面应用中,每个组件内部的数据在data中存放,供vue组件内部使用,但是,vue组件之间的数据共享怎么办?即A组件要使用B组件里的数据怎么办?

传统的处理方案:父子组件传值、平行组件在跳转时,利用url,路由里的传值等等。

传统处理方案的问题:

1、兄弟组件传值:

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

缺点:
1、数据传递复杂,容易出错
2、浪费内存

2)、平行组件,无关组件

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

缺点:
1、数据传递复杂,容易出错
2、浪费内存

解决方案(vueX)

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

vueX的作用

1、vuex能够保存全局数据,供整个应用使用

2、vuex保存的数据是响应式的

3、vuex保存的数据可以跟踪状态的变化

vueX的核心概念(创建vueX.store对象里的配置项):

state : 数据仓库 ,存储所有的 共享数据 ,相当于vue组件里的data
Getter : 在state的基础上 派生的数据, 相当于vue组件里 computed
Mutation:修改state的数据时,用mutation,这与跟踪状态 有关系,只能有同步代码
Action:解决mutation里只能有同步代码的问题,action里可以有异步代码

modules:模块化

vueX的数据流转

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

vueX的基本使用步骤

1)、安装

npm安装vueX:  npm install vuex –save

2)、创建 vueX.store 对象

./src/store/index.js

import Vue  from 'vue'
//引入vueX
import Vuex from 'vuex'
//把vueX安装到Vue里
Vue.use(Vuex)

export default new Vuex.Store({
    state:{
          id: '01'
    },
    getters:{},
    mutations:{},
    actions:{}
})

3)、把vueX.store对象植入到vue的根属性

./src/main.js

import store from './store'

new Vue({
  	el: '#app',
  	store,//把store对象植入到vue的根属性,在vue组件里就可以使用 this.$store拿到vueX.store对象
    router
  		……………………	
})

4)、组件里获取数据:

//模板里:
$store.state.id
//脚本里
this.$store.state.id

5)、组件里保存数据

this.$store.state.id = '02' //这个方式虽然可以,但是不推荐,因为,它不能跟踪状态。推荐,强烈推荐(必须)使用mutation来修改数据。

vueX的核心概念详解:

state:

数据仓库 ,存储所有的 共享数据 ,相当于vue组件里的data,是一个单一状态树

使用:
在组件中使用:this.$store.state.属性名。

export default new VueX.Store({
    state:{
        age:12,
        isAdult:"未成年",
        isAllowMarry:false
    }
    …………………………
});

组件里获取:

{{$store.state.age}}
{{$store.state.isAdult}}
{{$store.state.isAllowMarry?"可以结婚了":"不要着急,再等等"}}

Getter : 在state的基础上 派生的数据, 相当于vue组件里 computed


export default new VueX.Store({
    state:{
        age:12,
        isAdult:"未成年",
        isAllowMarry:false
    },
    getters:{
       // state:就是仓库的state,不用程序员处理,vuex已经处理好了 
        ageChina:function(state){
            let shi = parseInt(state.age/10); //1
            let ge = state.age%10;//2
            let str = "";
            switch(shi){
                case 1:str='一';break;
                case 2:str='二';break;
            }
            str+='十'
            switch(ge){
                case 1:str+='一';break;
                case 2:str+='二';break;
                case 3:str+='三';break;
                case 4:str+='四';break;
                case 5:str+='五';break;
                case 6:str+='六';break;
                case 7:str+='七';break;
                case 8:str+='八';break;
                case 9:str+='九';break;
            }
            return str+'岁';
        }
    },
    …………………………
});

组件里获取

{{$store.getters.ageChina}}
Mutation:

​ 修改state的数据时,用mutation,这与跟踪状态 有关系。换句话说,在vuex中,对mutation的定义(定位)是:修改状态的,即:在mutation提交的前后,状态应该是不一样的。当然了,也会在vue的dev-tools工具中看到跟踪状态的效果。

在vuex中,强烈建议(必须)使用mutation改变state中的值。可以在vuex对象中使用严格模式来检测:
const store = new Vuex.Store({ strict: true })


export default new VueX.Store({
    state:{
        age:12,
        isAdult:"未成年",
        isAllowMarry:false
    },
    getters:{
        ageChina:function(state){
            let shi = parseInt(state.age/10); //1
            let ge = state.age%10;//2
            let str = "";
            switch(shi){
                case 1:str='一';break;
                case 2:str='二';break;
            }
            str+='十'
            switch(ge){
                case 1:str+='一';break;
                case 2:str+='二';break;
                case 3:str+='三';break;
                case 4:str+='四';break;
                case 5:str+='五';break;
                case 6:str+='六';break;
                case 7:str+='七';break;
                case 8:str+='八';break;
                case 9:str+='九';break;
            }
            return str+'岁';
        }
    },
    // mutations:是跟踪状态。这里面只能有同步代码,这是必须的。
    mutations:{
    //    incAge(state,num){
    //        state.age+=num;
        //state:就是store对象里的state,不用程序员传入
        //payload:就是形参,叫作载荷
        incAge(state,payload){
            
            state.age+=payload.num;
            
           if(state.age>=18){
              state.isAdult = "已成年";
           }else{
              state.isAdult = "未成年";
           }
           if(state.age>=22){
               state.isAllowMarry = true;
           }else{
               state.isAllowMarry = false;
           }
       }
    },
   …………………………………………
});

提交mutation

//组件里提交
this.$store.commit('incAge',num);

//action提交
incAge(context,num){
     context.commit('incAge',num);
}
Action:

解决mutation里只能有同步代码的问题,action里可以有异步代码

​ Action 类似于 mutation,不同在于:
​ Action 提交的是 mutation,而不是直接变更状态。
​ Action 可以包含任意异步操作。


export default new VueX.Store({
    state:{
        age:12,
        isAdult:"未成年",
        isAllowMarry:false
    },
    getters:{
        ageChina:state=>{
            let shi = parseInt(state.age/10); //1
            let ge = state.age%10;//2
            let str = "";
            switch(shi){
                case 1:str='一';break;
                case 2:str='二';break;
            }
            str+='十'
            switch(ge){
                case 1:str+='一';break;
                case 2:str+='二';break;
                case 3:str+='三';break;
                case 4:str+='四';break;
                case 5:str+='五';break;
            }
            return str+'岁';
        }
    },
    // mutations:是跟踪状态。这里面只能有同步代码,这是必须的。
    mutations:{
    //    incAge(state,num){
    //        state.age+=num;
        incAge(state,payload){
            state.age+=payload.num;
           if(state.age>=18){
              state.isAdult = "已成年";
           }else{
              state.isAdult = "未成年";
           }
           if(state.age>=22){
               state.isAllowMarry = true;
           }else{
               state.isAllowMarry = false;
           }
       }
    },
    // 如果出现异步操作,就需要使用action,action不是必须的。
    actions:{
    //    incAge(context,num){
    //        context.commit('incAge',num);
    //    }
        // incAge(context,payload){
        //     context.commit('incAge',payload);
        // }
        //context:是store对象
        incAge(context,payload){
            // context.commit('incAge',payload);
            context.commit(payload);
        }
    }
});

Action和mutation的区别
在代码的角度上,action是来提交mutation的
在用途(意义)上:区分 actions 和 mutations 并不是为了解决竞态问题,而是为了能用 devtools 追踪状态变化。 vuex 真正限制你的只有 mutation 必须是同步的这一点。
当然actions可以包含任何异步操作,如果程序员自己想处理异步操作,也可以不使用actions。

补充:

​ vuex推荐:在派发action和 提交mutation时,参数使用对象的方式

//一、组件里派发action的代码 
 this.$store.dispatch({
     type:"incAge", //incAge  是action的名字
     username:"haha", 
     userpass:"123"
 });


//二、vuex里的代码:

//1、action的定义
actions:{
        incAge(context,payload){
            console.log("payload",payload);
            axios({
                url:"/inc",
                params:payload
            })
            .then(res=>{
                context.commit({
                    type:"incAge1", //mutation的名字
                    count:res.data.count
                });

            });
        }
    }
//2、mutation的定义:
  mutations:{        
        incAge1(state,payload){
            state.age+= payload.count;
            if(state.age>=18){
                state.isAdult = "已成年"
            }else{
                state.isAdult = "未成年"
            }
        }
    },

示例:loading

1、vuex中:

在vuex中定义一个全局的属性:isLoading,来控制loading图片的显示和隐藏

state:{
        isLoading:false,
}
        
 mutations:{
     changeLoading(state,payload){
          state.isLoading = payload.isLoading
     },
}

2、在App.vue

<van-loading class="loading" type="spinner" color="#1989fa" 
      v-show="isLoading" />

          
<script>

import {mapState} from "vuex";

export default {
  name: 'App',
  computed:{
    ...mapState(["isLoading"]),
  }
}
</script>  


<style scoped>

.van-loading__spinner{
  position: fixed;
  left:0;
  top:0;
  right: 0;
  bottom: 0;
  margin:auto;
}

</style>

3、在请求拦截器和响应拦截器里

import store from "../store";

// 请求拦截器:请求的全局工作,发生在到达后端之前
axios.interceptors.request.use(function(config){

    // 处理loading (把loading显示)
    store.commit({
        type:"changeLoading",
        isLoading:true
    });

    return config;
});


// 响应拦截器:响应全局工作,发生,后端响应完毕。在axios请求进入到then的回调函数之前
axios.interceptors.response.use(function(res){    
    // 处理loading(把loading隐藏)
    store.commit({
        type:"changeLoading",
        isLoading:false
    });
    return res;

});
Modules

当项目比较大时,所有的全局数据存放在state里,会非常混乱,怎么办?使用module,把数据分门别类的进行处理,即:模块化。
每个模块是一个独立的store。然后由总体的store引入所有的分模块store。

如下:

两个模块分别管理不同类型的数据:

./src/store/moduleA.js

export default {
	state: {count:1}, 
    mutations: { ... }, 
    actions: { 
         incCount(context){
            console.log("moduleA的action");
            setTimeout(()=>{
                context.commit("incCount");
            },2000);
        }
    }, 
    getters: { ... } 
}
                                                   
./src/store/moduleB.js
export default {
	state: {count:2}, 
    mutations: { ... }, 
    actions: { 
         incCount(context){
            console.log("moduleB的action");
            setTimeout(()=>{
                context.commit("incCount");
            },2000);
        }
    }, 
    getters: { ... } 
}

在总的store里包含所有的模块:

./src/store/index.js

import Vue from "vue";
import vueX from "vuex";
import moduleA from "./moduleA";
import moduleB from "./moduleB";

Vue.use(vueX);

export default new vueX.Store({
    modules:{
        moduleA:moduleA,
        moduleB:moduleB
    }
    //简写:
    modules:{
        moduleA,moduleB
    }
});

组件里使用数据时,多加个模块名即可,如:

$store.state.moduleA.count // -> moduleA 的状态
$store.state.moduleB.count // -> moduleB 的状态

组件里派发action(或者提交mutation)时,如果,直接写action(mutation)的名字,那么就会找到所有同名的action(mutation)。

//如:
//在组件内容,派发action
this.$store.dispatch({
          type:"incCount"
        });
那么就会,派发给moduleA和moduleB里的incCount。即:moduleA和moduleB里的incCount都被执行了。如果不希望这样,那就用命名空间

模块(Module)里的命名空间(namespaced:true)。

默认情况下,模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

如果希望你的模块具有更高的封装度和复用性,你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后,它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

1)、模块定义时,加上namespaced:true

export default {
    namespaced:true,
    state:{
        count:1
    },
    mutations:{
       ……………………
    },
    actions:{        
        incCount(context){
            console.log("moduleA的action");
            setTimeout(()=>{
                context.commit("incCount");
            },2000);
        }
    }
}

2)、组件里派发action时,加上模块名

this.$store.dispatch('moduleA/incCount');

**酌情扩展 **

mapState, mapGetters,mapMutations, mapActions

https://vuex.vuejs.org/zh/guide/state.html

1、mapState:

​ 当一个组件需要获取多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性,让你少按几次键:

//1、vueX
export default new vueX.Store({
   state:{
       count:10
   }
})

//2、组件里
import { mapState } from "vuex";

export default {
  name: "Store01",
  data() {
    return {};
  },
  //1)、把vueX中的state用计算属性,很麻烦
//   computed:{
//       count(){
//           return this.$store.state.count
//       }
//  },
//  2)、使用mapState(不能再写其它计算属性)
//   computed: mapState({
//     // 箭头函数可使代码更简练
//     count: state => state.count,
//   }),
//  3)、使用mapState继续简写(不能再写其它计算属性)
//   computed: mapState(['count']),
//  4)、使用mapState,这样写
    computed:{        
        ...mapState(['count']),
        a:function(){
            return 250;
        },
    }
};

2、mapGetters

​ 在computed里映射

computed: {
    ...mapState(["count", "age", "isAdult"]),
    ...mapGetters(["ageChina"]),

  },

3、mapMutations和mapActions

​ 在methods里映射

 methods: {
    ...mapMutations(["incAge1"]),
    ...mapActions(["incAge"]),
 }

反向代理

在前后端分离开发的场景,前端有个服务器(提供页面)。后端也有个服务器(提供接口)。

1、开发环境,前端要连后端的接口,就会出现跨域问题。

2、生产(发布)环境:

​ 1)、如果还是前后端分离(在不同的服务器上)。依然有跨域问题(nginx)

​ 2)、如果前后端代码在一起(一个服务器),不存在跨域问题

跨域的解决方案:

1)、jsonp

2)、CORS(后端配合) :cross origin resource sharing 后端解决跨域的方案

​ php 中,这么写:header(“Access-Control-Allow-Origin:*”);

3)、反向代理(前端webpack的devServer)

反向代理

一、为啥要叫反向代理

正向代理隐藏真实客户端,反向代理隐藏真实服务端,让浏览器依然是同源。

二、反向代理解决的问题
就是跨域,在前后端联调的情况下,前端有服务器,后端也有服务器,那么联调时,就存在跨域问题

三、反向代理的原理
通过伪造请求使得http请求为同源的,然后将同源的请求发送到反向代理服务器上,由反向代理服务器去请求真正的url,这样就绕过直接请求真正的url导致跨域问题。

四、vue-cli2.x里反向代理使用步骤和配置

1、安装axios与http-proxy-middleware(vue-cli中默认已经安装)

2、在config/index.js中的dev中配置

3、在dev配置对象中找到proxyTable:{ }

4、添加如下配置(把对“/api”开头的访问转换成对 http://www.itzhihu.cn的访问):

​ proxyTable: {
​ ‘/api’: { // 要替换的地址,在本地新建一个/api的访问路径 。
​ target: ‘http://www.itzhihu.cn’, // 替换成啥,要访问的接口域名 。
​ changeOrigin: true, // 是否跨域
pathRewrite: {
​ ‘^/api’: ‘’ //重写接口,去掉/api, 在代理过程中是否替换掉/api/路径
​ }
}
​ }

这样以后访问以“/api”开头的地址都会转向http://www.itzhihu.cn的访问

五、图示

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

六、vue-cli3+配置反向代理

1.打开(新建)项目根/vue.config.js

​ 写上如下代码:

module.exports = {
  devServer:{
    //设置代理
    proxy: { //代理是从指定的target后面开始匹配的,不是任意位置;配置pathRewrite可以做替换
      '/api': { //axios访问 /api ==  target + /api
             target: 'http://localhost:3001',
       		 changeOrigin: true, //创建虚拟服务器 
             pathRewrite: {
                '^/api': ''    //重写接口,去掉/api, 在代理过程中是否替换掉/api/路径 
     		 }
      	}
      }
   }
}

注意:

1、修改完 vue.config.js文件后,必须要重启服务器

2、如果你复制了笔记上的代码,而且出现问题,那么,删掉看不见的中文空格和注释。

postman

跟后端联调项目

一、联调前:保证前后端各自没有问题

1.后端用postman测试一下(跟接口文档一致)

2.前端连接的jsonserver,(跟接口文档一致)

目的:说明前后端的程序逻辑没有问题。

二、前后端的计算机连在同一个局域网(能够连上)

可以在cmd 里,用命令 ping 对方的ip地址,来测试是否在同一个局域网里。

ping 后端的ip地址

目的:保证前后端能够连通

三、前端通过postman测试接口(这一步很重要)

切记,切记:前端先用postman测试接口,如果响应的数据没有问题(能够返回数据,并且返回的数据格式跟接口文档一致),说明,和后端的链接没有问题,也能看出后端给的数据格式是否正确,前后端是否都根据接口进行了开发。

注意:前后端的content-type是否一致。

目的:验证后端的程序有没有问题。

四、跨域

1)、前端解决跨域(反向代理)

Vue-cli2.X:

把config/index.js中的反向代理改一下:

把target改成后端的ip地址和端口号

proxyTable: {

​ ‘/api’: { //所有“/api”开头的请求都会进行代理(转)

​ target: ‘http://10.35.167.126:8080’, //所有“/api”开头的请求都会转到 http://10.35.167.126:8080

​ changeOrigin: true,

​ pathRewrite: {

​ ‘^/api’: ‘’ // 去掉"/api"

​ }

​ }

}

Vue-cli3/4

1.打开(新建)项目/vue.config.js

​ 写上如下代码:

module.exports = {
  devServer:{
    //设置代理
    proxy: { //代理是从指定的target后面开始匹配的,不是任意位置;配置pathRewrite可以做替换
      '/api': { //axios访问 /api ==  target + /api
       		 target: 'http://localhost:3001',
       		 changeOrigin: true, //创建虚拟服务器 
          	pathRewrite: {
        			 	 '^/api': ''    //重写接口,去掉/api, 在代理过程中是否替换掉/api/路径 
     		}
      	}
      }
   }
}

注意:一旦修改了配置(vue.config.js),必须重启服务器(npm run serve)

2)、后端解决跨域(cors)

四、发送请求,获取数据

​ 测试功能

五、如果跟后端的交互还有问题,需要查看network:

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

移动端事件

1、click事件

Click:单击事件
类似于PC端的click,移动端也有click,在移动端中,连续click的触发有200ms ~ 300ms的延迟

为什么移动端不用click
移动端的click有300ms延迟的问题,在移动端浏览器中,连续两次点击是缩放操作,所以在用户点击屏幕后,浏览器会检查在300ms内是否有另一次点击,如果没有才触发click事件。因为有延迟,所以不使用。

2、touch类事件

触摸事件,有touchstart、touchmove、touchend、touchcancel 四种

touchstart:手指触摸到屏幕会触发
touchmove:当手指在屏幕上移动时,会触发
touchend:当手指离开屏幕时,会触发
touchcancel:可由系统进行的触发,比如手指触摸屏幕的时候,突然alert了一下,或者系统中其他打断了touch的行为,则可以触发该事件
onorientationchange: 屏幕旋转事件

示例:

<div id="box">
</div>


window.onload = function () {
	
	//setInterval(()=>{alert("弹出东西了");},2000);
	
	document.getElementById("box").onclick = function(){
		//click有延迟300毫秒的情况,所以,先触发的是ontouchstart.
		//如果在300毫秒内不放开,则不触发click事件,只触发touchend事件
		//如果在300毫秒内放开了,就会触发click事件.
		this.innerHTML +="onclick:点击了<br/>";
	}
	document.getElementById("box").ontouchstart  = function(){
		this.innerHTML +="ontouchstart<br/>";//手指触摸到屏幕
	}
	document.getElementById("box").ontouchend    = function(){
		this.innerHTML +="ontouchend<br/>";//手指离开屏幕
	}
	document.getElementById("box").ontouchmove    = function(){
		this.innerHTML +="ontouchmove<br/>";//手指在屏幕上移动
	}    
    
	document.getElementById("box").ontouchcancel    = function(){
		console.log("touchcancel");//当两秒钟后弹出alert 后,touchcancel就被触发了。这个不常用
	}}

3、touch的优先级高于click

1)、如果touch的持续时间在300ms以上,就不会触发click事件

当你在红盒子里,按下300ms以上,再放开时,不触发click事件

​ 触发顺序: touchstart,touchend

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

2)、当你在红盒子里,按下不超过300ms,再放开时,触发顺序是:

​ 触发顺序: touchstart,touchend,click。

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

3)、如果手指在屏幕上移动了,就不会触发click事件。

当你在红盒子里,按下,并移动,再放开,就算不超过300ms的时间,
也不会触发click事件,因为,移动时,就不触发click事件了
(移动事件的优先级高于click)。

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

4、 阻止click事件的触发

我们在开发移动端时,肯定只希望触发touch类型的事件,所以,如何阻止click事件的触发。

​ 由于:当用户在点击屏幕的时候,系统会触发touch事件和click事件,touch事件优先级高,touch事件触发完毕后, 才会去触发click事件.

​ 所以:在touch事件里使用event.preventDefault()就可以阻止click事件的触发

示例:

	document.getElementById("box").ontouchstart  = function(event){
		this.innerHTML +="ontouchstart<br/>";//手指触摸到屏幕
		event.preventDefault();
	}

    document.getElementById("box").onclick = function(){
		this.innerHTML +="onclick:点击了<br/>";
	}

5、点透(面试题)

什么是点透
1、A 和 B两个html元素不是后代和继承关系(如果是后代继承关系的话,就直接是冒泡了), A的z-index大于B,把A显示在B之上
2、A元素绑定touch事件, 在touch事件处理函数里,让A立即消失,
3、B元素绑定click事件

示例:

<style type="text/css">
      #boxparent{
          position: relative;
      }
      #box1 {
        position: absolute;
        z-index: 1;
        background: red;
        width: 100px;
        height: 100px;
      }
      #box2{
        background: green;
        width: 200px;
        height: 200px;
      }
    </style>

    <div id="boxparent">
      <div id="box1">
      </div>
      <div id="box2">
      </div> 
    </div>

  <script type="text/javascript">
    var box1 = document.getElementById("box1");
    var box2 = document.getElementById("box2");
    box1.ontouchstart=function(e) {
       box1.style.display = 'none';
    };
    box2.onclick = function() {
      console.log('box2被点了');
    }
  </script>

为什么会这样?

​ 当用户在box1元素上触摸屏幕时,先触发box1元素的touch事件,然后隐藏了box1,当click(延迟200-300ms)触发时,发现没有box1了,只有box2,所以,就触发了box2元素的click事件。

点透和冒泡的区别:

冒泡:是元素之间存在父子关系。
点透:元素之间没有父子关系(叠放关系),只是由于click在移动端里有200-300ms的延时造成的。

6、第三方的移动端事件库

1)、zepto.js

​ Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jquery有着类似的api。 如果你会用jquery,那么你也会用zepto。针对移动端开发的JavaScript库(不仅仅只是事件库)

  • tap — 元素 tap 的时候触发。(叩击)

  • singleTap and doubleTap — 这一对事件可以用来检测元素上的单击和双击。(如果你不需要检测单击、双击,使用 tap 代替)。

  • longTap — 当一个元素被按住超过750ms触发。

  • swipe, swipeLeft, swipeRight, swipeUp, swipeDown — 当元素被划过时触发。(可选择给定的方向)

示例:

	<div id="box">

    </div>
    
     $("#box").on("tap", function () {
        $('#box').append('<li>tap:单击屏幕</li>');
    });

    $("#box").on("singleTap", function () {
        $('#box').append('<li>singleTap:单击屏幕</li>');
    });

    $("#box").on("doubleTap", function () {
        $('#box').append('<li>双击屏幕</li>');
    });

    $("#box").on("longTap", function () {
        $('#box').append('<li>长安屏幕750ms</li>');
    });

    $("#box").on("swipe", function () {
        $('#box').append('<li>划过屏幕</li>');
    });


    $("#box").on("swipeLeft", function () {
        $('#box').append('<li>划过屏幕(左)</li>');
    });
    

    $("#box").on("swipeRight", function () {
        $('#box').append('<li>划过屏幕(右)</li>');
    });

    
    $("#box").on("swipeUp", function () {
        $('#box').append('<li>划过屏幕(上)</li>');
    });
    
    $("#box").on("swipeDown", function () {
        $('#box').append('<li>划过屏幕(下)</li>');
    });

</script>
2)、touch.js
介绍:

touch.js 是百度开发的一款插件,针对移动端应用的事件插件

绑定事件

touch.on( element, types, callback );
功能描述:事件绑定方法,根据参数区分事件绑定和事件代理。

解除事件绑定

touch.off( element, types, callback )

参数类型描述
elementelement或string元素对象、选择器
typesstring事件的类型(多为手势事件),多个事件用空格分开
callbackfunction事件处理函数,移除函数与绑定函数必须为同一引用;
事件类型

缩放:

事件名描述
pinchstart缩放手势起点
pinchend缩放手势终点
pinch缩放手势
pinchin收缩
pinchout放大

旋转

描述
rotateleft向左旋转
rotateright向右旋转
rotate旋转

滑动

参数描述
swipestart滑动手势起点
swiping滑动中
swipeend滑动手势终点
swipeleft向左滑动
swiperight向右滑动
swipeup向上滑动
swipedown向下滑动
swipe滑动

拖动

dragstart拖动屏幕起始
drag拖动屏幕中
dragend拖动屏幕结束

按键

hold长按屏幕
tap单击屏幕
doubletap双击屏幕

示例:

<div id="box">
</div>

<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/touchjs/0.2.14/touch.js"></script>
<script type="text/javascript">
    touch.on("#box", 'tap',  function () {
       console.log("tap");
    });

    touch.on("#box", 'swipestart',  function () {
       console.log("swipestart");
    });

</script>
touch的配置

touch.config(config)

config为一个对象

{
tap: true, //tap类事件开关, 默认为true
doubleTap: true, //doubleTap事件开关, 默认为true
hold: true, //hold事件开关, 默认为true
holdTime: 650, //hold时间长度
swipe: true, //swipe事件开关
swipeTime: 300, //触发swipe事件的最大时长
swipeMinDistance: 18, //swipe移动最小距离
swipeFactor: 5, //加速因子, 值越大变化速率越快
drag: true, //drag事件开关
pinch: true, //pinch类事件开关
}

事件代理格式

1)、事件代理绑定
touch.on( delegateElement, types, selector, callback );
2)、解除事件代理绑定
touch.off( delegateElement, types, selector, callback )

参数类型描述
delegateElementelement或string事件代理元素或选择器
typesstring手势事件的类型,可接受多个事件以空格分开;
selectorstring代理子元素选择器
callbackfunction事件处理函数

示例:

   <ul id="touchs">
        <li> 第一个</li>
        <li> 第二个 </li>
        <li> 第三个</li>
    </ul>
    
   
   touch.on("#touchs","tap","li",function(event){
        
        console.log("li被点击了");
        let e = event || window.event;
        console.log(e.target.tagName);

    });

事件处理对象(event)

​ 事件处理函数的第一个参数为事件对象,除了原生属性之外,百度手势库还提供了部分新属性

属性描述
originEvent触发某事件的原生对象
type事件的名称
rotation旋转角度
scale缩放比例
direction操作的方向属性
fingersCount操作的手势数量
position相关位置信息,不同的操作产生不同的位置信息
distanceswipe类两点之间的位移
distanceX, x手势事件x方向的位移值,向左移动时为负数
distanceY, y手势事件y方向的位移值,向上移动时为负数
anglerotate事件触发时旋转的角度
durationtouchstart与touchend之间的时间戳
factorswipe事件加速度因子
startRotate()启动单指旋转方法,在某个元素的touchstart触发时调用

第三方(UI)组件

使用一些别人开发好的组件、组件库、插件、ui库,来提高项目开发进度,组件库通常是某家公司开发并开源出来,获取方式可以通过npm、github查询,或者百度vue组件库,这里有一些推荐1,、推荐2推荐3

使用方式

//安装
npm i vue-swipe --save  安装

//引入
import './node_modules/vue-swipe/dist/vue-swipe.css'; 引入样式
import { Swipe, SwipeItem } from 'vue-swipe'; 引入组件

Vue.component('swipe', Swipe);    //注册安装到全局
Vue.component('swipe-item', SwipeItem);

//注册到选项components 私有使用

组件类别

pc端、后台管理

  • element-ui 饿了么 √
  • iview 个人
  • ant design 蚂蚁金服

移动端、客户端(前台系统)

  • mint-ui 饿了么
  • vant 有赞 电商 √
  • vue-material
  • muse-ui
  • VUX
  • cube-ui
  • vonic
  • Vue-Carbon
  • YDUI

通用

  • bootstrap4/3
  • ameizi

elementUI

官网

安装

npm i element-ui -S

整体引入全局使用

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

按需引入

npm install babel-plugin-component -D

//修改babel配置 baberc/babel.config.js
//添加:
"plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
//全局使用:   所有应用内部组件直接使用 <el-button></..>
import { Button } from 'element-ui';
Vue.component(Button.name, Button); | Vue.use(Button)

//局部使用: 只有当前组件可使用
import { Select, Option } from 'element-ui';
components:{
  'bulala':Select,
  [Option.name]:Option,
},

mintUI

官网

安装

npm i mint-ui -S

整体引入

import Mint from 'mint-ui';
import 'mint-ui/lib/style.css'
Vue.use(Mint);

按需引入

//全局使用: npm install babel-plugin-component -D
import { Button } from 'mint-ui';
Vue.component(Button.name, Button);

//babel.config.js配置: 添加
"plugins": [
  [
    "component", 
    {
      "libraryName": "mint-ui",
      "style": true
    }
 ]
]

//组件内部引入,只有当前组件可使用
import { Button } from 'mint-ui';
components:{
  //'bulala':Button,
  [Button.name]:Button,
},

vant

官网

整体引入

import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);

//全局使用: <van-xxx></van-xxx>

按需引入

npm i babel-plugin-import -S

// 对于使用 babel7 的用户,可以在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

//局部使用:
  import { Button, Cell } from 'vant';
  components:{Button,Cell}
  //<Button></Button>

//全局使用
  import { Button } from 'vant';
  Vue.use(Button); 
  //<van-xxx></van-xxx>

组件样式顺序

  1. 修改主题
  2. 使用props
  3. 添加 class/style
  4. 查看元素,查询相关样式名,修改编译后的样式
  5. scope 影响
    css解决: .a >>> .b { /* … */ } 深度选择器
    Sass解决: .a{ /deep/ .b{} }

举例

app组件

​ Tabbar 标签栏

home组件

​ Search 搜索/轮播/Tab 标签页

category组件

​ Tab 标签页

follow组件

​ pull-refresh 下拉刷新 / 单元格 cell

column组件

​ Popup 弹出层

detail组件

​ NavBar 导航栏/栅格布局

ShopCart组件

​ NavBar 导航栏/SwipeCell 滑动单元格>Card 卡片/SubmitBar 提交订单栏/stepper步进器

user组件

​ flex布局/van-tag标记/Panel 面板/cell-group 单元格组/ icon图标

login组件

​ NavBar 导航栏/field输入框

reg组件

​ van-uploader 文件上传

下拉刷新上拉加载(Better-scroll)

介绍

​ better-scroll 是一款重点解决移动端(已支持 PC)各种滚动场景需求的插件。它的核心是借鉴的 iscroll 的实现,它的 API 设计基本兼容 iscroll,在 iscroll 的基础上又扩展了一些 feature 以及做了一些性能优化,不仅可以做普通的滚动列表,还可以做轮播图、picker 等等。better-scroll 是基于原生 JS 实现的,不依赖任何框架。

http://ustbhuangyi.github.io/better-scroll/doc/api.html

安装和使用

1、安装:npm install better-scroll --save
2、引入:import BScroll from ‘better-scroll’
3、使用:
let scroll = new BScroll(‘.wrapper’,{
scrollY: true,
click: true
})

注意:

​ better-scroll 的初始化时机很重要,因为它在初始化的时候,会计算父元素和子元素的高度和宽度,来决定是否可以纵向和横向滚动。因此,我们在初始化它的时候,必须确保父元素和子元素的内容已经正确渲染了。如果子元素或者父元素 DOM 结构发生改变的时候,必须重新调用 scroll.refresh() 方法重新计算来确保滚动效果的正常

在vue脚手架里使用(数据写死)

假定组件文件为:./src/components/Books.vue

//1、引入:

import BScroll from 'better-scroll'

//2、使用

<template>
  <div class="wrapper">
    <ul>
      <div v-show="downShow">加载中…………………………</div>
      <li v-for="(book,index) in books" :key="index">
        <p>编号:{{book.id}}</p>
        <img src="../assets/img/img1.jpg" />
        <p>书名:{{book.name}}</p>
        <p>价格:¥{{book.price}}</p>
      </li>
      <div v-show="upShow">加载中…………………………</div>
    </ul>
  </div>
</template>

<script>
import BScroll from "better-scroll";

export default {
  name: "Books",
  data: function() {
    return {
          downShow: false, //下拉时显示
          upShow: false,//上拉时显示
      books: [
        {
          id: "878913",
          name: "红楼梦",
          author: "曹雪芹",
          price: 52,
          type: "hot"
        },
        {
          id: "01001",
          name: "西游记",
          author: "曹雪芹",
          price: 52,
          type: "recommend"
        },
        {
          id: "01002",
          name: "霸道总裁",
          author: "王馨",
          price: 50,
          type: "recommend"
        },

        {
          id: "01004",
          name: "侠客行",
          author: "金庸",
          img: "img/img7.jpg",
          price: 53,
          type: "武侠"
        },
        {
          id: "01005",
          name: "绝代双骄",
          author: "古龙",
          img: "img/img8.jpg",
          price: 58,
          type: "武侠"
        },
        {
          id: "01006",
          name: "三体",
          author: "王馨",
          img: "img/img9.jpg",
          price: 59,
          type: "科幻"
        },
        {
          id: "01007",
          name: "流浪地球",
          author: "魏瑞峰",
          img: "img/img10.jpg",
          price: 68,
          type: "科幻"
        }
      ],
      scroll: null
    };
  },
  mounted() {
    //1、实例化 Better-scroll对象
    this.scroll = new BScroll(".wrapper", {
      scrollY: true, //开启纵向滚动。
        
      //click: true,
      pullDownRefresh: { //下拉刷新的配置
        threshold: 30 // 当下拉到超过顶部 30px 时,触发 pullingDown 事件
      },
      pullUpLoad: { //上拉加载的配置
        threshold: -50 // 在上拉到超过底部 50px 时,触发 pullingUp 事件
      }
        
    });
      
      
    //2、绑定事件 pullingDown
    this.scroll.on("pullingDown", () => {
      this.downShow = true; //显示加载中……的文字或者图片
      this.getDataUnshift(); //发送请求获取数据
    });
      
    //3、绑定事件 pullingUp
    this.scroll.on("pullingUp", () => {
      this.upShow = true; //显示加载中……的文字或者图片
      this.getDataPush(); //发送请求获取数据
    });
      
  },
 methods: {
    getDataUnshift() {
      setTimeout(() => {
        let arr = [];
        for (let i = 0; i < 5; i++) {
          arr.push({
            id: parseInt(Math.random() * 1000) + "",
            name: "三国",
            author: "罗贯中",
            price: (Math.random() * 100).toFixed(2)
          });
        }
          
        this.books = [...arr, ...this.books];
          
        this.downShow = false; //隐藏加载中……的文字或者图片
          
        this.$nextTick(() => {
          this.refresh(); //渲染后要重新计算父子元素的高度
        });
          
      }, 1000);
    },

    getDataPush(cb) {
      setTimeout(() => {
        let arr = [];
        for (let i = 0; i < 5; i++) {
          arr.push({
            id: parseInt(Math.random() * 1000) + "",
            name: "三国",
            author: "罗贯中",
            price: (Math.random() * 100).toFixed(2)
          });
        }
        this.books = [...this.books, ...arr];
        this.upShow = false;//隐藏加载中……的文字或者图片
        this.$nextTick(() => {
          this.refresh(); //渲染后要重新计算父子元素的高度
        });
      }, 1000);
    },
    refresh() {
      this.scroll.finishPullDown();
      this.scroll.finishPullUp();
      this.scroll.refresh(); //重新计算元素高度
    }
  }
};
</script>

<style scoped>
.wrapper {
  width: 100%;
  height: 800px;
}
img {
  width: 100%;
}
</style>

在vue脚手架里使用(数据来自后端)

需要使用$nextTick()

<template>
  <div class="box">
    <ul>
      <div v-show="downShow">加载中…………………………</div>
      <li v-for="book in books" :key="book.id">
        <p>书号:{{ book.id }}</p>
        <p>书名:{{ book.name }}</p>
        <img :src="book.img" />
        <p>作者:{{ book.author }}</p>
        <p>价格:{{ book.price }}</p>
      </li>
      <div v-show="upShow">加载中…………………………</div>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
import BScroll from "better-scroll";

export default {
  name: "BookJia",

  data() {
    return {
      downShow: false, //下拉时显示
      upShow: false,//上拉时显示
      books: [],
      pageIndex:0,
      scroll:null
    };
  },
  created() {
    this.pageIndex++;
    axios({
      url: "/booklist?_page="+this.pageIndex+"&_limit=4",
    }).then((res) => {
      this.books = res.data;

      this.$nextTick(() => {
  
        this.scroll = new BScroll(".box", {
          scrollY: true,
           pullDownRefresh: { //下拉刷新的配置
              threshold: 30 // 当下拉到超过顶部 30px 时,触发 pullingDown 事件
            },
            pullUpLoad: { //上拉加载的配置
              threshold: -50 // 在上拉到超过底部 50px 时,触发 pullingUp 事件
            }
        });
        
        this.scroll.on("pullingDown",()=>{
          this.downShow = true;
        })
        
        this.scroll.on("pullingUp",()=>{
          this.upShow = true;
          
          this.pageIndex++;
          axios({
             url: "/booklist?_page="+this.pageIndex+"&_limit=4",
          }).then((res) => {
            this.books = this.books.concat(res.data);
            // this.books = [...this.books,...res.data];
            this.upShow = false;
            this.$nextTick(()=>this.refresh());
          })

        })

      });
    });
  },
  methods:{
      refresh() {
      this.scroll.finishPullDown();
      this.scroll.finishPullUp();
      this.scroll.refresh(); //重新计算元素高度
    } 
  }

};
</script>

<style scoped>
.box {
  width: 100%;
  height: 612px;
  overflow: auto;
  border:2px solid red;
}

img {
  width: 100%;
  height: 200px;
}
</style>

在vue脚手架里使用(封装了)

<template>
  <div class="box">
    <ul>
      <div v-show="downShow">加载中…………………………</div>
      <li v-for="book in books" :key="book.id">
        <p>书号:{{ book.id }}</p>
        <p>书名:{{ book.name }}</p>
        <img :src="book.img" />
        <p>作者:{{ book.author }}</p>
        <p>价格:{{ book.price }}</p>
      </li>
      <div v-show="upShow">{{upMsg}}</div>
    </ul>
  </div>
</template>

<script>
import axios from "axios";
import BScroll from "better-scroll";

export default {
  name: "BookJia",

  data() {
    return {
      downShow: false, //下拉时显示
      upShow: false, //上拉时显示
      books: [],
      pageIndex: 0,
      maxPageIndex:4, //最大页码数
      scroll: null,
      upMsg:"加载中…………………………"
    };
  },
  created() {
    //1、获取最大的页码数。赋给 maxPageIndex
    this.maxPageIndex = 4;

    //2、获取数据,并且初始化better-scroll
    this.getBooks(this.initBScroll);
  },
  methods: {
    // 获取数据
    getBooks(cb) {
      console.log("发送请求");
      this.pageIndex++;
      axios({
        url: "/booklist?_page=" + this.pageIndex + "&_limit=4",
      }).then((res) => {
        cb(res.data);
      });
    },
    //初始化better-scroll;
    initBScroll(data) {
      this.books = data;
      this.$nextTick(() => {
        //1、 创建better-sroll;
        this.createBScroll();
        //2、 给better-scroll添加事件
        this.addEvent();
      });
    },

    // 创建better-sroll;
    createBScroll(){
      this.scroll = new BScroll(".box", {
          scrollY: true,
          pullDownRefresh: {
            //下拉刷新的配置
            threshold: 30, // 当下拉到超过顶部 30px 时,触发 pullingDown 事件
          },
          pullUpLoad: {
            //上拉加载的配置
            threshold: -50, // 在上拉到超过底部 50px 时,触发 pullingUp 事件
          },
        });

    },

    // 给better-scroll添加上拉和下拉的事件
    addEvent() {
      this.scroll.on("pullingDown", () => {
        this.downShow = true;
      });

      this.scroll.on("pullingUp", () => {       
        console.log(this.pageIndex); 
        this.upShow = true;
        if(this.pageIndex>=this.maxPageIndex){
          this.upMsg = "------我是有底线的----------";
          return;
        }
        // 再次获取数据,更新better-scroll。
        this.getBooks(this.updateBScroll);
      });
    },

    //更新better-scroll;
    updateBScroll(data){
      this.books = this.books.concat(data);
      this.upShow = false;
      this.$nextTick(() => this.refresh());
    },
	
    refresh() {
      this.scroll.finishPullDown();
      this.scroll.finishPullUp();
      this.scroll.refresh(); //重新计算元素高度
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 612px;
  overflow: auto;
  border: 2px solid red;
}

img {
  width: 100%;
  height: 200px;
}
</style>

构造函数的选项

scrollX
  • 类型:Boolean
  • 默认值: false
  • 作用:当设置为 true 的时候,可以开启横向滚动。
  • 备注:当设置 eventPassthrough 为 ‘horizontal’ 的时候,该配置无效。
scrollY
  • 类型:Boolean
  • 默认值:true
  • 作用:当设置为 true 的时候,可以开启纵向滚动。
  • 备注:当设置 eventPassthrough 为 ‘vertical’ 的时候,该配置无效。
click
  • 类型:Boolean
  • 默认值:false
  • 作用:better-scroll 默认会阻止浏览器的原生 click 事件。当设置为 true,better-scroll 会派发一个 click 事件,我们会给派发的 event 参数加一个私有属性 _constructed,值为 true。但是自定义的 click 事件会阻止一些原生组件的行为,如 checkbox 的选中等,所以一旦滚动列表中有一些原生表单组件,推荐的做法是监听 tap 事件
probeType
  • 类型:Number
  • 默认值:0
  • 可选值:1、2、3
  • 作用:有时候我们需要知道滚动的位置。当 probeType 为 1 的时候,会非实时(屏幕滑动超过一定时间后)派发scroll 事件, 函数节流 ; 当 probeType 为 2 的时候,会在屏幕滑动的过程中实时的派发 scroll 事件;当 probeType 为 3 的时候,不仅在屏幕滑动的过程中,而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。

对象的属性:

maxScrollY
  • 类型:Number
  • 作用:scroll 最大纵向滚动位置。
  • 备注:scroll 纵向滚动的位置区间是 0 - maxScrollY,并且 maxScrollY 是负值。

对象的方法:

refresh()
  • 参数:无
  • 返回值:无
  • 作用:重新计算 better-scroll,当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。

对象的事件

scroll
  • 参数:{Object} {x, y} 滚动的实时坐标
  • 触发时机:滚动过程中,具体时机取决于选项中的 [probeType](

vue项目打包上线

1、打包前的修改

在开发vue项目时,使用了反向代理的配置(在webpack中的配置),并使用了Axios的BaseUrl:
Axios.defaults.baseURL = ‘/api/’;

1)、如果上线时,项目还是前后端分离(如:在两个服务器上)

​ Axios.defaults.baseURL = ‘/api/’; //不用改。互联网服务器上的反向代理可以使用nginx。

2)、如果上线时,项目不是前后端分离。就不存在跨域问题。

​ Axios.defaults.baseURL = ‘’; //去掉baseURL的配置。

​ 把前端和后端的打包结果放在一起,就ok了(把前端代码发给后端,后端一起打包)

2、打包命令

npm run build
命令行(项目目录下)运行此命令,就会在项目里产生dist目录。
dist目录就是打包后的结果,把该目录下的文件拷贝到服务器的根目录,记住一定是根目录(引入webpack打包时,会把很多文件路径设置为根路径)

补充:vue脚手架项目打包前后的对比

???????

3、远程服务器上线(nginx)

1)、如果上线时,项目还是前后端分离(如:在两个服务器上),那么webpack中的反向代理怎么办?没事,nginx服务器可以。nginx是一个服务器(跟apache)

nginx的反向代理配置:

location ~ ^/api/ {
    proxy_set_header        Host $host;
    proxy_set_header        X-Real-IP $remote_addr;
    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header        REMOTE-HOST $remote_addr;

    rewrite ^/api/(.*)$   /$1 break;
    proxy_pass             http://localhost:3000;
}

2)、如果上线时,项目不是前后端分离。就不存在跨域问题。

vue脚手架项目从开发到打包完整的流程(从零开始做一个项目)

一、git版本管理

1、建立远程仓库,邀请成员,分配权限

2、每个程序员 克隆项目(就会有本地仓库)

二、脚手架搭建和开发

1、项目负责人搭建脚手架,并且把项目上传到远端

​ 1)、vue create 项目名 | vue init webpack 项目名

​ 2)、项目负责人把脚手架的代码拷贝到本地仓库所在目录下。

​ 3)、项目负责人把脚手架的代码上传到远端版本库。

​ git add .

​ git commit -m “”

​ git push 远端地址 master

4、各程序员下载远端的脚手架空项目

5、各程序员进行开发

​ 1)、建立分支(小仓库)

​ 2)、写代码

3)、上传:git add git commit git push

​ 4)、 循环以上三步,直到当前功能开发完毕

​ 5)、合并分支的代码到主分支

​ 6)、上传主分支的代码到远端。

​ 7)、每天重复以上六步,这就是程序员的一生。

6、注意点:

​ 每次push的时候,应该先pull。

三、打包上线

​ 1、项目负责人(或指派人员)打包

​ npm run build

​ 结果在dist目录下。

​ 1)、第一种情况:前后端不分离(在一台服务器上)

​ 不存在跨域问题,所以不需要反向代理。那么,打包前需要看看baseURL要不要改。 /api

​ 2)、第二种情况:前端后端分离

		   有跨域问题,但是,打包时,不需要做修改。

​ 2、上线

​ 1)、第一种情况:前后端不分离(在一台服务器上)

​ 把dist的目录的代码发给后端,后端统一传到互联网(www服务器)服务器上

​ 2)、第二种情况:前端后端分离

​ 跨域问题(反向代理),使用nginx解决。

​ 前端www服务上使用nginx。把曾经在webpack中的反向代理配置,写在nginx里。

​ 后端会把自己的代码放在另外一台(www)服务器上


查漏补缺:

1、vue-cli3/4的配置

在项目根目录创建文件vue.config.js

1)、反向代理配置

module.exports = {

  devServer:{
    //设置代理
    proxy: { //代理是从指定的target后面开始匹配的,不是任意位置;配置pathRewrite可以做替换
      '/api': { //axios访问 /api ==  target + /api
        target: 'http://localhost:3001',
        changeOrigin: true, //创建虚拟服务器 
        ws: true, //websocket代理
      },
     ……………………
    }
  }
  
}

2)、别名配置:

npm  install  path  --save-dev

vue.config.js配置

const path = require("path");

function resolve(dir) {
	  return path.join(__dirname, dir);      
}

module.exports = {
    
      chainWebpack: config => {
          config.resolve.alias
            .set("@", resolve("src"))
            .set("assets", resolve("src/assets"))
            .set("components", resolve("src/components"))
      }
    
}

2、axios的封装

//在公司里,都会对axios进行封装。如果说,我们不学这个,不执行,那么到公司中就看不懂别人的代码

1)、创建目录和文件:src/utils/service.js,封装axios的请求拦截器和全局的配置

import axios from "axios"

// 创建axios 赋值给常量service 
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 100000
    headers: {
        "Content-Type": "application/json;charset=UTF-8",
        // "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",        
    }
});

// 添加请求拦截器(Interceptors)
service.interceptors.request.use(function (config) {
  // 发送请求之前做写什么
  let token =  localStorage.getItem("token");
  // 如果有
  if(token){
    // 放在请求头(token跟后端沟通,他需要什么该成什么就可以了)
      config.headers.authorization = token;
  }

  return config;
}, function (error) {
  // 请求错误的时候做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
service.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

export default service

2)、创建api文件夹,

2.1)、index.js封装get和post请求

import service from "../utils/service";

export function POST(url, params) {
    
    return new Promise((resolve, reject) => {
        service.post(url, params)
            .then(response => {
                if (!response.data) {
                    resolve(response);
                }
                resolve(response.data);
            }, err => {
                reject(err);
            })
            .catch((err) => {
                reject(err)
            })
    })
}
// get方法
export function GET(url, params) {
    return new Promise((resolve, reject) => {
        service.get(url, {
                params
            })
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err);
            })
            .catch((err) => {
                reject(err)
            })
    })
}

2.2)、根据实际情况进行分模块:

如:home.js存放首页的所有请求

//home.js

import * as axiosBase from '@/api/index.js';

export let getBooks = function (params) {
    params = params || {}
    return axiosBase.GET('/api/books', params)
}

export let getBannerImgs = function (params) {
    params = params || {}
    return axiosBase.GET('/api/imgs', params)
}

如:users.js 存放登录注册相关的请求

//user.js

import * as axiosBase from '@/api/index.js';

export let checkUser = function (params) {
    params = params || {}
    return axiosBase.GET('/api/checkUser', params)
}

export let reg = function (params) {
    params = params || {}
    return axiosBase.POST('/api/users', params)
}


export let loginCheck = function (params) {
    params = params || {}
    return axiosBase.POST('/api/loginCheck', params)
}

还有这么干的:

import { get, post } from "./utils/index";

Vue.prototype.$http = {
  get,
  post
};


发送请求时,直接使用:this.$http.get();  this.$http.post();

3、脚手架里使用sass

1、安装
npm install node-sass --save-dev //安装node-sass
npm install sass-loader@6.0.6 --save-dev //安装sass-loader
npm install style-loader --save-dev //安装style-loader 或者 vue-style-loader !

2.在需要用到sass的地方添加lang=scss

3、可能出现的问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2Ec7OpGt-1651577687611)(C:\Users\31759\AppData\Roaming\Typora\typora-user-images\1600185128727.png)]
说明版本太高,安装指定版本即可:
npm install sass-loader@6.0.6 --save-dev

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

安装node-sass就行。
npm install node-sass --save-dev

croll,当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。

对象的事件

scroll
  • 参数:{Object} {x, y} 滚动的实时坐标
  • 触发时机:滚动过程中,具体时机取决于选项中的 [probeType](

vue项目打包上线

1、打包前的修改

在开发vue项目时,使用了反向代理的配置(在webpack中的配置),并使用了Axios的BaseUrl:
Axios.defaults.baseURL = ‘/api/’;

1)、如果上线时,项目还是前后端分离(如:在两个服务器上)

​ Axios.defaults.baseURL = ‘/api/’; //不用改。互联网服务器上的反向代理可以使用nginx。

2)、如果上线时,项目不是前后端分离。就不存在跨域问题。

​ Axios.defaults.baseURL = ‘’; //去掉baseURL的配置。

​ 把前端和后端的打包结果放在一起,就ok了(把前端代码发给后端,后端一起打包)

2、打包命令

npm run build
命令行(项目目录下)运行此命令,就会在项目里产生dist目录。
dist目录就是打包后的结果,把该目录下的文件拷贝到服务器的根目录,记住一定是根目录(引入webpack打包时,会把很多文件路径设置为根路径)

补充:vue脚手架项目打包前后的对比

???????

3、远程服务器上线(nginx)

1)、如果上线时,项目还是前后端分离(如:在两个服务器上),那么webpack中的反向代理怎么办?没事,nginx服务器可以。nginx是一个服务器(跟apache)

nginx的反向代理配置:

location ~ ^/api/ {
    proxy_set_header        Host $host;
    proxy_set_header        X-Real-IP $remote_addr;
    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header        REMOTE-HOST $remote_addr;

    rewrite ^/api/(.*)$   /$1 break;
    proxy_pass             http://localhost:3000;
}

2)、如果上线时,项目不是前后端分离。就不存在跨域问题。

vue脚手架项目从开发到打包完整的流程(从零开始做一个项目)

一、git版本管理

1、建立远程仓库,邀请成员,分配权限

2、每个程序员 克隆项目(就会有本地仓库)

二、脚手架搭建和开发

1、项目负责人搭建脚手架,并且把项目上传到远端

​ 1)、vue create 项目名 | vue init webpack 项目名

​ 2)、项目负责人把脚手架的代码拷贝到本地仓库所在目录下。

​ 3)、项目负责人把脚手架的代码上传到远端版本库。

​ git add .

​ git commit -m “”

​ git push 远端地址 master

4、各程序员下载远端的脚手架空项目

5、各程序员进行开发

​ 1)、建立分支(小仓库)

​ 2)、写代码

3)、上传:git add git commit git push

​ 4)、 循环以上三步,直到当前功能开发完毕

​ 5)、合并分支的代码到主分支

​ 6)、上传主分支的代码到远端。

​ 7)、每天重复以上六步,这就是程序员的一生。

6、注意点:

​ 每次push的时候,应该先pull。

三、打包上线

​ 1、项目负责人(或指派人员)打包

​ npm run build

​ 结果在dist目录下。

​ 1)、第一种情况:前后端不分离(在一台服务器上)

​ 不存在跨域问题,所以不需要反向代理。那么,打包前需要看看baseURL要不要改。 /api

​ 2)、第二种情况:前端后端分离

		   有跨域问题,但是,打包时,不需要做修改。

​ 2、上线

​ 1)、第一种情况:前后端不分离(在一台服务器上)

​ 把dist的目录的代码发给后端,后端统一传到互联网(www服务器)服务器上

​ 2)、第二种情况:前端后端分离

​ 跨域问题(反向代理),使用nginx解决。

​ 前端www服务上使用nginx。把曾经在webpack中的反向代理配置,写在nginx里。

​ 后端会把自己的代码放在另外一台(www)服务器上


查漏补缺:

1、vue-cli3/4的配置

在项目根目录创建文件vue.config.js

1)、反向代理配置

module.exports = {

  devServer:{
    //设置代理
    proxy: { //代理是从指定的target后面开始匹配的,不是任意位置;配置pathRewrite可以做替换
      '/api': { //axios访问 /api ==  target + /api
        target: 'http://localhost:3001',
        changeOrigin: true, //创建虚拟服务器 
        ws: true, //websocket代理
      },
     ……………………
    }
  }
  
}

2)、别名配置:

npm  install  path  --save-dev

vue.config.js配置

const path = require("path");

function resolve(dir) {
	  return path.join(__dirname, dir);      
}

module.exports = {
    
      chainWebpack: config => {
          config.resolve.alias
            .set("@", resolve("src"))
            .set("assets", resolve("src/assets"))
            .set("components", resolve("src/components"))
      }
    
}

2、axios的封装

//在公司里,都会对axios进行封装。如果说,我们不学这个,不执行,那么到公司中就看不懂别人的代码

1)、创建目录和文件:src/utils/service.js,封装axios的请求拦截器和全局的配置

import axios from "axios"

// 创建axios 赋值给常量service 
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API,
    timeout: 100000
    headers: {
        "Content-Type": "application/json;charset=UTF-8",
        // "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",        
    }
});

// 添加请求拦截器(Interceptors)
service.interceptors.request.use(function (config) {
  // 发送请求之前做写什么
  let token =  localStorage.getItem("token");
  // 如果有
  if(token){
    // 放在请求头(token跟后端沟通,他需要什么该成什么就可以了)
      config.headers.authorization = token;
  }

  return config;
}, function (error) {
  // 请求错误的时候做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
service.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

export default service

2)、创建api文件夹,

2.1)、index.js封装get和post请求

import service from "../utils/service";

export function POST(url, params) {
    
    return new Promise((resolve, reject) => {
        service.post(url, params)
            .then(response => {
                if (!response.data) {
                    resolve(response);
                }
                resolve(response.data);
            }, err => {
                reject(err);
            })
            .catch((err) => {
                reject(err)
            })
    })
}
// get方法
export function GET(url, params) {
    return new Promise((resolve, reject) => {
        service.get(url, {
                params
            })
            .then(response => {
                resolve(response.data);
            }, err => {
                reject(err);
            })
            .catch((err) => {
                reject(err)
            })
    })
}

2.2)、根据实际情况进行分模块:

如:home.js存放首页的所有请求

//home.js

import * as axiosBase from '@/api/index.js';

export let getBooks = function (params) {
    params = params || {}
    return axiosBase.GET('/api/books', params)
}

export let getBannerImgs = function (params) {
    params = params || {}
    return axiosBase.GET('/api/imgs', params)
}

如:users.js 存放登录注册相关的请求

//user.js

import * as axiosBase from '@/api/index.js';

export let checkUser = function (params) {
    params = params || {}
    return axiosBase.GET('/api/checkUser', params)
}

export let reg = function (params) {
    params = params || {}
    return axiosBase.POST('/api/users', params)
}


export let loginCheck = function (params) {
    params = params || {}
    return axiosBase.POST('/api/loginCheck', params)
}

还有这么干的:

import { get, post } from "./utils/index";

Vue.prototype.$http = {
  get,
  post
};


发送请求时,直接使用:this.$http.get();  this.$http.post();

3、脚手架里使用sass

1、安装
npm install node-sass --save-dev //安装node-sass
npm install sass-loader@6.0.6 --save-dev //安装sass-loader
npm install style-loader --save-dev //安装style-loader 或者 vue-style-loader !

2.在需要用到sass的地方添加lang=scss

3、可能出现的问题

[外链图片转存中…(img-2Ec7OpGt-1651577687611)]
说明版本太高,安装指定版本即可:
npm install sass-loader@6.0.6 --save-dev

[外链图片转存中…(img-3PurQaxx-1651577687611)]

安装node-sass就行。
npm install node-sass --save-dev

Logo

前往低代码交流专区

更多推荐