v-自定义指令.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-组件-props</title>
    <link rel="stylesheet" href="style.css">
    <script src="js/vue.js"></script>
    <script>
        //1.自定义一个指令如 v-focus
        //2.通过 Vue.directive('自定义的指令', {inserted: function (el) {el.focus();//调用方法}})
        //3.创建new Vue({el:'',data:{;;}})
        window.onload = function () {
            // 注册一个全局自定义指令 v-focus
            Vue.directive('focus', {
                //当绑定元素插入到 DOM 中。
                inserted: function (el) {
                    el.focus();
                }
            })
            new Vue({
                el: '#box',
                data: {}
            })
        }
    </script>
</head>
<body>

<div id="box">
    <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>
</div>

</body>
</html>