今日目标:

  1. 能够说出vue组件生命周期
  2. 能够掌握axios的使用
  3. 能够了解refs, nextTick使用和name使用

学习内容：

学习目录:

  1. Vue生命周期
  2. axios
  3. nextTick和refs知识
  4. 今日总结
  5. 面试题

知识点自测

  • 知道window.onload的作用
  • ajax是什么, XMLHttpRequest的使用步骤
  • jQ的 $.ajax底层是什么?
  • Promise的作用
  • async和await的作用-如何和Promise配合
  • 同步异步的概念, 代码执行顺序
  • 请求和响应, 以及JSON解析能力
  • Vue基础, 组件使用, props传值, 组件通信, 计算属性使用, 对象引用类型使用

1. vue生命周期

1.0_组件-生命周期

  • 一组件从 创建 到 销毁 的整个过程就是生命周期

Vue的生命周期是什么?

  1. 从Vue实例, 创建到销毁的过程

1.1_钩子函数

目标: Vue 框架内置函数，随着组件的生命周期阶段，自动执行

PS：这些函数，被称为声明周期函数，也叫钩子函数

  • 作用: 特定的时间点，执行特定的操作
  • 场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据
  • 分类: 4大阶段8个方法
    • 初始化
    • 挂载
    • 更新
    • 销毁
  • 具体方法：
阶段 方法名 方法名
初始化 beforeCreate created
挂载 beforeMount mounted
更新 beforeUpdate updated
销毁 beforeDestroy destroyed
  • mount：挂载
  • destory：销毁
  • 官方文档
  1. 如何知道Vue生命周期到达了什么阶段?

    1. 使用钩子函数
  2. 钩子函数有哪些?
    1. 初始化/ 挂载/ 更新/ 销毁

1.2_初始化阶段

目标: 掌握初始化阶段2个钩子函数作用和执行时机

含义讲解:

  1. new Vue() – Vue实例化(组件也是一个小的Vue实例)

  2. Init Events & Lifecycle – 初始化事件和生命周期函数

  3. beforeCreate – 生命周期钩子函数被执行

  4. Init injections&reactivity – Vue内部添加data和methods等

  5. created – 生命周期钩子函数被执行, 实例创建

  6. 接下来是编译模板阶段 –开始分析

  7. Has el option? – 是否有el选项 – 检查要挂到哪里

    没有. 调用$mount()方法

    有, 继续检查template选项

  • 接下来，练习：
  • 创建一个文件：components/Life.vue

<script>
export default {data(){return {msg: "hello, Vue"}},// 一. 初始化// new Vue()以后, vue内部给实例对象添加了一些属性和方法, data和methods初始化"之前"beforeCreate(){console.log("beforeCreate -- 执行");console.log(this.msg); // undefined，PS：data还没有初始化，所以是undefined},// data和methods初始化以后// 场景: 网络请求, 注册全局事件   ****created(){console.log("created -- 执行");console.log(this.msg); // hello, Vue}
}
</script>

App.vue - 引入使用

<template><div><h1>1. 生命周期</h1><Life></Life></div>
</template><script>
import Life from './components/Life'
export default {components: {Life}
}
</script>
  1. Vue实例从创建到编译模板执行了哪些钩子函数?

    1. beforeCreate / created
  2. created函数触发能获取data?
    1. 能获取data, 不能获取真实DOM（PS：此时只是实例化了Vue，此时界面还没有编译渲染）

1.3_挂载阶段

目标: 掌握挂载阶段2个钩子函数作用和执行时机

含义讲解:

  1. template选项检查

    有 - 编译template返回render渲染函数

    无 – 编译el选项对应标签作为template(要渲染的模板)

  2. 虚拟DOM挂载成真实DOM之前

  3. beforeMount – 生命周期钩子函数被执行

  4. Create … – 把虚拟DOM和渲染的数据一并挂到真实DOM上

  5. 真实DOM挂载完毕

  6. mounted – 生命周期钩子函数被执行

  • 接下来，开始练习：
  • 在components/Life.vue 中继续书写：
