vue基础知识面试题（二）
2020-02-28 本文已影响0人
五四青年_4e7d
ref获取元素的内容：
//html:
<div class="" ref="mySy">这是元素内容</div>
<button @click="getElement">获取</button>
//js:
methods: {
getElement(){
console.log(this.$refs.mySy.innerText)
}
},
axios发送get请求：
Vue.prototype.$http = axios
const vm = new Vue({
el:'#app',
data:{},
methods:{
info(){
this.$http.get('https://api.apiopen.top/EmailSearch?number=1012002').then(res=>{
console.log(res)
})
}
}
})
挂载公共请求头
axios.defaults.baseURL = 'https://www.apiopen.top'
Vue.prototype.$http = axios
const vm = new Vue({
el:'#app',
data:{
arr:[]
},
created(){
this.info()
},
methods:{
async info(){
const {data:res} = await this.$http.get('/novelApi')
console.log(res)
this.arr = res.data
console.log(this.arr)
}
},
})
axios的get请求和post请求：
<body>
<div id="app">
<button @click="infoGet()">get按钮</button>
<button @click="infoPost()">post按钮</button>
<ul>
<li v-for="(item,i) in arr" :key="item.id" >
<span>{{item.album_title}}</span>
<img :src="item.pic_big" :alt="item.language">
</li>
</ul>
</div>
</body>
</html>
<script>
Vue.prototype.$http = axios
const vm = new Vue({
el:'#app',
data:{
arr:[],
page:3,
type:3,
},
methods:{
async infoGet(){
const {data:res} = await this.$http.get('https://api.apiopen.top/musicRankingsDetails?type=2')
console.log(res)
this.arr = res.result
console.log(this.arr)
},
async infoPost(){
const {data:res} = await this.$http.post('https://www.apiopen.top/satinGodApi?type=+'+this.type+'+&page='+this.page)
console.log(res)
}
}
})
