(二十一)、Vue的自定义指令
1.自定义非内嵌指令(不保留h3中的原有text)
- 自定义的名字前面不加v- ,Vue帮我们自动添加
- element是一个真实的Dom节点
- banding是我们绑定的数据
在自定义的指令中的名字,必须全部小写。 // 定义一个全局指令:directive("自定义的名字",function("真实的Dom结点","绑定的数据")) 自定义元素必须全部小写 Vue.directive('text-upper',function(element,banding){ // 利用真实的Dom结点更改文本,然后绑定的数据进行大写 element.innerText=banding.value.toUpperCase(); })
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <!-- 两个需求: 1.我们通过使用自定义标签v-text-Upper:"实现对文章大写化" 1.我们通过使用自定义标签v-text-Lower:"实现对文章小写化" --> <div id="root"> <h2 v-text-upper="name"></h2> </div> <script type="text/javascript"> // 定义一个全局指令:directive("自定义的名字",function("真实的Dom结点","绑定的数据")) 自定义元素必须全部小写 Vue.directive('text-upper',function(element,banding){ // 利用真实的Dom结点更改文本,然后绑定的数据进行大写 element.innerText=banding.value.toUpperCase(); }) new Vue({ el:"#root", data:{ name:"jSxS" } }); </script> </body> </html>
2.自定义非内嵌指令(保留h3中的原有text)
要使用 += 而不是原来的= element.innerText += banding.value.toUpperCase();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <!-- 两个需求: 1.我们通过使用自定义标签v-text-Upper:"实现对文章大写化" 1.我们通过使用自定义标签v-text-Lower:"实现对文章小写化" --> <div id="root"> <h2 v-text-upper="name">您的名字是:</h2> </div> <script type="text/javascript"> // 定义一个全局指令:directive("自定义的名字",function("真实的Dom结点","绑定的数据")) 自定义元素必须全部小写 Vue.directive('text-upper', function (element, banding) { // 利用真实的Dom结点更改文本,然后绑定的数据进行大写 // element.innerText=banding.value.toUpperCase(); element.innerText += banding.value.toUpperCase(); }) new Vue({ el: "#root", data: { name: "jSxS" } }); </script> </body> </html>
3.自定义非内嵌指令 (非全局)
- 如果自定义 的标签只有 v-xxx,那么我们只需要在方法前写上 xxx:function(){}即可
- 如果自定义 的标签只有 v-xxx-xxxx,那么我们只需要在方法前写上 ‘xxx-xxx’:function(){}即可
<h2 v-lower="name">您的小写名字是:</h2> directives:{ lower:function(element,banding){ element.innerText += banding.value.toLowerCase(); } }
<h2 v-text-lower="name">您的小写名字是:</h2> directives:{ 'text-lower':function(element,banding){ element.innerText += banding.value.toLowerCase(); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head> <body> <!-- 两个需求: 1.我们通过使用自定义标签v-text-Upper:"实现对文章大写化" 1.我们通过使用自定义标签v-text-Lower:"实现对文章小写化" --> <div id="root"> <h2 v-text-upper="name">您的大写名字是:</h2> <h2 v-lower="name">您的小写名字是:</h2> </div> <div id="root2"> <h2 v-text-upper="name">您的大写名字是:</h2> <h2 v-lower="name">您的小写名字是:</h2> </div> <script type="text/javascript"> // 定义一个全局指令:directive("自定义的名字",function("真实的Dom结点","绑定的数据")) 自定义元素必须全部小写 Vue.directive('text-upper', function (element, banding) { // 利用真实的Dom结点更改文本,然后绑定的数据进行大写 // element.innerText=banding.value.toUpperCase(); element.innerText += banding.value.toUpperCase(); }) new Vue({ el: "#root", data: { name: "jSxS" }, // 局部自定义指令 directives:{ lower:function(element,banding){ element.innerText += banding.value.toLowerCase(); } } }); new Vue({ el: "#root2", data: { name: "jSxS" }, }); </script> </body> </html>
4.Vue的自定义插件 ⭐
Vue自带的原型数据...
Vue解析不到的数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定义插件</title> <script src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器 --> <div id="root"> <h2>{{name}}</h2> <h2>{{now}}</h2> </div> <script> Vue.config.productionTip = false //关闭生产提示 const vm=new Vue({ el:'#root', data:{ name:'CKQN' } }); vm.$now=new Date(); // xxx这里解析不到数据 </script> </body> </html>
Vue这样的话就能够解析到.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定义插件</title> <script src="../js/vue.js"></script> </head> <body> <!-- 准备好一个容器 --> <div id="root"> <h2>{{name}}</h2> <h2>{{$now}}</h2> </div> <script> Vue.config.productionTip = false //关闭生产提示 // 向Vue原型上追加一个$now属性,值为当前的时间。 $now是给实列vm用的。 Vue.prototype.$now=new Date().toTimeString(); // 这里进行格式化数据... const vm=new Vue({ el:'#root', data:{ name:'CKQN' } }); // vm.$now=new Date(); </script> </body> </html>
插件的正式使用
插件的定义: 插件就是一个包含install方法的对象。
非插件实列
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定义插件</title> <script src="../js/vue.js"></script> <!-- <script src="../18_插件/atguigu.js"></script> --> </head> <body> <!-- 准备好一个容器 --> <div id="root"> <h2>{{name}}</h2> <h2 v-upper-text="name"></h2> <h2 v-lower-text="name"></h2> <!-- 调用我们自定义插件种的原型 --> <h2>{{$random(2,8)}}</h2> </div> <script> // 添加两个全局指令 // 大写 Vue.directive('upper-text',function(el,bangding){ el.innerText=bangding.value.toUpperCase(); }) // 小写 Vue.directive('lower-text',function(el,bangding){ el.innerText=bangding.value.toLowerCase(); }) // 给Vue自身添加属性 Vue.projectName='学生管理系统'; Vue.MyVersion='v1.0.0' Vue.showInfo=function(){ console.log('我是一些信息'); }; // 给Vue原型上添加数据,供vm使用。 Vue.prototype.$random=function(min,max){ return Math.random()*(max-min)+min // TODO (0~1)*6+2 } /* 插件的定义: 是一个包含install方法的对象, */ Vue.config.productionTip = false //关闭生产提示 // //Vue会帮助我们去调用atguigu 这个插件里面的install方法 // Vue.use(atguigu) console.log(Vue.projectName) console.log(Vue.MyVersion) Vue.showInfo() const vm = new Vue({ el: '#root', data: { name: 'CKQN' } }); </script> </body> </html>
插件实列
基本方法 1. 需要引入插件的js <script src="../18_插件/atguigu.js"></script> 2. 使用插件: Vue.use(插件的名字) Vue.use(atguigu)
atguigu.js
const atguigu={ } atguigu.install=function(Vue,options){ // 添加两个全局指令 // 大写 Vue.directive('upper-text',function(el,bangding){ el.innerText=bangding.value.toUpperCase(); }) // 小写 Vue.directive('lower-text',function(el,bangding){ el.innerText=bangding.value.toLowerCase(); }) // 给Vue自身添加属性 Vue.projectName='学生管理系统'; Vue.MyVersion='v1.0.0' Vue.showInfo=function(){ console.log('我是一些信息'); }; // 给Vue原型上添加数据,供vm使用。 Vue.prototype.$random=function(min,max){ return Math.random()*(max-min)+min // TODO (0~1)*6+2 } }
html代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自定义插件</title> <script src="../js/vue.js"></script> <script src="../18_插件/atguigu.js"></script> </head> <body> <!-- 准备好一个容器 --> <div id="root"> <h2>{{name}}</h2> <h2 v-upper-text="name"></h2> <h2 v-lower-text="name"></h2> <!-- 调用我们自定义插件种的原型 --> <h2>{{$random(2,8)}}</h2> </div> <script> /* 插件的定义: 是一个包含install方法的对象, */ Vue.config.productionTip = false //关闭生产提示 //Vue会帮助我们去调用atguigu 这个插件里面的install方法 Vue.use(atguigu) console.log(Vue.projectName) console.log(Vue.MyVersion) Vue.showInfo() const vm = new Vue({ el: '#root', data: { name: 'CKQN' } }); </script> </body> </html>