vue-03生命周期

CTL
112 阅读8分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情

自定义指令:

1.何时:

我们希望在开局时就能对HTML元素执行一些初始化操作，但是，vue中又没有提供对应功能的指令。就可以自定义指令。

比如: 希望一个文本框在页面加载时，就自动获得焦点，但是，vue自带的指令中，没有指令可以让元素自动获得焦点。此时，就可以自定义一个获得焦点的指令。

2.如何: 2步:

(1). 创建一个指令保存在Vue内存中备用

​ 指令

Vue.directive("指令名", {
  //插入后: 当前带有指令的DOM元素被vue挂载到页面上之后，自动触发的回调函数。
	inserted(当前带有指令的DOM元素){
		//对当前带有指令的DOM元素执行原生的DOM操作
	}
})

(2). 在页面上使用自定义的vue指令

 <元素 v-指令名>

3.强调:

(1). 定义指令时，指令名一定不要加v-前缀

使用指令时，必须加v-前缀

(2). 问题: 指令名使用驼峰命名会报错！

原因: HTML语言很蠢，只认识小写字母，不认识大写字母。

解决: 将来如果一个名字，有可能用在HTML地盘范围内，则如果包含多个单词，必须用-分隔，不能用驼峰命名。

4.原理:

(1). Vue.directive()是创建一个自定义指令对象，保存在Vue类型的内存中备用。

(2). new Vue()扫描时，发现v-开头的自定义指令，就回去Vue内存中找同名的自定义指令。

(3). 只要找到同名的自定义指令，就自动执行自定义指令对象中的inserted()函数，并将当前扫描到的带有自定义指令的元素对象传给inserted()的形参变量。 (4). 在inserted()函数内，可对当前传入的带有自定义指令的DOM元素应用原生的DOM操作。

5.示例:

自定义指令让元素自动获得焦点

自定义指令.png

计算属性:

1.什么是: 自己不保存属性值，而是根据其他属性的属性值，动态计算出自己的属性值。

2.何时: 今后，如果页面上需要一个值，但是这个值不是直接给的，需要经过复杂的计算过程才能获得时，都用计算属性。

3.如何: 2步:

(1). 定义计算属性:

new Vue({
	el:"#app",
	data:{ ... },
	methods:{ ... },
	watch:{ ... },
	computed:{
    	计算属性名(){
     		//复杂的计算过程
		return 属性值
		}
	}
})

(2). 在页面上使用计算属性:

 <元素>{{计算属性名}}</元素>

4.强调:

(1). 计算属性虽然称为属性，但是其本质却是一个函数。但是，函数名却是一个名词

(2). 虽然计算属性本质是一个函数，但是在页面中使用计算属性时，不要加()！

5.原理:

(1). 当new Vue()扫描到一个不带()的变量时，会先去data中查找普通的属性。如果没找到，就去计算属性computed中查找。

(2). 如果找到计算属性，就自动调用计算属性的函数，执行出计算结果，并将计算结果替换到页面中属性名位置显示。

(3). 并且，vue会自动将首次计算属性计算出的结果，缓存起来，反复使用！避免重复计算！

(4). 当多次使用同一计算属性时，不会重复执行计算属性的计算过程，而是直接从缓存中取值。

(5). 当计算属性内部以来的其它变量值发生了变化时，vue会自动重新计算属性的值，并重新缓存起来反复使用。

6.计算属性computed和普通函数methods差别:

(1). methods中的普通函数，如果反复调用几次，就会反复执行几次。不会缓存结果。

(2). computed中的计算属性，即使反复使用多次，也只计算一次，然后将结果缓存起来反复使用。

(3).如果把computed的方法放到methods中时,调用时得加(),

7.如何选择:

(1). 如果更倾向于计算出一个值显示到页面上时，首选computed计算属性

(2). 如果更倾向于执行一个操作，而不关系结果时，首选methods普通函数

8.示例: 使用计算属性计算购物车总价:

计算属性.png

过滤器

1.什么是: 专门对变量的原始值先加工再显示的一种特殊函数

2.为什么: 因为程序中有些数据不能直接给人看，需要先加工再给人看。

比如: 日期/时间、性别

3.何时: 今后，只要发现变量的原始值不能直接给人看，需要先加工再显示时，都可以用过滤器

4.如何: 2步:

(1). 先创建过滤器函数

    //过滤
Vue.filter("过滤器名",function(旧值){
	return 新值
})

(2). 在页面中使用过滤器函数

 <元素>{{变量名 | 过滤器名 }}</元素>
<!--		 连接
		|   js地盘     |
-->

5.强调: 因为过滤器名用在{{}}内，是js的地盘，所以如果过滤器名中包含多个单词，应该用驼峰命名。

6.示例: 使用过滤器过滤性别:

过渡器1.png

过滤器传参:

