栾川网站开发使用oss图片做网站
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue指令
目录
指令写法
自定义指令
简单封装指令
指令传递字符串
update事件
指令应用
指令实现轮播
指令函数简写
指令函数列表
bind
inserted
update
componentUpdated
unbind
Vue3指令轮播
nextick
总结
指令写法
指令：为了操作底层dom。
实际应用：可以通过指令知道什么时候dom创建完成，从而进行依赖dom的库初始化工作。
自定义指令
对普通dom元素进行底层操作。
编写一个输入框，当被绑定的元素插入到dom中时，
输入框获取焦点。
示例如下：
<div id="box"><input v-focus name="name" />
</div>
<script src="../lib/vue.js"></script>
<script>// 注册一个全局自定义指令 'v-focus'Vue.directive("focus", {// 当被绑定的元素插入到dom中时inserted:function(el) {// 聚焦元素el.focus()}})new Vue({el:"#box"})
</script>
简单封装指令
做一个简单的指令封装。
示例如下：
<div id="box"><div v-hello>你好 vue</div>
</div>
<script src="../lib/vue.js"></script>
<script>Vue.directive("hello", {// 指令的生命周期inserted(el) {console.log("inserted", el)el.style.background = "red"}})new Vue({el:"#box"})
</script>
指令传递字符串
如果在参数中不包含单引符号，则识别为状态，需要提前定义好。
示例如下：
<div id="box"><div v-hello=" 'yellow'">你好 vue</div><div v-hello=" 'blue'">你好 vue</div>
</div>
<script src="../lib/vue.js"></script>
<script>Vue.directive("hello", {// 指令的生命周期inserted(el, binging) {console.log("inserted", binging)el.style.background = binging.value}})new Vue({el:"#box"})
</script>inserted事件，是在第一次插入到父节点时触发。
update事件
可以在update触发事件中修改值进行指令赋值。
示例如下：
<div id="box"><div v-hello=" 'yellow'">你好 vue</div><div v-hello=" 'blue'">你好 vue</div><div v-hello="whichColor">你好 vue</div>
</div>
<script src="../lib/vue.js"></script>
<script>Vue.directive("hello", {// 指令的生命周期inserted(el, binging) {console.log("inserted", binging)el.style.background = binging.value},update(el, binging) {console.log("update")el.style.background = binging.value}})let vm = new Vue({el:"#box",data : {whichColor: "red"}})
</script>效果：
指令应用
指令实现轮播
使用指令来完成轮播。
因为不知道什么时候数据什么时候插入的，直接绑定一个指令。
给指令传递对象参数。
示例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../lib/swiper-bundle.css"><style>.swiper-container {width: 600px;height: 300px;}</style>
</head>
<body>
<div id="box"><header>导航</header><div class="swiper-container demo"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(data, index) in datalist" :key="data" v-swiper="{index:index,length:datalist.length}"><img :src="data" alt=""/></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div></div><footer>底部内容</footer>
</div>
<script src="../lib/swiper-bundle.js"></script>
<script src="../lib/vue.js"></script>
<script>Vue.directive("swiper", {// 指令的生命周期inserted(el, binging) {let {index,length} = binging.valueif (index === length - 1) {new Swiper(".demo", {// 如果需要分页器pagination: {el: '.swiper-pagination',},loop:true,autoplay: {delay: 2500,disableOnInteraction:false}})}}})new Vue({el: '#box',data: {datalist:[],},mounted() {// ajaxsetTimeout(()=> {this.datalist = ["https://tsj.youdubook.com/cover/book_cover_1372.jpg","https://tsj.youdubook.com/cover/book_cover_6.jpg","https://tsj.youdubook.com/cover/book_cover_265.jpg","https://tsj.youdubook.com/cover/book_cover_2819.jpg","https://tsj.youdubook.com/cover/book_cover_219.jpg"]}, 2000)}})
</script>
</body>
</html>
指令函数简写
这种方式，更新和创建都会触发，如果两种触发都是同样的处理可以使用简写方式。
示例如下：
Vue.directive("hello", ()=> {console.log("创建或者更新都会执行")
})
指令函数列表
bind
只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted
被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）。
update
所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前。指令的值可以发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。
componentUpdated
指令所在组件的VNode及其子VNode全部更新后调用。
unbind
只调用一次，指令与元素解绑时调用。
Vue3指令轮播
使用app.directive()定义指令
生命周期需要更换inserted更换为mounted
示例如下：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../lib/swiper-bundle.css"><style>.swiper-container {width: 600px;height: 300px;}</style>
</head>
<body>
<div id="box"><header>导航</header><div class="swiper-container demo"><div class="swiper-wrapper"><div class="swiper-slide" v-for="(data, index) in datalist" :key="data" v-swiper="{index:index,length:datalist.length}"><img :src="data" alt=""/></div></div><!-- 如果需要分页器 --><div class="swiper-pagination"></div></div><footer>底部内容</footer>
</div>
<script src="../lib/swiper-bundle.js"></script>
<script src="../lib/vue.next.js"></script>
<script>let obj = {data() {return {datalist:[]}},mounted() {// ajaxsetTimeout(()=> {this.datalist = ["https://tsj.youdubook.com/cover/book_cover_1372.jpg","https://tsj.youdubook.com/cover/book_cover_6.jpg","https://tsj.youdubook.com/cover/book_cover_265.jpg","https://tsj.youdubook.com/cover/book_cover_2819.jpg","https://tsj.youdubook.com/cover/book_cover_219.jpg"]}, 2000)}}let app = Vue.createApp(obj)// app.component()// app.component()app.directive("swiper", {// 指令的生命周期mounted(el, binging) {let {index,length} = binging.valueif(index === length - 1) {new Swiper(".demo", {// 如果需要分页器pagination: {el: '.swiper-pagination',},loop:true,autoplay: {delay: 2500,disableOnInteraction:false}})}}})app.mount("#box")
</script>
</body>
</html>
nextick
当数据更新到dom中时，会触发一次性的监听事件。
示例如下：
let obj = {data() {return {datalist:[]}},mounted() {// ajaxsetTimeout(()=> {this.datalist = ["https://tsj.youdubook.com/cover/book_cover_1372.jpg","https://tsj.youdubook.com/cover/book_cover_6.jpg","https://tsj.youdubook.com/cover/book_cover_265.jpg","https://tsj.youdubook.com/cover/book_cover_2819.jpg","https://tsj.youdubook.com/cover/book_cover_219.jpg"]}, 2000)this.$nextTick(() => {console.log("比updated执行的都晚，而且只执行一次")})}
}可以在tick中处理实例化，会在数据源更新后，触发一次实例化。
示例如下：
let obj = {data() {return {datalist:[]}},mounted() {// ajaxsetTimeout(()=> {this.datalist = ["https://tsj.youdubook.com/cover/book_cover_1372.jpg","https://tsj.youdubook.com/cover/book_cover_6.jpg","https://tsj.youdubook.com/cover/book_cover_265.jpg","https://tsj.youdubook.com/cover/book_cover_2819.jpg","https://tsj.youdubook.com/cover/book_cover_219.jpg"]}, 2000)this.$nextTick(() => {console.log("比updated执行的都晚，而且只执行一次")new Swiper(".demo", {// 如果需要分页器pagination: {el: '.swiper-pagination',},loop:true,autoplay: {delay: 2500,disableOnInteraction:false}})})}
}总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue指令介绍及应用示例