<template><div><p>学习生命周期 - 看控制台打印</p><p id="myP">{{ msg }}</p></div>
</template><script>
export default {// ...省略其他代码// 二. 挂载// 真实DOM挂载之前// 场景: 预处理data, 不会触发updated钩子函数（先了解，有印象即可）beforeMount(){console.log("beforeMount -- 执行");console.log(document.getElementById("myP")); // nullthis.msg = "重新值"},// 真实DOM挂载以后// 场景: 可以操作DOM****mounted(){console.log("mounted -- 执行");console.log(document.getElementById("myP")); // p}
}
</script>
  1. Vue实例从创建到显示都经历了哪些钩子函数?

    1. beforeCreate / created / beforeMount / mounted
  2. created函数里, 能获取真实DOM吗?
    1. 不能获取真实DOM
  3. 在什么钩子函数里可以获取真实DOM?
    1. mounted

1.4_更新阶段

目标: 掌握更新阶段2个钩子函数作用和执行时机

含义讲解:

  1. 当data里数据改变, 更新DOM之前

  2. beforeUpdate – 生命周期钩子函数被执行

  3. Virtual DOM…… – 虚拟DOM重新渲染, 打补丁到真实DOM

  4. updated – 生命周期钩子函数被执行

  5. 当有data数据改变 – 重复这个循环

  • 在components/Life.vue中继续书写：

  • 准备ul+li循环, 按钮添加元素, 触发data改变->导致更新周期开始

<template><div><p>学习生命周期 - 看控制台打印</p><p id="myP">{{ msg }}</p><ul id="myUL"><li v-for="(val, index) in arr" :key="index">{{ val }}</li></ul><button @click="arr.push(1000)">点击末尾加值</button></div>
</template><script>
export default {data(){return {msg: "hello, Vue",arr: [5, 8, 2, 1]}},// ...省略其他代码// 三. 更新// 前提: data数据改变才执行// 更新之前beforeUpdate(){console.log("beforeUpdate -- 执行");console.log(document.querySelectorAll("#myUL>li")[4]); // undefined，无法获取更新之后的dom},// 更新之后// 场景: 获取更新后的真实DOMupdated(){console.log("updated -- 执行");console.log(document.querySelectorAll("#myUL>li")[4]); // li}
}
</script>
  1. 什么时候执行updated钩子函数?

    1. 当数据发生变化并更新页面后
  2. 在哪可以获取更新后的DOM?
    1. 在updated钩子函数里

1.5_销毁阶段

目标: 掌握销毁阶段2个钩子函数作用和执行时机

含义讲解:

  1. 当$destroy()被调用 – 比如组件DOM被移除(例v-if)

  2. beforeDestroy – 生命周期钩子函数被执行

  3. 拆卸数据监视器、子组件和事件侦听器

  4. 实例销毁后, 最后触发一个钩子函数

  5. destroyed – 生命周期钩子函数被执行

<script>
export default {// ...省略其他代码// 四. 销毁// 前提: v-if="false" 销毁Vue实例// 场景: 移除全局事件, 移除当前组件, 计时器, 定时器, eventBus移除事件$off方法beforeDestroy(){// console.log('beforeDestroy -- 执行');clearInterval(this.timer)},//场景: 移除全局事件, 移除当前组件, 计时器, 定时器, eventBus移除事件$off方法destroyed(){// console.log("destroyed -- 执行");clearInterval(this.timer);console.log(this);// 在这里依然可以访问到this，此时thisvue对象还没有被销毁}
}
</script>

主要: App.vue - 点击按钮让Life组件从DOM上移除 -> 导致Life组件进入销毁阶段

<Life v-if="show"></Life>
<button @click="show = false">销毁组件</button><script>data(){return {show: true}},
</script>

一般在beforeDestroy/destroyed里做什么?

  1. 手动消除计时器/定时器/全局事件

2. axios

