生命周期钩子小练习
<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>
