<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 使用 自定义指令，在自定义指令的前面添加 v- 前缀 -->
<input type="text" v-model="msg" v-if="isShow" v-focus>
</div>
<script src="./vue.js"></script>
<script>
// 创建全局指令
// 第一个参数：表示指令的名称，不带 v- 前缀
// 第二个参数：表示一个配置对象，对象中是指令的 钩子函数
/* Vue.directive('focus', {
// inserted 在元素被插入到页面中的时候调用
inserted: function (el) {
// el 表示当前元素, 是一个DOM对象
el.focus()
}
}) */
Vue.directive('focus', {
// inserted 在元素被插入到页面中的时候调用
inserted(el){
// el 表示当前元素, 是一个DOM对象
el.focus()
},
})
var vm = new Vue({
el: '#app',
data: {
msg: '',
isShow: true
}
})
</script>
</body>
</html>
