01-指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<!-- v-if="isShow" -->
<div v-hello="'red'">11111111</div>
<div v-hello="'yellow'">22222222</div>
<div v-hello="color">333333333333333</div>
</div>
<script type="text/javascript">
// Vue.compoennt("aa",{})
// directive指令 - dom 操作
//
Vue.directive("hello",{
//指令的生命周期-第一次插入节点调用
inserted(el,binding,vnode){
// vnode ,vdom, virtual node, 虚拟节点 虚拟dom
console.log("此时dom节点创建",vnode)
el.style.backgroundColor = binding.value;
},
update(el,binding){
console.log("此时绑定的状态改变时会执行")
el.style.backgroundColor = binding.value;
}
})
var vm = new Vue({
el:"#box",
data:{
title:"1111111111111111",
color:'red'
},
// directives
})
</script>
</body>
</html>
02-指令函数简写
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<!-- v-if="isShow" -->
<div v-hello="'red'">11111111</div>
<div v-hello="'yellow'">22222222</div>
<div v-hello="color">333333333333333</div>
</div>
<script type="text/javascript">
// Vue.compoennt("aa",{})
// directive指令 - dom 操作
//
Vue.directive("hello",function(el,binding,vnode){
el.style.backgroundColor = binding.value
})
var vm = new Vue({
el:"#box",
data:{
title:"1111111111111111",
color:'red'
},
// directives
})
</script>
</body>
</html>
03-轮播-nextTick
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="lib/swiper/css/swiper.css">
<script src="lib/swiper/js/swiper.js"></script>
<script type="text/javascript" src="lib/vue.js"></script>
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<div id="box">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="data,index in list">
{{data}}
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
</div>
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
list:[]
},
mounted(){
setTimeout(() => {
this.list = ["111","2222","3333"];
// 黑魔法
this.$nextTick(()=>{
console.log("我待会才会执行")
var mySwiper = new Swiper ('.swiper-container', {
// direction: 'vertical', // 垂直切换选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
}
})
})
console.log("节点创建完了？？？？","没有，异步渲染")
}, 2000)
},
updated(){
console.log("updated");
}
})
</script>
</body>
</html>
04-指令轮播
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="lib/swiper/css/swiper.css">
<script src="lib/swiper/js/swiper.js"></script>
<script type="text/javascript" src="lib/vue.js"></script>
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<div id="box">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="data,index in list" v-swipe="index">
{{data}}
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<!-- <div class="swiper-button-prev"></div> -->
<!-- <div class="swiper-button-next"></div> -->
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
</div>
<script type="text/javascript">
Vue.directive("swipe",{
inserted(el,binding,vnode){
console.log(binding.value);
if(binding.value === vnode.context.list.length-1){
var mySwiper = new Swiper ('.swiper-container', {
// direction: 'vertical', // 垂直切换选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
}
})
}
}
})
new Vue({
el:"#box",
data:{
list:[]
},
mounted(){
setTimeout(() => {
this.list = ["111","2222","3333"];
console.log("节点创建完了？？？？","没有，异步渲染")
}, 2000)
},
updated(){
// console.log("节点创建完了？？？？","更新阶段渲染")
// var mySwiper = new Swiper ('.swiper-container', {
// // direction: 'vertical', // 垂直切换选项
// // 如果需要分页器
// pagination: {
// el: '.swiper-pagination',
// }
// })
}
})
</script>
</body>
</html>
Comments | NOTHING