Vue中自定义指令学习
2019-03-11 20:27
302 查看
除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。
自定义指令又可分为全局指令定义和私有指令的定义
一.全局指令定义的方法:
使用Vue.directive()定义全局的指令,其中,参数1为指令名,注意在定义的时候指令的名称前面不需要加v-前缀,但在调用的时候需要加 v-前缀
参数2,是一个对象,这个对象身上,有一些相关的指令的函数,这些函数可以在特定的阶段中,执行相关的操作
例如自定义一个聚焦的指令
Vue.directive('focus',{ bind:function(el){//每当指令绑定到元素上的时候,会立即执行这个bind函数,只执行一次 //注意:每个函数中,第一个参数永远是el 表示被绑定了指令的那个元素,这个el参数,是一个原生的JS对象 //在元素刚绑定了指令的时候,还没有插入到 DOM中去,这个时候调用 focus 方法没有作用 //因为一个元素只有插入DOM之后,才能获取焦点 //和JS行为有关的操作,最好在inserted中执行,以防止JS行为不生效 el.focus() }, inserted:function(el){//inserted 表示元素插入到DOM中的时候,会执行inserted函数(只触发一次) el.focus(); }, updated:function(){//当VNode更新的时候,会执行updated,可能会触发多次 } });
在html中引用:
<label>根据关键字搜索:<input class="form-control" type="text" v-model="keywords" id="search" v-focus v-color="'blue'"></label>
在定义一个颜色的全局的指令
Vue.directive('color',{ //样式只要通过指令绑定给了元素,不管这个元素有没有被插入到元素中,这个元素肯定有一个内联的样式 //将来元素肯定显示到页面中,这时候浏览器的渲染引擎必然会解析样式,应用给这个样式 //和样式相关的指令,一般可以在bind中执行 bind:function(el,binding){ // el.style.color="red"; el.style.color= binding.value; //console.log(binding.name); // console.log(binding.value); } })
在html中引用方式同获取焦点指令的引用
**
二.私有指令定义的方法
私有指令定义的位置是在创建的实例中,组件中也接受一个 directives 的选项,定义方式如下
directives :{ 'fontweight':{ bind: function (el,binding){ el.style.fontWeight = binding.value; } }, 'fontsize':function(el,binding){ el.style.fontSize = binding.value; } }
相关文章推荐
- Vue.js学习 Item13 – 指令系统与自定义指令
- Vue学习(二)自定义指令
- vue学习笔记6 Vue.directive自定义指令
- Vue.js学习 Item13 – 指令系统与自定义指令
- Vue.js学习 Item13 – 指令系统与自定义指令
- Vue 2.0学习笔记:自定义指令
- Vue.js学习系列(四十五)-- 自定义指令
- Vue学习第六周,自定义指令与Render函数
- 【vuejs深入一】深入学习vue指令,自定义指令解决开发痛点
- vue学习(二) vue生命周期 vue自定义指令和过滤器
- vue学习第15天,自定义指令
- vue学习part1
- Vue学习笔记——Vue的坑
- vue概念及基础学习
- vue学习资料大全
- vue+vue-cli+vuex+vrouter 开发学习和总结
- Vue.js学习 Item2 -- 原理概述
- vue.js通过自定义指令实现数据拉取更新的实现方法
- vue学习第24天,启动本地MongoDB 启动node搭建的服务器 设置跨域 调用接口
- VUE学习笔记二:基础语法