VUE自定指令
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>VUE自定義指令</title><script src="js/vue.js"></script></head><body><!--核心指令：v-model和v-show--，也可以注冊(cè)自定義指令--><div id="app"><p>頁(yè)面加載時(shí)，input元素自動(dòng)獲取焦點(diǎn)：</p>姓名：<input type="text" id="num" /><br />地址：<input v-focus /><br /></div><script>//注冊(cè)一個(gè)全局自定義指令v-focus;Vue.directive('focus',{//當(dāng)綁定元素插入到DOM中。inserted:function(el){//聚焦元素el.focus()}})//創(chuàng)建根實(shí)例;new Vue({el:'#app'})</script></body>
</html>
?
?
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>VUE自定義指令2</title><script src="js/vue.js"></script></head><body><!--布局--><div id="app"><p>頁(yè)面載入時(shí)，input元素自動(dòng)獲取焦點(diǎn)</p>姓名:<input type="text" id="username" /><br />地址:<input v-focus /></div><!--js--><script>new Vue({el:'#app',directives:{//注冊(cè)一個(gè)局部的自定義指令v-focusfocus:{//指令的定義inserted:function(el){//聚焦元素el.focus()}}}})</script></body> </html>?
總結(jié)
- 上一篇： VUE data传值
- 下一篇： VUE ajax