1 Star 8 Fork 8

高鹏/learn-vue

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
demo_015.html 1.81 KB
一键复制 编辑 原始数据 按行查看 历史
F_喜欢足球 提交于 2020-03-25 10:06 . Vue指令
<!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>
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
1
https://gitee.com/gapper/learn-vue.git
git@gitee.com:gapper/learn-vue.git
gapper
learn-vue
learn-vue
master

搜索帮助

0d507c66 1850385 C8b1a773 1850385