<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width:200px;
height:200px;
background-color:red;
display: flex;
justify-content:center;
align-items: center;
}
</style>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<p>--------------------</p>
<h1 v-text="msg"></h1>
</div>
<script src="js/vue.3.2.2.js"></script>
<script>
//定义局部指令
const lkDirective = {
focus:{
created(){
console.log("created");
},
beforeMount(){
console.log("beforeMount");
},
mounted(el) {
el.focus();
},
beforeUpdate(){
console.log("beforeUpdate");
},
updated(){
console.log("updated");
},
beforeUnmount(){
console.log("beforeUnmount");
}
}
}
// 1、创建Vue的实例对象
const app = Vue.createApp({
data(){//定义数据
return {
msg:'你好！',
isShow:true,
posData:{
top:200,
left:200
}
}
},
//挂载局部介指令
directives:lkDirective,
template:'<div v-show="isShow" class="box" v-fixed:pos="posData"><input type="text" placeholder="请输入" v-focus></div>'
});
//定义全局介指令
// app.directive('focus',{
// mounted(el,{value},{transition}){
// el.focus();
// }
// });
app.directive('fixed',(el,binding)=>{
// console.log(el,binding);
el.style.position='fixed';
el.style.left=binding.value.left+'px';
el.style.top=binding.value.top+'px';
})
app.mount('#app');
</script>
</body>
</html>
