当前位置：首页 > news >正文

Vue2+3 —— 下

news 2024/11/14 23:46:21

Day3

Vue生命周期和生命周期的四个阶段

Vue生命周期的四个阶段：

从创建到销毁的整个阶段中，Vue提供好了一系列函数（8个）；

并且在经历生命周期的对应阶段时，会自动帮你调用这些函数

这8个函数称为生命周期钩子

生命周期钩子：一些在Vue生命周期过程中，会被自动调用的一系列函数

响应数据准备好之前有一个钩子:beforeCreate，响应数据准备好之后有一个钩子:created；

在created(){}函数里就可以发送初始化渲染的请求了

模板渲染好之前一个钩子:beforeMount，模板渲染好之后一个钩子:mounted

在mounted(){}函数里就可以操作dom了

... ...

以计数器为例：

我们先看前两个阶段

<!DOCTYPE html>
<html lang="en">
<head></head>
<body><div id="app"><h3>{{ title }}</h3><div><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100,title: '计数器'},//1.创建阶段beforeCreate(){console.log('响应式准备好之前',this.count)//undefined},created(){console.log('响应式准备好之后',this.count)//100},//2.挂载阶段// <h3>{{ title }}</h3>beforeMount(){console.log('模板渲染好之前',document.querySelector('h3').innerHTML)//{{ title }}},mounted(){console.log('模板渲染好之后',document.querySelector('h3').innerHTML)//计数器}})</script>
</body>
</html>

再来看后两个阶段；需要修改数据才能触发

<!DOCTYPE html>
<html lang="en">
<head></head>
<body><div id="app"><h3>{{ title }}</h3><div><button @click="count--">-</button><span>{{ count }}</span><button @click="count++">+</button></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {count: 100,title: '计数器'},//1.创建阶段beforeCreate(){console.log('响应式准备好之前',this.count)//undefined},created(){console.log('响应式准备好之后',this.count)//100},//2.挂载阶段// <h3>{{ title }}</h3>beforeMount(){console.log('模板渲染好之前',document.querySelector('h3').innerHTML)//{{ title }}},mounted(){console.log('模板渲染好之后',document.querySelector('h3').innerHTML)//计数器},//3.更新阶段// <span>{{ count }}</span>beforeUpdate(){console.log('数据修改了，但视图还没更新',document.querySelector('span').innerHTML)//100},updated(){console.log('数据修改了，视图已经更新',document.querySelector('span').innerHTML)//101},//4.销毁阶段// app.$destroy() 用于卸载当前实例beforeDestroy(){console.log('卸载前')},destroyed(){console.log('卸载后')//再点击+-；count不会有变化//以前已经渲染完的dom还在；但跟vue相关的绑定取消了}})</script>
</body>
</html>

created应用 —— 新闻列表

首先，要发送初始化渲染请求，要在created这个钩子里完成

<script>// 接口地址：http://hmajax.itheima.net/api/news// 请求方式：getconst app = new Vue({el: '#app',data: {list: []},async created () {// 1. 发送请求获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')console.log(res)}})
</script>

this.list = res.data.data

<!DOCTYPE html>
<html lang="en">
<head><style>* {margin: 0;padding: 0;list-style: none;}.news {display: flex;height: 120px;width: 600px;margin: 0 auto;padding: 20px 0;cursor: pointer;}.news .left {flex: 1;display: flex;flex-direction: column;justify-content: space-between;padding-right: 10px;}.news .left .title {font-size: 20px;}.news .left .info {color: #999999;}.news .left .info span {margin-right: 20px;}.news .right {width: 160px;height: 120px;}.news .right img {width: 100%;height: 100%;object-fit: cover;}</style>
</head>
<body><div id="app"><ul><li v-for="(item, index) in list" :key="item.id" class="news"><div class="left"><div class="title">{{ item.title }}</div><div class="info"><span>{{ item.source }}</span><span>{{ item.time }}</span></div></div><div class="right"><img v-bind:src="item.img" alt=""></div></li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script><script>// 接口地址：http://hmajax.itheima.net/api/news// 请求方式：getconst app = new Vue({el: '#app',data: {list: []},async created () {// 1. 发送请求获取数据const res = await axios.get('http://hmajax.itheima.net/api/news')// console.log(res)// 2. 更新到 list 中，用于页面渲染 v-forthis.list = res.data.data}})</script>
</body>
</html>

mounted应用 —— 输入框获取焦点

要获取输入框，操作Dom；那就需要在mounted这个钩子里完成


<!DOCTYPE html>
<html lang="zh-CN"><head><!-- 初始化样式 --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset.css@2.0.2/reset.min.css"><!-- 核心样式 --><style>html,body {height: 100%;}.search-container {position: absolute;top: 30%;left: 50%;transform: translate(-50%, -50%);text-align: center;}.search-container .search-box {display: flex;}.search-container img {margin-bottom: 30px;}.search-container .search-box input {width: 512px;height: 16px;padding: 12px 16px;font-size: 16px;margin: 0;vertical-align: top;outline: 0;box-shadow: none;border-radius: 10px 0 0 10px;border: 2px solid #c4c7ce;background: #fff;color: #222;overflow: hidden;box-sizing: content-box;-webkit-tap-highlight-color: transparent;}.search-container .search-box button {cursor: pointer;width: 112px;height: 44px;line-height: 41px;line-height: 42px;background-color: #ad2a27;border-radius: 0 10px 10px 0;font-size: 17px;box-shadow: none;font-weight: 400;border: 0;outline: 0;letter-spacing: normal;color: white;}body {background: no-repeat center /cover;background-color: #edf0f5;}</style>
</head><body>
<div class="container" id="app"><div class="search-container"><img src="https://www.itheima.com/images/logo.png" alt=""><div class="search-box"><input type="text" v-model="words" id="inp"><button>搜索一下</button></div></div>
</div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>const app = new Vue({el: '#app',data: {words: ''},// 让input框获取焦点 inp.focus()mounted () {document.querySelector('#inp').focus()}})
</script></body></html>

查看全文

http://www.mrgr.cn/news/69744.html