黒馬学習レコード--Vue-カスタムコマンドはテキストボックスに焦点を当て、バインドされた要素に指定したフォント色とフォントの太さを設定します.
2706 ワード
カスタムコマンドカスタムグローバルおよびローカルのカスタム命令: カスタム命令の使用方法:
Vue 1.xのカスタム要素命令【廃棄済み、了解可】
使用方法:
カスタムグローバルコマンド
カスタムプライベートコマンド
directive複数のsをvueインスタンスに配置
// v-focus， ：
Vue.directive('focus', {
inserted: function (el) { // inserted
el.focus();
}
});
// v-color v-font-weight， ：
directives: {
color: { //
bind(el, binding) {
el.style.color = binding.value;
}
},
'font-weight': function (el, binding2) { // ， bind update
el.style.fontWeight = binding2.value;
}
}
Vue 1.xのカスタム要素命令【廃棄済み、了解可】
Vue.elementDirective('red-color', {
bind: function () {
this.el.style.color = 'red';
}
});
使用方法:
1232
カスタムグローバルコマンド
// Vue.directive() v-focus
// ： 1 ： ， ， ， ， v- ,
// ： ， v-
// 2： ， ， ， ，
Vue.directive('focus', {
bind: function (el) { // ， bind ，
// ： ， ， el ， ， el ， JS
// ， DOM ， ， focus
// ， ， DOM ，
// el.focus()
},
inserted: function (el) { // inserted DOM ， inserted 【 1 】
el.focus()
// JS ， inserted ， JS
},
updated: function (el) { // VNode ， updated，
}
})
//
Vue.directive('color', {
// ， ， ，
// ， ， ，
bind: function (el, binding) {
// el.style.color = 'red'
// console.log(binding.name)
// ， bind
// console.log(binding.value)
// console.log(binding.expression)
el.style.color = binding.value
}
})
カスタムプライベートコマンド
directive複数のsをvueインスタンスに配置
directives: { //
'fontweight': { //
bind: function (el, binding) {
el.style.fontWeight = binding.value
}
},
'fontsize': function (el, binding) { // ： function bind update
el.style.fontSize = parseInt(binding.value) + 'px'
}
}