生命周期钩子小案例

本文主要是介绍生命周期钩子小案例，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

一、在created中发送数据
二、在mounted中获取焦点

一、在created中发送数据

<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 :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')// 2. 更新到 list 中，用于页面渲染 v-forthis.list = res.data.data}})</script>
</body>

二、在mounted中获取焦点

这里注意，获取到的输入框和我们在html里面写的输入框是不一样的。这是因为在模版阶段带有v-model，而打印出来的是已经被Vue解析了的

<body><div class="container" id="app"><div class="search-container"><img src="https://www.itheima.com/images/logo.png" alt=""><div class="search-box"><!-- 在这里直接写autofocus没有用，在Vue当中，整个DOM都属于模版部分，底下写了之后，会根据底下的数据动态渲染。所以这一部分的数据是会被替换的，就算在这里写了autofocus也没用，一旦它被替换之后，它的自动获取焦点也就没了--><input autofocus 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: ''},// 核心思路：// 1. 等input框渲染出来 mounted 钩子// 2. 让input框获取焦点 inp.focus()mounted() {// 原生DOM的方法document.querySelector('#inp').focus()}})</script>
</body>