<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<input type="text" v-focus>
<button v-color>按钮</button>
</div>
<div id="app">
</div>
<script src="js/vue.js"></script>
<script>
// 选择标签.focus()可以自动聚焦 可以解决ios上聚焦不兼容问题
new Vue({
el:'#box',
// 自定义局部指令directives
directives:{
// 指令名字{
// 钩子函数 bind inserted update unbind
// }
color:{
// el当前标签
// obj可以获取用户输入的一些参数
inserted(el,obj){
if(obj.arg){
el.style.color=obj.arg
}else if(obj.value){
el.style.color=obj.value;
}else{
el.style.color='red'
}
}
}
}
})
</script>
</body>
</html>