vue2.0自定义指令的使用方法
2024-10-16 07:31:33
感觉2.0好坑啊，自定义指令和1.0完全不一样，并且文档写得也不太清晰，下面是我写得一个demo,希望帮助大家更好地理解自定义指令
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- <script type="text/javascript" src="vue.js"></script> -->
</head> <body>
<div id="box">
<p v-demo="{color:'red'}">红色文字</p>
<input type="text" name="" v-focus>
</div>
<script type="text/javascript">
window.onload = function() {
// 全局指令
Vue.directive('demo',{
bind:function(el,val){
el.style.color = val.value.color
}
});
Vue.directive('focus',{
inserted: function(el,val) {
el.focus()
}
});
// 局部指令
var app = new Vue({
el: '#box',
directives: {
demo: {
bind: function(el, val) {
el.style.color = val.value.color
}
},
focus: {
inserted: function(el,val) {
el.focus()
}
}
}
});
}
</script>
</body> </html>
最新文章
- EF架构~通过EF6的DbCommand拦截器来实现数据库读写分离~终结~配置的优化和事务里读写的统一
- IIS7部署项目时提示："错误消息 401.2。: 未经授权: 服务器配置导致登录失败。"的解决办法
- 由验证码和session丢失的引发原因
- Apache安全配置
- RocketMQ在windows上安装和开发使用
- HDOJ1232 并查集
- 使用线程新建WPF窗体(公用进度条窗体)
- uoj Goodbye Jiawu
- T-SQL基础(7) - 透视，逆透视和分组集
- STM32F103外部中断编程
- POJ-1250
- Zabbix实战-简易教程（1）--总流程
- ios开发-程序压后台后，悄悄的抓取数据~~
- python的join(string)函数
- 基于GIS的视频管理指挥平台
- 关于asyncio知识（一）
- 微信小程序用setData给数组对象赋值
- android get或post及HttpClient与服务器数据交互
- dart基础语法
- zookeeper和dubbo的关系[转]