<!--這是模板代碼，父級用的v-else-if，與父級同級的還有兩個盒子，分別用v-if和v-else控制著-->
<div ref="articleContent" class="right" v-html="articles.content"></div>
 
 
 
//這是script代碼
 
 mounted() {
    
        this.getArticlesDetail()
    
  },
  methods: {
   async getArticlesDetail(){
        try {
            
            const {data}= await getArticlesDetail(this.articleId);
            /* vue數(shù)據(jù)更新是異步的 ,在這一步數(shù)據(jù)加載出來，但是組件還沒沒有渲染出來，因為在組件中有個v-if判斷，在數(shù)據(jù)加載出來之后，才能渲染出來組件*/
            /* console.log(this.$refs.articleContent) */
            /* 所以要放在定時器是異步執(zhí)行，試了用this.$nextTick，不行 */
          /*  */
            this.articles = data
            /* 只能用setitmeout是因為數(shù)據(jù)在在下個Event Loop中也出不來，這是因為v-if中的條件在下次事件循環(huán)中也不一定能夠滿足。但是setTimeout的執(zhí)行時機是沒有辦法確定前邊的任務到底需要多長時間執(zhí)行完 */
              this.$nextTick(() => {
                console.log(this.$refs.articleContent)
            });
            console.log(data)
        } catch (error) {
            if(error.response && error.response.status===404){
                this.errStatus=404;
                this.$toast('服務器錯誤')
            }
            console.log(error)
            this.$toast('請求失敗，請稍后再試')
        }
        /* 無論成功失敗都要調(diào)用loading為false，關(guān)閉它 */
        this.loading=false
    }
  },

  
<!--這是模板代碼，父級用的v-else-if，與父級同級的還有兩個盒子，分別用v-if和v-else控制著-->
<div ref="articleContent" class="right" v-html="articles.content"></div>
 
 
 
//這是script代碼
 
 mounted() {
    
        this.getArticlesDetail()
    
  },
  methods: {
   async getArticlesDetail(){
        try {
            
            const {data}= await getArticlesDetail(this.articleId);
            /* vue數(shù)據(jù)更新是異步的 ,在這一步數(shù)據(jù)加載出來，但是組件還沒沒有渲染出來，因為在組件中有個v-if判斷，在數(shù)據(jù)加載出來之后，才能渲染出來組件*/
            /* console.log(this.$refs.articleContent) */
            /* 所以要放在定時器是異步執(zhí)行，試了用this.$nextTick，不行 */
          /*  */
            this.articles = data
            /* 只能用setitmeout是因為數(shù)據(jù)在在下個Event Loop中也出不來，這是因為v-if中的條件在下次事件循環(huán)中也不一定能夠滿足。但是setTimeout的執(zhí)行時機是沒有辦法確定前邊的任務到底需要多長時間執(zhí)行完 */
              setTimeout(() => {
                console.log(this.$refs.articleContent)
            });
            console.log(data)
        } catch (error) {
            if(error.response && error.response.status===404){
                this.errStatus=404;
                this.$toast('服務器錯誤')
            }
            console.log(error)
            this.$toast('請求失敗，請稍后再試')
        }
        /* 無論成功失敗都要調(diào)用loading為false，關(guān)閉它 */
        this.loading=false
    }
  },

<template>
  <div>
      <input ref="myInp" type="text" placeholder="這是一個輸入框" v-if="isShow">
      <button v-else @click="btn">點擊我進行搜索</button>
  </div>
</template>
 
<script>
 
// 獲取到輸入框
// 輸入框調(diào)用事件方法focus()達到聚焦行為
export default {
    data(){
        return {
            isShow: false
        }
    },
    methods: {
        btn(){
            this.isShow = true;
 
            this.$refs.myInp.focus(); // 沒有效果
            
            // 原因: data變化更新DOM是異步的
            // 輸入框還沒有掛載到真實DOM上
            // 解決:
            // this.$nextTick(() => {
            //     this.$refs.myInp.focus()
            // })
        }
        //async btn(){  
        //    this.isShow = true;
        //    
        //    // 擴展: await取代回調(diào)函數(shù)
        //    // $nextTick()原地返回Promise對象
        //    await this.$nextTick()
        //    this.$refs.myInp.focus()
        //}
    },
     //擴展
    updated(){  
     // this.$refs.myInp.focus()
    
    }
}
</script>