文章目录
- 一、在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
// 请求方式：get
const app = new Vue({
el: '#app',
data: {
list: []
},
async created() {
// 1. 发送请求获取数据
const res = await axios.get('http://hmajax.itheima.net/api/news')
// 2. 更新到 list 中，用于页面渲染 v-for
this.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>
