美文网首页
vue基础知识面试题(二)

vue基础知识面试题(二)

作者: 五四青年_4e7d | 来源:发表于2020-02-28 23:44 被阅读0次

    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)
                }
            }
        })
    
    

    相关文章

      网友评论

          本文标题:vue基础知识面试题(二)

          本文链接:https://www.haomeiwen.com/subject/pyqjhhtx.html