子類的建構函式與解構函式
阿新 • • 發佈：2021-01-10
1.為何需要自定義指令
內建指令不滿足需求
2.自定義指令的語法規則（獲取元素焦點）
vue.directive('focus' {
inserted: function(el){
//獲取元素焦點
el.focus()；
}
})
3.自定義指令用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" 
3.帶引數的自定義指令（改變元素背景色）
Vue.directive('color',{
inserted:function(el, binding) {
el.style.backgroundColor = binding.value.color;
}
})
4.指令的用法
<input type = "text" v-color = "{color:"orange"}">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<input type="text" v-color = "msg">
</div>
<script src="vue.js"></script>
<script>
Vue.directive('color',{
bind: function(el,binding){
// 根據指令的引數設定背景色
// console.log(binding.value.color)
el.style.backgroundColor = binding.value.color;
}
});
var vm = new Vue({
el:"#app",
data: {
msg: {
color:'orange'
}
},
methods:{
handle:function(){
}
}
})
</script>
</body>
</html>
5.區域性指令
directives:{
focus:{
//指令的定義
inserted:function (el){
el.focus()
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id = "app">
<input type="text" v-color = "msg">
<input type="text" v-focus>
</div>
<script src="vue.js"></script>
<script>
Vue.directive('color',{
bind: function(el,binding){
// 根據指令的引數設定背景色
// console.log(binding.value.color)
el.style.backgroundColor = binding.value.color;
}
});
var vm = new Vue({
el:"#app",
data: {
msg: {
color:'aqua'
}
},
methods:{
handle:function(){
}
},
// 對於區域性指令來說，它只能夠在本元件中使用
// 如果要有更多元件，區域性元件就不能使用了
// 區域性指令使用範圍是有限制的，全域性指令的使用範圍是沒有限制的
directives:{
color:{
bind: function(el,binding){
el.style.backgroundColor = binding.value.color;
}
},
focus:{
inserted:function(el){
el.focus();
}
}
}
})
</script>
</body>
</html>
