vue框架之swiper、自定义指令、过滤器及单文件组件等相关内容-114
1 生命周期
1 mounted用的最多：向后端发送请求，定时器初始化
2 destroyed：组件销毁--->给组件写一个定时器-->组件销毁，定时器清除
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<title>Title</title>
</head>
<body>
<div id="box">
<child v-if="isShow"></child>
{{name}}
</div>
</body>
<script>
Vue.component('child', {
template: `
<div>我是组件的div</div>`,
data(){
return {
t:null,
}
},
beforeCreate() {
console.log('beforeCreate')
},
created() {
console.log('created')
},
beforeMount() {
console.log('beforeMount')
},
mounted() {
//用的最多，向后端加载数据，创建定时器等
console.log("页面已被vue实例渲染, data, methods已更新");
console.log('mounted')
//起一个定时器，每隔三秒，打印一行
this.t = setInterval(function () {
console.log('daada')
}, 3000)
},
beforeUpdate() {
console.log('beforeUpdate')
},
updated() {
console.log('updated')
},
beforeDestroy() {
console.log('beforeDestroy')
},
destroyed() {
//组件销毁，清理定时器
clearInterval(this.t)
this.t = null
console.log('destroyed')
},
})
var vm = new Vue({
el: '#box',
data: {
name:'lqz',
isShow:true
},
beforeUpdate() {
console.log('根的---beforeUpdate')
},
updated() {
console.log('根的---updated')
},
})
</script>
</html>
补充定时任务和延迟任务
setTimeout(function () {
alert(33333)
},3000) //延迟3s钟干什么事
setInterval(
function () {
alert(444)
},3000
)//每隔3s钟干什么事
2 swiper学习
vue中的钩子函数：monunted和update
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<title>Title</title>
<style>
.swiper-container {
width: 60%;
height: 600px;
}
</style>
</head>
<body>
<div id="box">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="data in datalist">
<img :src="data" alt="">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
</body>
<script>
var vm = new Vue({
el: '#box',
data: {
datalist: []
},
mounted() {
//大坑
setTimeout(() => {
//this指的是function这个函数
//使用了箭头函数以后，this指的是上一层
this.datalist = ['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg']
}, 3000)
},
updated() {
//只要js数据发生变化，组件就会执行updated方法，轮播图又会重新创建
var mySwiper = new Swiper('.swiper-container', {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {