vue自定义全局过滤器、全局指令、按键修饰符

最新推荐文章于 2022-12-20 20:44:20 发布

你是人间五月天

最新推荐文章于 2022-12-20 20:44:20 发布

阅读量603

点赞数

分类专栏： vue 文章标签： vue 前端

本文链接：https://blog.csdn.net/u012758488/article/details/89892300

版权

vue 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

<!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>
    <script src="vue.js"></script>
    <link rel="stylesheet" href="bootstrap.css">
</head>
<body>
    <div id="app">

        <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">添加品牌</h3>
            </div>
            <div class="panel-body form-inline">
                <label>
                    id: <input type="text" class="form-control" v-model="id">
                </label>
                <label>
                    name: <input type="text" class="form-control" @keyup.enter="add" v-model="name">
                </label>
                <input type="button" value="添加" @click="add" class="btn btn-primary">
                <label>
                    搜索名称关键字: <input type="text" class="form-control" v-model="keywords" v-focus v-color="'blue'" >
                </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(keywords)" :key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.cTime | dateFormat }}</td>
                    <td>
                        <a href="javascript:void(0)" @click="del(item.id)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</body>
<script>
    //定义全局过滤器,时间格式化
    Vue.filter('dateFormat',function(dateString){
        var dt = new Date(dateString);
        var y = dt.getFullYear();
        var m = (dt.getMonth()+1).toString().padStart(2,'0');
        var d = dt.getDate().toString().padStart(2,'0');
        return `${y}-${m}-${d}`;
    })
    //定义全局指令
    //参数一是指令的名称，注意，在定义的时候，指令的名称前面不需要加 V- 前缀
    //但是，在调用的时候必须在指令名称前加上 V- 前缀来调用
    //参数二是一个对象，这个对象身上，有一些指令相关的函数，这些函数可以在特定的阶段，执行相关的操作
    Vue.directive('focus',{
        bind: function(element){
            //当指令绑定到元素上的时候会立即执行这个函数，只执行一次
            //element表示被绑定了指令的那个元素
            //element.focus();//在元素刚绑定了指令的时候，还没有插入到DOM中去，这时候调用focus方法无用，一个元素只有插入DOM之后才能获取焦点
        },
        inserted: function(element){
            //元素被插入到DOM中时会执行这个函数
            element.focus();
        },
        updated: function(){
            //当VNode更新时，会执行updated，可能会出发多次
        },
    });
    //自定义一个设置字体颜色的指令
    Vue.directive('color',{
        //样式，只要通过指令绑定给了元素，不管这个元素有没有被插入到页面中去，这个元素肯定有了一个内联的样式
        //将来元素肯定会显示到页面中，这时候，浏览器的渲染引擎必然会解析样式，应用给这个元素
        bind: function(element,binding){
            //和样式相关的操作，一般都可以在bind中执行
            element.style.color = binding.value
        },
       
    });

    //创建一个vue实例
    //当我们导入包之后，在浏览器的内存中就多了一个vue构造函数
    var vm = new Vue({
        el: '#app',//表示当前我们new的这个vue实例要控制页面上的哪个区域
        data: { //data属性中存放的是el中要用到的数据
            list: [
                {id: 1,name: 'aaaa',cTime: new Date()},
                {id: 2,name: 'bbbb',cTime: new Date()}
            ],
            id: '',
            name: '',
            keywords: ''
        },
        methods: {
            add: function(){
                this.list.push({id: this.id,name: this.name,cTime: new Date()});
                this.id = '';
                this.name = '';
            },
            del(id){
                //第一种
                // this.list.some((item,i)=>{
                //     if(item.id==id){
                //         //删除数组元素
                //         this.list.splice(i,1);
                //     }
                //     return true;
                // });
                //第二种
                var index = this.list.findIndex(item=>{
                    if(item.id ==id){
                        return true;
                    }
                })
                this.list.splice(index,1);
            },
            //根据关键字搜索
            search(keywords){
                //第一种
                // var newList = [];
                // this.list.forEach(item => {
                //     if(item.name.indexOf(keywords)!=-1){
                //         newList.push(item);
                //     }
                // });
                // return newList;
                //forEach some filter findIndex都属于数组的新方法，都会对数组的每一项遍历，执行相关操作
                return this.list.filter(item=>{
                    //if(item.name.indexOf(keywords)!=-1)
                    //ES6中为字符串提供了新方法，字符串如包含则返回true，
                    if(item.name.includes(keywords)){
                        return item;
                    }
                })
            }
        }
    });
</script>
</html>

你是人间五月天

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue自定义全局过滤器、全局指令、按键修饰符

<!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-...
复制链接

扫一扫