2-3 2.1.3自定义指令ppt课件 Vue.js基础与应用开发实战（微课版）.pptx

《2-3 2.1.3自定义指令ppt课件 Vue.js基础与应用开发实战（微课版）.pptx》由会员分享，可在线阅读，更多相关《2-3 2.1.3自定义指令ppt课件 Vue.js基础与应用开发实战（微课版）.pptx（8页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、2-3 2.1.3 自定义指令教学课件 Vue.js基础与应用开发实战（微课版）2.1.3 自定义指令Vue除了默认的核心指令（例如：v-model、v-show），也允许注册自定义指令。指令注册类似于组件注册，包括全局指令和局部指令两种。（1）全局自定义指令注册使用Vue.diretive()来注册全局指令。例如：/注册一个全局自定义指令 v-focusVue.directive(focus,/当绑定元素插入到 DOM 中。inserted:function(el)/聚焦元素 el.focus()（2）局部自定义指令注册组件或Vue构造函数中接受一个directives的选项，实现注册局部指

2、令功能。var vm=new Vue(el:#example,directives:focus:/指令的定义 inserted:function(el)el.focus()（2）局部自定义指令注册然后可以在模板中任何元素上使用新的v-focus属性。【实例2-1】注册一个使元素自动获取焦点的自定义指令【操作要求】当页面加载时，input元素（输入框）将自动获得焦点，即在打开这个页面后还没单击过任何内容时，这个输入框就处于聚焦状态，如图2-1所示。图2-1 页面加载时输入框将获得焦点【实现过程】创建网页0201.html，在该网页中编写代码实现指定功能。/注册一个全局自定义指令 v-focus Vue.directive(focus,/当被绑定的元素插入到 DOM 中时 inserted:function(el)/聚焦元素 el.focus()var vm=new Vue(el:#app)快乐学习！高效学习！快乐学习！高效学习！祝学习进步！祝学习进步！