必威体育Betway必威体育官网
当前位置:首页 > IT技术

22.钩子函数.html

时间:2019-07-25 07:40:00来源:IT技术作者:seo实验室小编阅读:66次「手机版」
 

钩子函数

<!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>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">

    <script src="./lib/vue.js"></script>

</head>

<body>

    <p id="APP1">

        <p class="panel panel-primary">
            <p class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </p>
            <p class="panel-body form-inline">
                <label>
                    <!-- bootstrap中input添加.form-control类,表示为input元素添加表单控件;
                     可以为标签元素添加CSS定制样式。
                -->
                    Id:<input type="text" class="form-control" v-model="id">
                </label>

                <label>
                    <!-- 
                        vue提供了keyup后的按键默认键有:
                        keyup.enter
                        keyup.tab
                        keyup.delete
                        keyup.esc
                        keyup.space
                        keyup.up
                        keyup.down
                        keyup.left
                        keyup.right
                        其实keyup.后面的这个 就是键盘上每个键对应的js里面的keycode码值(keycode)
                        可以查询 比如keyup.enter 相当于 keyup.13只不过 Vue帮我们定义好了而已
                        如果自定义某个按键的事件 我们可以通过Vue.config.keyCodes来定义

                        实现和添加按钮相同的功能 按f2键后实现 添加功能 调用相同的add函数
                    -->
                    Name:<input type="text" class="form-control" v-model="name" @keyup.f2="add">
                </label>

                <label>
                    <!-- 自定义全局指令v-focus 实现焦点事件 -->
                    <!-- 钩子函数使用 具体显示什么颜色 由我们传递进去的颜色值决定 注意这里只能类似这么写:
                        v-color="'blue'" 一定要加单引号 如果写成这样:v-color="blue" 
                        会去vue的data里面找blue这个变量值
                        如果是数字的话 就不用单引号括起来了
                    -->
                    搜索name关键字:<input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'">
                </label>

                <!-- @click="add"调用add函数不能传参数 
                     @click="add()"调用add函数 可以进行传参 -->
                <input type="button" value="添加" class="btn btn-primary" @click="add">
            </p>
        </p>


        <table class="table table-striped table-bordered">
            <thead>
                <tr class="active">
                    <th>Id</th>
                    <th>Name</th>
                    <th>Ctime</th>
                    <th>Operation</th>
                </tr>
            </thead>
            <tbody>
                <!-- 思路是过滤list 将符合条件的数据放到一个新List里 然后再for循环遍历 -->
                <tr v-for="item in search(keywords)" :key="item.id">
                    <td>{{item.id}}</td>
                    <!-- v-text 等同于上面的表达式 -->
                    <td v-text="item.name"></td>
                    <td v-color="'pink'">{{item.ctime | dataFormat('yyyy-MM-dd hh:mm:ss')}}</td>
                    <!-- 禁止事件的默认行为 此处就是禁止了超链接跳转标签的作用 -->
                    <td><a href="" @click.prevent="del(item.id)">删除</a></td>
                </tr>
            </tbody>
        </table>

    </p>


    <script>

        //自定义全局指令v-focus 定义的时候不需要加上v-前缀 但使用的时候必须加上v-前缀
        //参数1 指令名称
        //参数2 是一个对象 这个对象身上有一些指令相关的函数 这些函数可以在特定的阶段 执行相关的操作
        //里面函数的 每个第一参数都是el 指的是被绑定的指令的那个元素
        //且这个el是一个原生的dom对象 包含dom元素拥有的方法
        Vue.directive('focus',{
            //每当指令绑定到元素上的时候,会执行这个bind函数 只触发执行一次
            bind : function(el){
                //在元素刚绑定指令的时候 还没有插入到DOM中去 这个时候 调用focus()方法没有作用
                //因为一个元素只有插入DOM之后 才能获取焦点
                //所以el.focus()用到这里是不对的
                // el.focus();
            },
            //和js行为相关的 在inserted中操作
            //表示元素插入到DOM中的时候 会执行inserted函数 只触发执行一次
            inserted : function(el){
                el.focus();
            },
            //当组件 即vnode更新的时候 会触发该函数 可能触发执行多次
            updated : function(el){

            }
        });

        //自定义一个字体颜色的指令v-color
        Vue.directive('color',{
            bind : function(el,binding){
                //和样式相关的操作 在bind函数中
                //样式 只要通过指令绑定给了元素 不管这个元素有没有被插入到页面中去
                //这个元素 肯定有了一个内联的样式 将来元素肯定会显示到页面中去
                el.style.color = binding.value;
            }
        });

        //自定义某个按键的事件 f2按键 实现添加功能
        Vue.config.keyCodes.f2 = 113;

        //注意 这是全局过滤器 如果再有<p id="app2"></p> 和一个vue2对象 那么过滤器也是生效的

        //默认给pattern一个默认值 防止上面的函数不穿值 导致undefined
        Vue.filter('dataFormat', function (dateStr, pattern = "") {

            //将字符串转化成Date类型 yyyy-mm-dd
            var dt = new Date(dateStr);
            //取出年 月 日 用-拼接起来
            var y = dt.getFullYear();
            //dt.getmonth()从0开始 要+1 不足两位 前面补0 比如1月 01月
            var m = (dt.getMonth() + 1).toString().padStart(2, "0");
            //不足2位 前面补0
            var d =(dt.getDate()).toString().padStart(2, "0");

            if ('yyyy-mm-dd' == pattern.toLowerCase(pattern)) {
                // var formatDateStr = y +'-'+ m +'-'+d;
                // return formatDateStr;

                //相当于上面的 注意切换英文输入法 连着按两下esc下面的间隔号按键
                return `${y}-${m}-${d}`;
            } else {
                //返回时分秒
                //不足2位 前面补0
                var hh = dt.getHours().toString().padStart(2, "0");
                //不足2位 前面补0
                var mm = dt.getMinutes().toString().padStart(2, "0");
                //不足2位 前面补0
                var ss = dt.getSeconds().toString().padStart(2, "0");

                return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
            }
        });


        var vm1 = new Vue({
            el: '#app1',
            data: {
                id: '',
                name: '',
                keywords: '',
                list: [
                    { id: 1, name: '奔驰', ctime: new Date() },
                    { id: 2, name: '宝马', ctime: new Date() },
                    { id: 3, name: '路虎', ctime: new Date() }
                ]
            },
            methods: {
                add() {
                    var car = { id: this.id, name: this.name, ctime: new Date() };
                    this.list.push(car);

                    //添加完 文本框要恢复空白
                    this.id = '';
                    this.name = '';
                },
                del(id) {
                    //根据id查找出该条数据在数组中的位置 然后删除
                    //splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。
                    //some() 方法会依次执行数组的每个元素:
                    //如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
                    //如果没有满足条件的元素,则返回false。

                    //方法1
                    // this.list.some((item,i) => {
                    //     if(item.id = id){
                    //         this.list.splice(i,1);
                    //         return true;
                    //     }
                    // });

                    //方法2
                    //查找数组中元素的位置
                    var index = this.list.findIndex(item => {
                        if (item.id = id) {
                            return true;
                        }
                    });

                    this.list.splice(index, 1);
                },
                //方式1
                // search(keywords){
                //     var newList = [];
                //     this.list.foreach(element => {
                //         //遍历的数据中 包含输入的关键字
                //         if(element.name.indexof(keywords)!=-1){
                //             newList.push(element);
                //         }
                //     });
                //     return newList;
                // },
                //方式2
                search(keywords) {

                    var newList = this.list.filter(element => {
                        if (element.name.includes(keywords)) {
                            return element;
                        }
                    });

                    return newList;
                }
            },
            filters: {
                //定义私有过滤器 
                //每个过滤器都有 过滤器名称和处理函数 
                //即使私有过滤器和全局过滤器名字一样 但还是会用私有的 这里
                //过滤器的调用采用的是就近原则
                dataFormat: function (dateStr, pattern = "") {

                    //将字符串转化成Date类型 yyyy-mm-dd
                    var dt = new Date(dateStr);
                    //取出年 月 日 用-拼接起来
                    var y = dt.getFullYear();
                    //dt.getMonth()从0开始 要+1
                    var m = (dt.getMonth() + 1).toString().padStart(2, "0");
                    var d = dt.getDate().toString().padStart(2, "0");

                    if ('yyyy-mm-dd' == pattern.toLowerCase(pattern)) {
                        // var formatDateStr = y +'-'+ m +'-'+d;
                        // return formatDateStr;

                        //相当于上面的 注意切换英文输入法 连着按两下esc下面的间隔号按键
                        return `${y}-${m}-${d}`;
                    } else {
                        //返回时分秒
                        //不足2位 前面补0
                        var hh = dt.getHours().toString().padStart(2, "0");
                        //不足2位 前面补0
                        var mm = dt.getMinutes().toString().padStart(2, "0");
                        //不足2位 前面补0
                        var ss = dt.getSeconds().toString().padStart(2, "0");

                        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
                    }
                }
            }
        });

    </script>

</body>

</html>

相关阅读

什么是钩子函数

参考百度百科讲解;钩子函数是Windows消息处理机制的一部分,通过设置“钩子”,应用程序可以在系统级对所有消息、事件进行过滤,访问在

分享到:

栏目导航

推荐阅读

热门阅读