生命周期钩子小练习

<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 //定义一个变量，布尔值
        }
      },
      methods:{
        getData(){
          setTimeout(()=>{
            this.fruits =["香蕉","苹果","鸭梨"];
            this.body = false;
          },2000)
        }
      }

    }
</script>

<style scoped>

</style>

2秒出现的结果

1具名插槽：组件

可以在自定义的组件里写多个插槽，然后通过命名的方式，来区别不同的插槽显示不同的内容。

子组件

<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>增强组件的扩展</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>

运行结果

插槽作用：

1.创建更灵活，易扩展组件：自定义button，自定义table等
2.开发或使用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>过滤器练习,把日期转换成xx年xx月xx日形式</p>
    <h1>{{date | dateFormate}}</h1>
    <h1>{{date1 | dateFormate}}</h1>

  </div>
</template>

<script>
    export default {
     //在data同级定义一个过滤器
      filters:{
        dateFormate(value){
          let date = new Date(value);
          let year = date.setFullYear();
          let month = date.getMonth()+1;
          let d = date.getDate();
           return `${year}年${month}月${d}日`
        }
      },
      data(){
        return{
          date:"2020-10-21",
          date1:"2019-10-22"
        }
      }

    }
</script>

<style scoped>


</style>