生命周期鉤子小練習(xí)

<template>
  <div>
    <h1>水果列表</h1>
    <p v-if="body">Loading...</p>
    <ul v-if="!body">
      <li v-for="(fruit,index) of fruits" :key="index">
        {{fruit}}
      </li>
    </ul>
  </div>
</template>

<script>
    export default {
      created() {
        this.getData()
      },
      data(){
        return{
          fruits:[],
          body:true //定義一個(gè)變量，布爾值
        }
      },
      methods:{
        getData(){
          setTimeout(()=>{
            this.fruits =["香蕉","蘋果","鴨梨"];
            this.body = false;
          },2000)
        }
      }

    }
</script>

<style scoped>

</style>

2秒出現(xiàn)的結(jié)果

1具名插槽：組件

可以在自定義的組件里寫多個(gè)插槽，然后通過命名的方式，來區(qū)別不同的插槽顯示不同的內(nèi)容。

子組件

<template>
  <div>
    <button>
      <slot></slot>
    </button>
    <div class="header">
      <slot name="body"></slot>
    </div>
    <div class="content">
      <slot name="kitty"></slot>
    </div>
    <div class="footer">
      <slot name="apply"></slot>
    </div>
  </div>

</template>

<script>
    export default {
        name: "cc"
    }
</script>

<style scoped>

</style>

父組件

<template>
  <div>
    <cc>
      <template v-slot:body></template>
      <h1>通過插槽可以讓自定義的組件變得更靈活</h1>
      <template v-slot:kitty></template>
       <h1>增強(qiáng)組件的擴(kuò)展</h1>
      <template v-slot:apply></template>
      <h1>hello world</h1>
    </cc>
  </div>
</template>
<script>
  import cc from "../components/cc";
    export default {
      components:{cc}
    }
</script>

<style scoped>

</style>

運(yùn)行結(jié)果

插槽作用：

1.創(chuàng)建更靈活，易擴(kuò)展組件：自定義button，自定義table等
2.開發(fā)或使用ul庫，

DOM操作

了解獲取DOM方式

<template>
  <div>
    <div id="box">hello world</div>
</div>
</template>

<script>
export default {
//獲取DOM方式
  mounted() {
        let box =document.querySelector("#box");
        let style = window.getComputedStyle(box);
        console.log(style.height)
      }
    };
</script>

<style scoped>
  div{
    width: 400px;
    height:400px;
    background-color:olivedrab;
  }

</style>

Vue提供獲取方法

<template>
  <div>
    <div ref="box">hello world</div>
</div>
</template>

<script>
export default {
//獲取DOM方式
  mounted() {
        let box = this.$refs.box
        let style = window.getComputedStyle(box);
        console.log(style.height)
      }
    };
</script>

<style scoped>
  div{
    width: 400px;
    height:400px;
    background-color:olivedrab;
  }
</style>

png

過濾器

<template>
  <div>
    <p>過濾器練習(xí),把日期轉(zhuǎn)換成xx年xx月xx日形式</p>
    <h1>{{date | dateFormate}}</h1>
    <h1>{{date1 | dateFormate}}</h1>

  </div>
</template>

<script>
    export default {
     //在data同級定義一個(gè)過濾器
      filters:{
        dateFormate(value){
          let date = new Date(value);
          let year = date.setFullYear();
          let month = date.getMonth()+1;
          let d = date.getDate();
           return `${year}年${month}月$u0z1t8os日`
        }
      },
      data(){
        return{
          date:"2020-10-21",
          date1:"2019-10-22"
        }
      }

    }
</script>

<style scoped>


</style>