Vue.js Day3

+、=这样写博客记录其实挺累的。。，嘛，慢慢坚持吧。还是继续记录学到的一些东西。

bootstarp创建网页布局

1. 下个bootstarp,link herf导入，
2. [bs3-table]

class后加form-inline
可以让内容在一行内显示

表格弄添加的方法。

        data:{
            id:'',
            name:'',
            keywords:'',  //搜索的关键字
            list:[
                {id:1,name:'鼠标',ctime:new Date()},
                {id:2,name:'键盘',ctime:new Date() },
                {id:3,name:'耳机',ctime:new Date() },
                {id:4,name:'显示屏',ctime:new Date() },
            ],
add(){  //添加的方法 
                //  获取到id和name   组织出一个对象   把这个对象调用数组方法添加到list里
                var listName = {id:this.id,name:this.name,ctime:new Date()};
                this.list.push(listName);
                this.id = this.name = '';
            },

添加的方法总结：拿到id和name，创建新时间，让他组合成一个对象，用push推进list里去,最后在把名字和id设置成空是因为获取需要

删除的方法： 根据id删除

//如何根据id找到这一项的索引？

                // this.list.some((item,i) =>{
                //     if(item.id == id){
                //         this.list.splice(i,1);
                //         //some方法中，传输true则代表终止循环。
                //         return true;
                //     }
                // })

               var index =  this.list.findIndex(item =>{
                    if(item.id == id){
                        
                        return true;
                    }
                })
                this.list.splice(index,1);
            },

根据关键字进行搜索:

<tr v-for="item in search(keywords)" :key="item.id">
   //根据关键字进行数据搜索
                var newlist = [];
                this.list.forEach(item =>{
                    if(item.name.indexOf(keywords) != -1){
                        newlist.push(item);
                    }
                })
                return newlist;
            },

公有/私有过滤器

    //过滤器的定义语法
     Vue.filter('过滤器的名称',function(data){
         return data+"123";
     })

如何定义私有过滤器？
在示例下定义filters 
filter:{
    过滤器名称:处理函数(){
        逻辑……
    }
} 
过滤器调用采用就近原则，如果私有与全局的过滤器名称一致了，
会先调用私有的过滤器

公有过滤器（rbq）即是在script标签下直接定义。
Vue.filter(‘过滤器名’,function(){
…
}

时间名格式重置在过滤器里处理过程

var dt = new Date(dateStr);
        
        
        var y = dt.getFullYear();
        var m = (dt.getMonth() + 1).toString().padStart(2,'0');
        var d = (dt.getDate()).toString().padStart(2,'0');
        
        
        if(quanxian && quanxian.toLowerCase() === 'yyyy-mm-dd'){
            return `${y}-${m}-${d}`;
        }else{
            var hh = (dt.getHours()).toString().padStart(2,'0');
            var mm = (dt.getMinutes()).toString().padStart(2,'0');
            var ss = (dt.getSeconds()).toString().padStart(2,'0');

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

调用过滤器 用管道符号~ 可以多个过滤器 加管道符号就彳亍

<!-- 过滤器调用的格式  {{name | nameope}} -->

padStart 可以用于给字符串补0 是字符串的方法

{{dt | dateFormat}}

键位修饰符

.enter .tab .delete .esc .space .up .down .right .left （Vue提供）
使用：@keyup.接这些=“函数名”
.(点)后也可以接keycode码

自定义全局键值修饰符
script标签下直接
Vue.config.keyCodes.要设置的键值修饰符名称 = keycode码;
例:Vue.config.keyCodes.f1 = 112;

全局自定义指令 （v-xxxxx这种）

Vue.directive(’’,{})

参数一:指令的名称 (定义的时候，指令前面不需要加v-前缀，但是调用的时候需要加v-前缀)
参数二:是一个对象 (对象身上有一些指令相关函数，这些函数可以在特定阶段执行相关操作

例:

Vue.directive('focus',{   //刚学这三
	bind:function(){},
	inserted:function(){},
	updateed:function(){}
})

调用方式:

<input type="text" class="form-control" v-model="keywords" v-focus >

directive bind
每当指令绑定到这个元素的时候，就会执行这个bind函数,并且只执行一次

directive inserted
insert表示元素插入到dom中的时候，会执行inserted函数,并且只执行一次

direcitive update
//当VNode更新的时候，会执行updated，可能会触发多次

Vue.directive('focus',{  
	bind:function(el){
		 //在元素刚绑定指令的时候，还没有插入到dom树里，这时候调用focus是没有作用的
        // 
       //  el.focus()
        // console.log()
        // 在每个函数中，第一个参数永远是el，表示被绑定了的指令的那个元素，这个el参数是一个原生js dom对象
	},
	inserted:function(el){
	 el.focus()
            console.log(el)},
	updateed:function(){}
})

简而言之，el代表了当前的这个元素（标签），故才能点出方法

总结:JS操作一般放在inserted操作，样式一般放bind操作

自定义私有指令:在示例里添加directives
例:

directives:{   //自定义私有指令
            'fontweight':{
                bind:function(el,binding){
                    el.style.fontweight = binding.value;
                }
            }

函数简写

大多数情况下,我们可能想在bind 和update 钩子上做重复动作,并且不想关心其它的钩子函数。可以这样写:

Vue.directive(‘color-swatch'，function (el, binding) {
el.style.backgroundColor = binding.value   
})

这样 这个里面的代码会在bind和update都写了一份。

害。。越写越觉得麻烦了。。时间也不早了 睡大觉 不可能日更的……(¦3[▓▓] 晚安