版权声明：转载-复用,请联系博主微信:qiang510939237 https://blog.csdn.net/qiang510939237/article/details/89391430
一. ES6 中的默认值表示方式:
test()
function test(num = 20) {
// es5
// num = num || 10
// es6
// (num = 20)
console.log(num)
}
===================================================================================================
二. 生命周期函数介绍:
生命周期 => 三个阶段
第一个阶段 : 挂载阶段 (进入页面阶段)
第二个阶段 : 更新阶段
第三个阶段 : 销毁阶段(卸载阶段)
- 简单说 : 一个组件(实例) 从开始到最后消灭所经历的各种状态,就是一个组件(实例)的生命周期
- 生命周期钩子函数的定义 : 从组件被创建,到组件挂在到页面上运行,再到页面关闭组件被销毁,这三个阶段总是伴随着组件各种的事件,这些事件,统称为组件的生命周期函数 (简称 : 钩子函数)
- 开发人员可以通过 vue 提供的钩子函数,让我们写的代码参与到 vue 的生命周期里面来,让我们的代码在合适的阶段起到相应的作用
<div id="app">
<h1>{{ msg }}</h1>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
// template: `<p>这是一个p</p>`,
data: {
msg: '测试信息',
timerId: 0
},
methods: {
fn() {}
},
// 1. 数据响应式之前调用
// 特点 : 无法获取 data里的数据 无法获取 methods 里面的事件
// 使用场景 : 不多
beforeCreate() {
console.warn('beforeCreate', this.msg, this.fn)
},
// 2. 数据响应式之后调用 (超级重要)
// 特点 : 可以获取data里的数据,和 methods里面的事件
// 场景 : 1. 发送ajax请求 2.操作data里的数据 3. 获取本地数据
// (操作数据)
created() {
console.warn('created', this.msg, this.fn)
// 调用请求数据的方法 获取本地 数据 操作data里数据
// 开启一个定时器
this.timerId = setInterval(() => {
console.log('好嗨哟!')
}, 500)
},
// 3. 渲染DOM之前
// 特点 : <h1>{{ msg }}</h1>
beforeMount() {
console.warn('beforeMount', document.querySelector('h1'))
},
// 4. 渲染DOM之后
// 特点 : <h1>测试数据</h1>
// 场景 : 1.发送ajax 2-操作DOM (操作DOM)
mounted() {
console.warn('mounted', document.querySelector('h1'))
},
// -------------------------------------第二个阶段----------------------
// 5. 更新之前调用
// 特点 : 更新之前的数据 => 测试信息
beforeUpdate() {
console.warn('beforeUpdate', document.querySelector('h1').innerText)
},
// 6. 更新之后调用
// 特点 : 更新之后的数据 => 测试信息123
updated() {
console.warn('updated', document.querySelector('h1').innerText)
},
// ---------------------------------销毁阶段---------
// 7. 销毁之前调用
beforeDestroy() {
console.warn('beforeDestroy')
clearInterval(this.timerId)
console.log('寡人已经销毁了定时器')
},
// 8. 销毁之后调用
destroyed() {
console.warn('destroyed')
}
})
// 手动使用代码指定边界
// vm.$mount('#app')
</script>
第一个阶段 : 挂载阶段
第一个小阶段 : 数据响应式阶段 ==> msg : 测试信息
- beforeCreate()
- 数据响应式之前调用
- 特点 : 无法获取 data 里的数据 和 methods 的事件
- created() ( ★ )
- 数据响应式之后调用
- 特点 : 可以获取 data 里的数据 和 methods 的事件
- 场景 : 1-发送 ajax 2-操作 data 里的数据 3- 获取本地数据 (操作数据)
第二个小阶段 : 找模板 ==> <h1>{{ msg }}</h1>
- 询问有没有`el` => 有 => 进入 下一个阶段
=> 没有 => vm.\$mount('#app') ==> 进入下一个阶段
- 询问有没有`template` => 没有 => el.outerHTML 作为模板进行编译
=> 有 => 把 `template里的内容` 作为模板进行编译
- template > el
第三个小阶段 : 渲染 DOM ==> <h1>测试数据</h1>
- beforeMount()
- 渲染 DOM 之前调用
- <h1>{{ msg }}</h1>
- mounted() ( ★ )
- 渲染 DOM 之后 调用
- <h1>测试数据</h1>
- 场景: 1-发送 ajax 2-操作 DOM (操作 DOM)
第二个阶段 : 更新阶段
- beforeUpdate()
- 更新之前调用
- updated()
- 更新之后调用
第三个阶段 : 销毁阶段
- beforeDestroy()
- 销毁之前调用
- 场景: 手动清除我们自己添加的东西(定时器)
- destroyed()
- 销毁之后调用
注意:
1. 注意 : vue 在执行过程中 会自动调用 生命周期钩子函数, 我们只需要提供这些钩子函数即可
2. 注意 : 钩子函数的名称都是 vue 中规定好的!
三. 使用接口的形式发送数据
json-server 提供假数据接口
-
json-server 作用 : 根据指定的 JSON 文件, 提供假数据接口
-
使用步骤
1. 全局安装 json-server :npm i -g json-server
2. 准备一个data.json数据 (对象)
3. 执行 :json-server data.json(开启一个服务器,提供 假数据接口)json数据可以参考 : { "list": [ { "id": 1, "name": "吃饭", "age": 20 } ] } -
REST API 格式
1. 查询 : GET 2. 添加 : POST 3. 删除 : DELETE 4. 更新 : PUT 或者 PATCH(打补丁) -
具体接口
1. 查询全部数据 http://localhost:3000/list 查询指定数据 http://localhost:3000/list/2 2. 添加一个对象 //localhost:3000/list POST id 会自动帮我们添加 3. 更新数据 http://localhost:3000/list/3 PUT 或者 PATCH PUT 需要提供该对象的所有数据 PATCH 只需要提供要修改的数据即可 4. 删除数据 http://localhost:3000/list/3 DELETE -
可以借助 postman 测试接口;
四 : axios 发送请求 (重点掌握)
使用说明: https://github.com/axios/axios
-
作用:
一个专门用来发送 ajax 请求的库, 可以在浏览器或者 node.js 中使用 Promise based HTTP client for the browser and node.js 以Promise为基础的HTTP客户端，适用于：浏览器和node.js 封装ajax，用来发送请求，异步获取数据 -
使用步骤:
2.1. 本地安装 axios : `npm i axios` 2.2. 导入 axios 2.3. 使用