<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="../vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body >
<div id="myApp>
<input type="text" v-focus v-color />
<br/>
<br/>
<!--对两者同时加自动获取焦点 则第二个覆盖第一个-->
<textarea cols="30" rows="10" v-focus></textarea>
<div v-border v-color>我是文本1</div>
</div>
<div id="herApp">
<div v-border>我是文本2</div>
</div>
</body>
<script type="text/javascript">
//先实例在定义 找不到 先定义在实例可以
//全局自定义指令
Vue.directive("border",{
inserted:function(e){
e.style.border="1px solid gold";
}
})
new Vue({
el:"#myApp",
//局部自定义指令
directives:{
focus:{
inserted:function(e){
e.focus();
}
},
color:{
inserted:function(e){
e.style.color = "red";
e.style.fontsize="30px";
}
}
}
});
new Vue({
el:"#herApp"
})
</script>
</html>