代码拉取完成,页面将自动刷新
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
</head>
<body>
<!-- Vue全局指令 -->
<!-- 需求: 要求一进入,就让以下的输入框,立刻获取到焦点 -->
<div id="app">
<input type="text" >
<input type="text" >
<input type="text" v-focus v-mycolor="'blue'" >
</div>
<script>
// 定义一个Vue全局指令, 以下的focus就是本次定义的全局指令的名字
// 在使用使用指令的时候,必须在指令前加上“v-”
Vue.directive("focus", {
// bind函数的执行时机,是元素被绑定上指令之时,就执行。
// 此时元素并没有加入DOM中。参数el就是使用当前指令的元素,且el代表的元素还是一个原生的DOM对象
bind: function(el) {
el.style.backgroundColor = "lightblue";
console.log("bind...");
},
// inserted函数的执行时机,是元素已经被加入到DOM以后,才执行。
inserted: function(el) {
el.focus();
console.log("inserted");
}
});
// 总之,bind合适操作元素的样式, inserted函数更适合使用js操作DOM元素
var app = new Vue({
el: "#app",
data: {
msg: "aaaa"
},
// 私有指令
directives: {
"mycolor": {
bind(el,binding) {
el.style.color = binding.value;
}
}
}
});
</script>
</body>
</html>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。