2.0_axios基本使用

  • [axios文档](http://www.axios-js.com/)
  • 特点
    • 支持客户端发送Ajax请求
    • 支持服务端Node.js发送请求
    • 支持Promise相关用法
    • 支持请求和响应的拦截器功能
    • 自动转换JSON数据
    • axios 底层还是原生js实现, 内部通过Promise封装的

安装命令

yarn add axios
  • axios的基本使用：语法
axios({method: '请求方式', // get获取 post添加 put修改 delete删除url: '请求地址',data: {    // 拼接到请求体的参数,  post请求的参数xxx: xxx,},params: {  // 拼接到请求行的参数, get请求的参数xxx: xxx }
}).then(res => {console.log(res.data) // 后台返回的结果
}).catch(err => {console.log(err) // 后台报错返回
})
  1. 什么是ajax?

    1. 一种前端异步请求后端的技术
  2. ajax原理?
    1. 浏览器window接口的XMLHttpRequest
  3. axios是什么?
    1. 基于原生ajax+Promise技术封装通用于前后端的请求库

2.1_axios基本使用-获取数据

目标: 调用文档最后_获取所有图书信息接口

  • 功能: 点击调用后台接口, 拿到所有数据 – 打印到控制台

  • 接口: 看本文档最后：接口文档

  • 引入: 下载axios, 引入后才能使用

  • 例子如下:

  • components/UseAxios.vue

<template><div><p>1. 获取所有图书信息</p><button @click="getAllFn">点击-查看控制台</button></div>
</template><script>
// 目标1: 获取所有图书信息
// 1. 下载axios
// 2. 引入axios
// 3. 发起axios请求
import axios from "axios";
export default {methods: {getAllFn() {axios({url: "http://xxxx",method: "GET", // 默认就是GET方式请求, 可以省略不写}).then((res) => {console.log(res);});//PS： axios()-原地得到Promise对象，Promise对象可以调用then方法},}
};
</script>
  1. axios如何发起一次get请求?

    1. 在method选项配置为get/ 也可以默认不写
  2. axios函数调用原地结果是什么?
    1. 是一个Promise对象
  3. 如何拿到Promise里ajax的成功或失败的结果?
    1. then() / catch()

2.2_axios基本使用-传参

目标: 调用接口-获取某本书籍信息

  • 功能: 点击调用后台接口, 查询用户想要的书籍信息 – 打印到控制台
  • 例子如下:
  • components/UseAxios.vue
<template><div><p>3. 新增图书信息</p><div><input type="text" placeholder="书名" v-model="bookObj.bookname"></div><div><input type="text" placeholder="作者" v-model="bookObj.author"></div><div><input type="text" placeholder="出版社" v-model="bookObj.publisher"></div><button @click="sendFn">发布</button></div>
</template><script>
import axios from "axios";
export default {data() {return {bName: "",bookObj: { // 参数名提前和后台的参数名对上-发送请求就不用再次对接了bookname: "",author: "",publisher: ""}};},methods: {// ...省略了其他代码sendFn(){axios({url: "http://xxxx",method: "POST",data: {appkey: "7250d3eb-18e1-41bc-8bb2-11483665535a",...this.bookObj //扩展运算符，等同于拆包，给对象里的key，value拆出来// 等同于下面// bookname: this.bookObj.bookname,// author: this.bookObj.author,// publisher: this.bookObj.publisher}}) }},
};
</script>
  1. post请求方式, 一般在哪里传递数据给后台?

    1. 请求体中
  2. axios哪个选项, 可以把参数自动装入到请求体中?
    1. data选项
  3. axios默认发给后台请求体数据格式是?
    1. json字符串格式

2.4_axios基本使用-全局配置

目标: 避免前缀基地址, 暴露在逻辑页面里, 统一设置

axios.defaults.baseURL = "http://xxxx."// 所有请求的url前置可以去掉, 请求时, axios会自动拼接baseURL的地址在前面
getAllFn() {axios({url: "/api",method: "GET", // 默认就是GET方式请求, 可以省略不写}).then((res) => {console.log(res);});// axios()-原地得到Promise对象
},
  1. 想学习axios更多的知识应该去哪里?

    1. 官网多阅读, 多看多总结, 任何库和插件都是
  2. axios如何配置基地址?
    1. axios.defaults.baseURL

3. nextTick和refs知识

3.0 $refs-获取DOM ***

目标: 利用 id 或 ref 可以用于获取 dom 元素

  • 虽然vue的语法尽量的避免Dom操作，但是有情况还得获取到dom元素对象

  • PS：

    • 给标签添加ref属性之后，vue内部会自动获取到此标签的dom对象，并放入$refs对象中
    • ref：reference，引用，在这里我们把引用，理解为对象即可。（引用对象，实例对象）
    • ref="myH1"相当于是给h1的对象起了个名字叫myH1
    • 所以，可以通过this.$refs.myH1找到h1标签

  • components/More.vue

<template><div><p>1. 获取原生DOM元素</p><h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1></div>
</template><script>
// 目标: 获取组件对象
// 1. 创建组件/引入组件/注册组件/使用组件
// 2. 组件起别名ref
// 3. 恰当时机, 获取组件对象
export default {mounted(){console.log(document.getElementById("h")); // h1console.log(this.$refs.myH); // h1}
}
</script><style></style>

总结: 通过id / ref, 都可以获取原生DOM标签

Vue中如何获取原生DOM呢?

  1. 用id属性或者ref属性都可以 this.$refs.ref属性值

3.1 $refs-获取组件对象

目标: 通过ref获取组件对象, 调用组件里方法

  • 具体操作：
  • 新建：components/Child/Demo.vue
<template><div><p>我是Demo组件</p></div>
</template><script>
export default {methods: {fn(){console.log("demo组件内的方法被调用了");}}
}
</script>

More.vue - 获取组件对象 - 调用组件方法

<template><div><p>1. 获取原生DOM元素</p><h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1><p>2. 获取组件对象 - 可调用组件内一切</p><Demo ref="de"></Demo></div>
</template><script>
// 目标: 获取组件对象
// 1. 创建组件/引入组件/注册组件/使用组件
// 2. 组件起别名ref
// 3. 恰当时机, 获取组件对象
import Demo from './Child/Demo'
export default {mounted(){console.log(document.getElementById("h")); // h1console.log(this.$refs.myH); // h1let demoObj = this.$refs.de;demoObj.fn()},components: {Demo}
}
</script>

总结: ref定义值, 通过$refs.值 来获取组件对象, 就能继续调用组件内的变量
PS：

  1. let和var是声明变量的,const是声明常量的
  2. let和const不存在变量提升
  3. let和const不允许重复声明

如何获取组件对象呢?

  • 目标组件添加ref属性
  • this.$refs.名字获取组件对象

拿到组件对象能做什么?

  • 调用组件里的属性/方法

3.2 $nextTick使用

目标: 点击修改data里的数据，立马通过DOM元素获取修改后的内容

  • 具体操作：
  • components/Move.vue
<template><div><p>1. 获取原生DOM元素</p><h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1><p>2. 获取组件对象 - 可调用组件内一切</p><Demo ref="de"></Demo><p>3. vue更新DOM是异步的</p><p ref="myP">{{ count }}</p><button @click="btn">点击count+1, 马上提取p标签内容</button></div>
</template><script>
// 目标: 获取组件对象
// 1. 创建组件/引入组件/注册组件/使用组件
// 2. 组件起别名ref
// 3. 恰当时机, 获取组件对象
import Demo from './Child/Demo'
export default {mounted(){console.log(document.getElementById("h")); // h1console.log(this.$refs.myH); // h1let demoObj = this.$refs.de;demoObj.fn()},components: {Demo},data(){return {count: 0}},methods: {btn(){this.count++; // vue监测数据更新, 开启一个DOM更新队列(异步任务)console.log(this.$refs.myP.innerHTML); // 0// 原因: Vue更新DOM异步// 解决: this.$nextTick()// 过程: DOM更新完会挨个触发$nextTick里的函数体this.$nextTick(() => {console.log(this.$refs.myP.innerHTML); // 1})}}
}
</script>

总结: 因为DOM更新是异步的

  1. data改变更新DOM是同步还是异步的?

    1. 异步
  2. 我们可以在哪里访问到更新后的DOM呢?
    1. this.$nextTick里的函数体
    2. updated生命周期钩子函数

3.3 $nextTick使用场景

目标: 点击搜索按钮自身隐藏，出现输入框并马上处于激活状态

  • 注意：一定要用v-if来写，保证DOM异步更新前获取不到输入框，提醒$nextTick价值
  • 如果使用v-show，那么v-show控制的标签，在界面加载的时候已经在dom上了，只是控制显示隐藏
  • 控制显示隐藏的速度是很快的，v-if是控制标签，挂载到dom并且显示，速度比较慢
  • 所以，v-if才会有延迟的效果，我们才需要使用$nextTick
  • v-show，也得通过$nextTick来等待
  • 具体操作：
  • 新建：components/Tick.vue
<template><div><input ref="myInp" type="text" placeholder="这是一个输入框" v-if="isShow"><button v-else @click="btn">点击我进行搜索</button></div>
</template><script>
// 目标: 点按钮(消失) - 输入框出现并聚焦
// 1. 获取到输入框
// 2. 输入框调用事件方法focus()达到聚焦行为
export default {data(){return {isShow: false}},methods: {//注意函数内使用await，需要添加asyncasync btn(){this.isShow = true;// this.$refs.myInp.focus() //PS：会报错，myInp是undefined// 原因: data变化更新DOM是异步的// 输入框还没有挂载到真实DOM上// 解决:// this.$nextTick(() => {//     this.$refs.myInp.focus()// })// 扩展: await取代回调函数// $nextTick()原地返回Promise对象await this.$nextTick() //等待执行完毕之后，再获取焦点this.$refs.myInp.focus()}}
}
</script>
  1. $nextTick函数原地返回什么?

    1. Promise对象
  2. 如何在JS中主动触发标签的事件呢?
    1. 获取到DOM对象, 调用事件方法

3.4 组件name属性使用

目标: 可以用组件的name属性值, 来注册组件名字

  • PS:

  • 之前注册组件的时候，：前边的组件名是我们自己随便写的，现在我们想用人家自己的名字

  • ComName.name即为：“ComNameHaHa”

  • 问题: 组件名不是可以随便写的?

  • 答案: 我们封装的组件-可以自己定义name属性组件名-让使用者有个统一的前缀风格

  • 具体操作：

  • 新建：components/Com.vue

<template><div><p>我是一个Com组件</p></div>
</template><script>
export default {name: "ComNameHaHa" // 注册时可以定义自己的名字
}
</script>

App.vue - 注册和使用

<template><div><h1>1. 生命周期</h1><Life v-if="show"></Life><button @click="show = false">销毁组件</button><hr><h1>2. axios使用</h1><UseAxios></UseAxios><hr><h1>3. $refs的使用</h1><More></More><hr><h1>4. $nextTick使用场景</h1><Tick></Tick><hr><h1>5. 组件对象里name属性</h1><ComNameHaHa></ComNameHaHa></div>
</template><script>
import Life from './components/Life'
import UseAxios from './components/UseAxios'
import More from './components/More'
import Tick from './components/Tick'
import Com from './components/Com'
export default {data(){return {show: true}},components: {Life,UseAxios,More,Tick,//以下注册写法都可以// Tick: Tick,//"Tick": Tick, //将vetur禁用掉们才能添加成功[Com.name]: Com // 对象里的key是变量的话[]属性名表达式//相当于：//"ComNameHaHa": Com}
}
</script>
  1. 组件使用分为几步?

    1. 创建组件/ 引入组件/ 注册组件/ 使用组件
  2. 注册组件名还可以用什么?
    1. 用组件对象的name属性的值

今日总结

vue的生命周期哪4个阶段, 哪8个方法（created ,mounted）

axios是什么, 底层是什么, 具体如何使用

axios返回的是什么, 如何接收结果

知道ref和$refs使用和作用以及场景®

知道$nextTick的作用

面试题

1、Vue 的 nextTick 的原理是什么? （高薪常问）

\1. 为什么需要 nextTick ，Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。\2. 理解原理前的准备 首先需要知道事件循环中宏任务和微任务这两个概念,常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering 常见的微任务有 process.nextTick(Nodejs),Promise.then(), MutationObserver;\3. 理解 nextTick 的原理正是 vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。如果大家看过这部分的源码，会发现其中做了很多 isNative()的判断，因为这里还存在兼容性优雅降级的问题。可见 Vue 开发团队的深思熟虑，对性能的良苦用心。

2、vue生命周期总共分为几个阶段？（必会）

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

1**）beforeCreate**

在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

2**）created**

在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)， 属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

3**）beforeMount**

在挂载开始之前被调用：相关的 render 函数首次被调用。

4**）mounted**

el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。

5**）beforeUpdate**

数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。

6**）updated**

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

7**）activated**

keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用。

8**）deactivated**

keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用。

9**）beforeDestroy**

实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被调用。

10**）destroyed**

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

11**）errorCaptured（2.5.0+ 新增）**

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

3、第一次加载页面会触发哪几个钩子函数？（必会）

当页面第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子函数

Vue基础学习笔记Day05_生命周期_axios相关推荐

  1. day4 vue 学习笔记 组件 生命周期 数据共享 数组常用方法

    系列文章目录 day1学习vue2笔记 vue指令 day2 学习vue2 笔记 过滤器 侦听器 计算属性 axios day3 vue2 学习笔记 vue组件 day4 vue 学习笔记 组件 生命 ...

  2. Vue基础学习笔记Day06_动态组件_插槽_自定义指令

    今日目标: 能够了解组件进阶知识 能够掌握自定义指令创建和使用 学习内容: 学习目录: 组件进阶 自定义指令 今日总结 面试题 知识点自测 组件创建, 注册和使用 - 伸手就来特别熟练 指令的作用 1 ...

  3. Gavin小黑屋——Vue 学习笔记 ：生命周期特点（先渲染HTML标签再渲染数据）

    Vue基础   生命周期特点(先渲染HTML标签再渲染数据) 目录 Vue基础   生命周期特点(先渲染HTML标签再渲染数据) 一.Vue生命周期 Vue 的生命周期总共分为8个阶段:创建前/后,载 ...

  4. 前端学习笔记（五）：VUE基础学习笔记

    文章目录 初识VUE(项目搭建) @vue/cli 创建项目 @vue/cli 自定义配置 vue指令 基础指令 虚拟DOM与key 过滤器 计算属性 侦听器 VUE组件 创建使用 组件通信 生命周期 ...

  5. IOS学习笔记——ViewController生命周期详解

    在我之前的学习笔记中讨论过ViewController,过了这么久,对它也有了新的认识和体会,ViewController是我们在开发过程中碰到最多的朋友,今天就来好好认识一下它.ViewContro ...

  6. Vue基础进阶 之 实例方法--生命周期

    在上一篇博客中我们知道生命周期的方法: 生命周期: vm.$mount:手动挂载Vue实例: vm.$destroy:销毁Vue实例,清理数据绑定,移除事件监听: vm.$nextTick:将方法中的 ...

  7. Vue基础学习笔记Day02_vue-cli脚手架_基础API

    今日目标: 能够理解vue的概念和作用 能够理解vuecli脚手架工程化开发 能够使用vue指令 学习内容: 学习目录: Vue基本概念 @vue/cli脚手架 Vue指令 今日总结 面试题 铺垫 必 ...

  8. vue基础学习笔记（五）

    文章目录 0. vue相关知识点总结 1. 准备开始 1.1学员反馈 1.2 复习 1.3 今日重点 2. 相关知识总结 2.1 独立构建 vs 运行时构建 2.2 计算属性 2.3 嵌套路由 2.4 ...

  9. react学习笔记(8)生命周期回顾与再认识

    生命周期 生命周期是一个组件从创建到销毁的过程. 当组建实例被创建并且插入到DOM中,需要调用的函数,就是生命周期函数. 也就是说,组件加载完成前后.组件更新数据.组件销毁,所触发的一系列的方法. 1 ...

  10. android学习笔记---36_Activity生命周期

    36_Activity生命周期 ----------------------------- 1.Activity生命周期,用于activity在运行时候受到一些突然事件的影响   ,例如:正在使用一个 ...

最新文章

  1. lstm timestep一般是多少_请问rnn和lstm中batchsize和timestep的区别是什么？
  2. chrome无法登陆账号，显示操作超时的解决方案
  3. Python中的join()函数的用法
  4. 【终结版】C#常用函数和方法集汇总
  5. datatables表格行内编辑的实现
  6. Tomcat9.0部署iot.war（环境mysql8.0，centos7.2）
  7. OLAP-Kylin-大数据Week13-DAY4-Kylin
  8. html音乐静音代码,HTML Audio muted用法及代码示例
  9. 点钞机语音怎么打开_我有这些语音识别指令，你都知道吗？
  10. C程序设计案例（牛顿迭代法求高次方程的根）
  11. 元启发式算法之一：蝙蝠算法BA
  12. MEMS传感市场，美/日/德企占主导地位
  13. Awesome Competitive Programming
  14. STL 容器详解——string 类
  15. JS实现记住用户密码
  16. java获取text plain_获取text/plain格式http请求中的数据
  17. C语言 利用函数计算素数个数并求和
  18. 有趣的排序算法——Monkey King排序 详细介绍
  19. android 对话框 美化,Android修改Dialog样式
  20. 【20】WAV格式歌曲

热门文章

  1. Ubuntu18.04 打不开系统蓝牙适配器，也连接不上任何蓝牙设备Bug解决方案
  2. Windows10系统封装
  3. 一个完整的计算机系统有哪五大组成部分,一个完整的计算机系统由哪些部份组成...
  4. Java语言的特点特性
  5. ftp服务器项目,ftp服务器项目手册.doc
  6. 利用python实现简单的爬虫，爬百度文库相关词条信息
  7. nginx匹配规则详解
  8. 阿里、美团、Oracle等大厂的Java虚拟机面试题集锦
  9. 元宇宙通证-十、互联网发展史全景图
  10. 功不唐捐 玉汝于成---贪心算法终结