[Vue warn]: Failed to resolve directive: focus

报错代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,

neverGiveUp

3817人浏览 · 2022-01-26 22:21:01

*neverGiveUp* · 2022-01-26 22:21:01 发布

报错代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
</head>

<body>
    <div id="app">

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div>
                <label>Id:
                    <input type="text" class="form-control" v-model="id">
                </label>

                <label for="">
                    Name:
                    <!-- @keyup.enter='add' 你按回车会进行添加功能 -->
                    <input type="text" class="form-control" v-model="name" @keyup.enter='add' > 
                </label>

                <input type="button" value="添加" class="btn btn-primary" @click="add()">

                <label for="">
                    Search:
                    <input type="text" class="form-control" v-model="keyword" id="search" v-focus v-color="'green'">
                </label>
            </div>
        </div>

        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>operation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in search(keyword)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime | dataFormat('')}}</td>
                    <td>
                        <a href="#" @click="del(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="app2">
        <h3 v-fontweight="900" v-fontsize="'30px'">{{dt | dataFormat }}</h3>
    </div>

    <script>
        //全局的过滤器，进行时间的格式化
        Vue.filter('dataFormat', function(datestr, pattern) {
            // 根据给定的时间字符串，得到特点的时间，如果不传参数，得到当前的时间
            var dt = new Date(datestr)
                // yyyy-mm-dd
            var y = dt.getFullYear()
            var m = dt.getMonth() + 1
            var d = dt.getDate()

            // toLowerCase()方法用于把字符串转换为小写
            if (pattern.toLowerCase() == 'yyyy-mm-dd') {
                //模板字符串``
                return `${y}-${m}-${d}`
            } else {
                var hh = dt.getHours()
                var mm = dt.getMinutes()
                var ss = dt.getSeconds()
                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
            }


        })

        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                keyword: '',
                list: [{
                    id: 1,
                    name: '麻辣烫',
                    ctime: new Date()
                }, {
                    id: 2,
                    name: '螺狮粉',
                    ctime: new Date()
                }]

            },
            methods: {
                add() {
                    // console.log("ok");
                    var eat = { //v-model自动更新的，获取输入的id，name
                        id: this.id,
                        name: this.name,
                        ctime: new Date()
                    }
                    this.list.push(eat) //添加到数组中
                    this.id = this.name = '' //把输入框清空

                },
                del(id) {
                    //item=>{}回调函数
                    var index = this.list.findIndex(item => {
                        if (item.id == id) { //找到返回turn ，就会终止
                            return true;
                        }
                    })
                    this.list.splice(index, 1) // splice（序号，删除个数）
                },

                search(keyword) {
                    // 第一种方法
                    /* var newList = []
                    this.list.forEach(item => {
                        //判断你在输入框中输入的keyword是否包含在数组中，如果包含就不等于-1.不包含就是等于-1
                        //空字符串的是等于0，不等于-1
                        if (item.name.indexOf(keyword) != -1) {
                            newList.push(item)
                        }
                    });
                    return newList */

                    // 第二种方法
                    //注意：forEach some filter findIndex 这些都属于数组的新方法，
                    //都会对数组中的每一项，进行遍历，执行相关的操作
                    return this.list.filter(item => {
                        // 注意：ES中，为字符串提供了一个新方法，叫做String.prototype.includes('要包含的字符串')
                        //如果包含，则返回true ，否则返回false
                        if (item.name.includes(keyword)) {
                            return item
                        }
                    })
                }
            }
        });

        //定义一个私有的过滤器(局部)
        var vm2 = new Vue({
            el: "#app2",
            data: {
                dt: new Date()
            },
            filters: { //定义私有过滤器 过滤器有两个条件(过滤器名称和处理函数)
                //过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器名称一致了,这时候,优先调用私有过滤器
                dataFormat: function(datestr) {
                    // 根据给定的时间字符串，得到特点的时间，如果不传参数，得到当前的时间
                    var dt = new Date(datestr)
                        // yyyy-mm-dd
                    var y = dt.getFullYear()
                    var m = dt.getMonth() + 1
                    var d = dt.getDate()
                    return `${y}-${m}-${d} =====`
                }
            },
            directives: { //自定义私有指令
                'fontweight': {
                    bind: function(el, bingding) {
                        el.style.fontWeight = bingding.value
                    }
                },
                'fontsize': function(el, bingding) { //注意,这个function等同于把代码写到了bind和update中
                    el.style.fontSize = parseInt(bingding.value) + 'px'
                }
            }
        })

        // 使用 Vue.directive()定义全局的指令 v-focus
        // 其中:参数1:指令的名称,注意,在定义的时候,指令的名称前面不需要夹 v- 前缀,
        // 但是:在调用的时候,必须 在指令名称前加上 v- 前缀来进行调用
        // 参数2,是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作
        Vue.directive('focus', {
            bind: function(el) { //每当指令绑定到元素上的时候,会立即执行这个bing函数,只执行一次
                //注意:在每个函数中,第一个参数永远是el,表示 被绑定了指令的那个元素,这个el参数,是一个原生的js对象
                //在元素,刚绑定了指令的时候,还没插入搭配DOM中去,这时候,调用focus方法没有作用
                //因为,一个元素,只有插入DOM之后,才能获取焦点
            },
            inserted: function(el) { //inserted 表示元素插入到DOM中的时候,会执行 inserted函数[触发1次]
                el.focus()
                    //和js行为有关的操作,最好在inserted中去执行,放置js行为不生效
            },
            updated: function(el) { //当VNode更新的时候,会执行updated,可能会触发多次

            }
        })

        Vue.directive('color', {
            bind: function(el, binding) {
                el.style.color = binding.value
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

原因：使用 Vue.directive()定义指令的代码放在创建Vue实例代码的后面导致出错

在这里插入图片描述

改正之后代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css">
</head>

<body>
    <div id="app">

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div>
                <label>Id:
                    <input type="text" class="form-control" v-model="id">
                </label>

                <label for="">
                    Name:
                    <!-- @keyup.enter='add' 你按回车会进行添加功能 -->
                    <input type="text" class="form-control" v-model="name" @keyup.enter='add' > 
                </label>

                <input type="button" value="添加" class="btn btn-primary" @click="add()">

                <label for="">
                    Search:
                    <input type="text" class="form-control" v-model="keyword" id="search" v-focus v-color="'green'">
                </label>
            </div>
        </div>

        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>operation</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in search(keyword)" :key="item.id">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime | dataFormat('')}}</td>
                    <td>
                        <a href="#" @click="del(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>

    <div id="app2">
        <h3 v-fontweight="900" v-fontsize="'30px'">{{dt | dataFormat }}</h3>
    </div>

    <script>
        //全局的过滤器，进行时间的格式化
        Vue.filter('dataFormat', function(datestr, pattern) {
            // 根据给定的时间字符串，得到特点的时间，如果不传参数，得到当前的时间
            var dt = new Date(datestr)
                // yyyy-mm-dd
            var y = dt.getFullYear()
            var m = dt.getMonth() + 1
            var d = dt.getDate()

            // toLowerCase()方法用于把字符串转换为小写
            if (pattern.toLowerCase() == 'yyyy-mm-dd') {
                //模板字符串``
                return `${y}-${m}-${d}`
            } else {
                var hh = dt.getHours()
                var mm = dt.getMinutes()
                var ss = dt.getSeconds()
                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
            }


        })

        // 使用 Vue.directive()定义全局的指令 v-focus
        // 其中:参数1:指令的名称,注意,在定义的时候,指令的名称前面不需要夹 v- 前缀,
        // 但是:在调用的时候,必须 在指令名称前加上 v- 前缀来进行调用
        // 参数2,是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作
        Vue.directive('focus', {
            bind: function(el) { //每当指令绑定到元素上的时候,会立即执行这个bing函数,只执行一次
                //注意:在每个函数中,第一个参数永远是el,表示 被绑定了指令的那个元素,这个el参数,是一个原生的js对象
                //在元素,刚绑定了指令的时候,还没插入搭配DOM中去,这时候,调用focus方法没有作用
                //因为,一个元素,只有插入DOM之后,才能获取焦点
            },
            inserted: function(el) { //inserted 表示元素插入到DOM中的时候,会执行 inserted函数[触发1次]
                el.focus()
                    //和js行为有关的操作,最好在inserted中去执行,放置js行为不生效
            },
            updated: function(el) { //当VNode更新的时候,会执行updated,可能会触发多次

            }
        })

        Vue.directive('color', {
            bind: function(el, binding) {
                el.style.color = binding.value
            }
        })

        // 创建一个Vue的实例
        var vm = new Vue({
            el: '#app',
            data: {
                id: '',
                name: '',
                keyword: '',
                list: [{
                    id: 1,
                    name: '麻辣烫',
                    ctime: new Date()
                }, {
                    id: 2,
                    name: '螺狮粉',
                    ctime: new Date()
                }]

            },
            methods: {
                add() {
                    // console.log("ok");
                    var eat = { //v-model自动更新的，获取输入的id，name
                        id: this.id,
                        name: this.name,
                        ctime: new Date()
                    }
                    this.list.push(eat) //添加到数组中
                    this.id = this.name = '' //把输入框清空

                },
                del(id) {
                    //item=>{}回调函数
                    var index = this.list.findIndex(item => {
                        if (item.id == id) { //找到返回turn ，就会终止
                            return true;
                        }
                    })
                    this.list.splice(index, 1) // splice（序号，删除个数）
                },

                search(keyword) {
                    // 第一种方法
                    /* var newList = []
                    this.list.forEach(item => {
                        //判断你在输入框中输入的keyword是否包含在数组中，如果包含就不等于-1.不包含就是等于-1
                        //空字符串的是等于0，不等于-1
                        if (item.name.indexOf(keyword) != -1) {
                            newList.push(item)
                        }
                    });
                    return newList */

                    // 第二种方法
                    //注意：forEach some filter findIndex 这些都属于数组的新方法，
                    //都会对数组中的每一项，进行遍历，执行相关的操作
                    return this.list.filter(item => {
                        // 注意：ES中，为字符串提供了一个新方法，叫做String.prototype.includes('要包含的字符串')
                        //如果包含，则返回true ，否则返回false
                        if (item.name.includes(keyword)) {
                            return item
                        }
                    })
                }
            }
        });

        var vm2 = new Vue({
            el: "#app2",
            data: {
                dt: new Date()
            },
            filters: { //定义私有过滤器 过滤器有两个条件(过滤器名称和处理函数)
                //过滤器调用的时候,采用的是就近原则,如果私有过滤器和全局过滤器名称一致了,这时候,优先调用私有过滤器
                dataFormat: function(datestr) {
                    // 根据给定的时间字符串，得到特点的时间，如果不传参数，得到当前的时间
                    var dt = new Date(datestr)
                        // yyyy-mm-dd
                    var y = dt.getFullYear()
                    var m = dt.getMonth() + 1
                    var d = dt.getDate()
                    return `${y}-${m}-${d} =====`
                }
            },
            directives: { //自定义私有指令
                'fontweight': {
                    bind: function(el, bingding) {
                        el.style.fontWeight = bingding.value
                    }
                },
                'fontsize': function(el, bingding) { //注意,这个function等同于把代码写到了bind和update中
                    el.style.fontSize = parseInt(bingding.value) + 'px'
                }
            }
        })
    </script>
</body>

</html>