(1). 定义时:

Vue.filter("过滤器名",function(旧值, 自定义形参, ...){
	return 新值
})

(2). 使用时:

 <元素>{{变量名 | 过滤器名(实参值1, ...)}}</元素>

(3). 示例: 使用过滤器显示不同的性别，可以选择不同的语言

过渡器2.png

过滤器可以连用:

(1). 定义过滤器时:

Vue.filter("过滤器名",function(旧值, 自定义形参, ...){
	return 新值
})

(2). 使用过滤器时:

 <元素>{{变量 | 过滤器1 | 过滤器2 | ... }}</元素>

(3).示例: 给性别追加图标

过滤器3.png

过滤器3V.png

axios:

1.什么是:

(1). 第三方开发的: 下载

(2). 专门发送ajax请求: 用途

(3). 基于Promise: 语法

(4). 的函数库: 一组函数

2.何时: 今后只要在vue中发送ajax请求，一律用axios

3.如何: axios发送get请求和发送post请求参数格式不一样！

(0). 配置服务器端接口地址的公共路径部分:

axios.defaults.baseURL="http://服务器端基础地址部分"

比如:

axios.defaults.baseURL="http://xzserver.applinzi.com"

(1). get请求:

axios.get("服务器端接口地址剩余相对路径部分",{
	params:{ 参数名: 参数值, ... : ... , ...  }
}).then(result=>{ //必须用箭头函数
	//其实result不直接是响应结果
	//result.data才是真正的响应结果
 })

(2). post请求:

axios.post(
	"服务器端接口地址剩余相对路径部分",
	"参数名1=参数值1&参数名2=参数值2&..."
).then(result=>{
	console.log(result.data);
})

(3). 运行时:

axios会自动将baseURL和get/post中的相对路径拼接成接口的完整地址再发送请求。

axios.png

axiosV.png

vue的生命周期:

1.问题: 在DOM和jq中，如果希望页面一加载就能自动执行一项任务，可以把代码写在DOMContentLoaded或load事件处理函数中。但是vue中，如果希望在new Vue()加载完之后，自动执行一项任务，写哪儿？

2.错误: 直接在new Vue()外部的后方写希望后续执行的代码。

3.原因: 因为new Vue()的加载过程也是异步的，且做的事儿非常多，肯定有延迟。所以，放在new Vue()之后的代码绝对无法保证在vue加载完之后才执行。所以，将来程序的主要流程和代码，都要写在new Vue()内部才行！

4.解决: 其实new Vue()和普通网页一样，在整个加载过程中也要经历多个阶段——生命周期

vue生命周期四个阶段:

/必经阶段/

(1). 创建(create)阶段, 创建data对象、访问器属性 (2). 挂载(mount)阶段 扫描真实DOM树，创建虚拟DOM树，并首次加载数据到页面显示

/不必经阶段/

(3). 更新(update)阶段 只当修改data中的变量，且影响页面显示时触发

(4). 销毁(destroy)阶段 只当主动调用vm.$destroy()函数后触发。只删除虚拟DOM树，打断new Vue()与页面之间的联系。但是new Vue()对象还在内存中。

可用vm.$mount("#app")将断开的new Vue()和页面重新建立虚拟DOM树，重新绑定起来。

6.每个阶段前后，各有一对儿生命周期钩子函数(回调函数) new Vue({中

/必经阶段/

beforeCreate(){ ... } 没data、访问器属性，没虚拟DOM

(1). 创建(create)阶段

created(){...} 有data、访问器属性，没虚拟DOM

beforeMount(){ ... } 有data、访问器属性，有虚拟DOM，但是，页面内容未加载 (2). 挂载(mount)阶段

mounted(){ ... }有data、访问器属性，有虚拟DOM，页面内容也加载完成。——new Vue()首屏加载完成。

/不必经阶段/

beforeUpdate(){ ... }

(3). 更新(update)阶段

updated(){ ... }

beforeDestroy(){ ... }

(4). 销毁(destroy)阶段

destroyed(){ ... }

7.示例: 触发new Vue()声明周期各个阶段:

生命周期函数1.png

在哪里如何发送ajax请求:

(1). 首屏数据加载完，new Vue()会自动触发mounted()回调函数/钩子函数。所以，如果希望在首屏加载完之后，自动发送ajax请求，应该放在mounted()中。

(2). 具体流程:

a. 在data中先定义变量，准备接受ajax请求回来的数据

b. 在mounted()中发送ajax请求，获得响应结果:

1). 先输出响应结果，确定是否正确

2). 再将响应结果赋值给data中之前准备好的变量

c. 在界面中用绑定语法或指令，显示data中变量的值

(3). 示例: 请求学子商城首页商品，加载到页面:

生命周期函数1.png

生命周期函数1V.png

生命周期函数2.png

avatar
文章
阅读
粉丝