欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue中品牌列表案例及涉及到的知识点--完整可执行

程序员文章站 2022-05-15 18:41:11
...

这个案列中详述了:自定义按键修饰符,自定义指令,自定义过滤器
复习了v-model v-for

自定义按键修饰符

按键修饰符 .后加键 系统提供的有 enter,tab,delete,esc,space,up,down,left,right;
如果要用别的,则可以使用键盘码(键盘上的每个键都对应一个码 比如113=f2),则是@keyup.113=“add”
如果不用码则需要自定义按键修饰符,如本例中定义的f2 写法是@keyup.f2=“add”

自定义指令

如果需要给keywords添加默认获得焦点 但不用document.getElementById(“keywordtext”).focus(),则使用自定义指令,详细用法看代码

自定义过滤器

其他

在案例代码中还复习了@click.prevent事件修饰符
this.bandList.forEach
this.bandList.filter
this.bandList.some
this.bandList.findIndex
this.bandList.splice(id,1)
this.bandList.push
这些用法

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8">
        <script src="vue.js"></script>
        <title>品牌列表</title>
    </head>
    <body>
        <!-- 这个案列中详述了:自定义键盘修饰符,自定义指令,自定义过滤器 -->
        <div id="app">
            <div>
                <h3>品牌列表</h3>
                <label>id<input type="text" v-model="newid"></label>
                <!-- 按键修饰符 .后加键 系统提供的有  enter,tab,delete,esc,space,up,down,left,right;
                     如果要用别的,则可以使用键盘码(键盘上的每个键都对应一个码  比如113=f2),则是@keyup.113="add"
                     如果不用码则需要自定义按键修饰符,如本例中定义的f2  写法是@keyup.f2="add"
                -->
                <label>name<input type="text" v-model="newname" @keyup.f2="add"></label>
                <input type="button" @click="add" value="添加品牌">

                <!-- 如果需要给keywords添加默认获得焦点  但不用document.getElementById("keywordtext").focus(),则使用自定义指令-->
                <!-- 如果v-color中不加'',-->
                <input type="text" v-model="keywords" id="keywordtext" v-focus v-color="'blue'" v-fontWeight="900" v-fontSize="20">
            </div>
                <table border="1">
                    <tbody >
                        <tr>
                            <th>索引</th>
                            <th>id</th>
                            <th>name</th>
                            <th>ctime</th>
                            <th>操作</th>
                        </tr>
                        <!-- research(keywords) 为什么可以直接拿到keywords-->
                        <tr v-for="(item,i) in research(keywords)" :key="i"> 
                            <td>{{ i }}</td>
                            <td>{{ item.id }}</td>
                            <td>{{ item.name }}</td>
                            <td>{{ item.ctime | timeFormat('yyyy-mm-dd') }}</td>  
                            <td><a href="" @click.prevent="del(i)">删除</a></td>
                            <!-- <td><a href="" @click.prevent="del(item.id)">删除</a></td> --> 
                        </tr>
                    </tbody>
                    
                </table>
        </div>
        <script>
            //这行代码如果放在script的最上面则没用,放在最下面则可以生效 
            //document.getElementById('keywordtext').focus()
            //不用上面的dom操作,使用自定义指令v-focus 定义的时候不用加v- ,这个自定义指令如果放在vm实例的后面,则加载页面会报错
            //参数二是个对象,有一些钩子函数,在特定的阶段执行相关的操作
            //这个也可以在vm实例中定义为私有指令
            //和js行为有关的在inserted中执行,和样式有关在bind执行
            Vue.directive("focus",{
                //钩子函数的第一个参数是被绑定了指令的元素,是原生的dom对象
                //钩子函数的第二个参数是一个对象binding,里面有属性(name,value,oldvalue,expression,arg,modifiers)
                bind:function(el){  //指令绑定到元素上时执行,只执行一次
                    el.focus()   //放在这里不起作用,因为这时元素还没有被渲染
                }, 
                inserted:function(el){ //当元素插入到dom中时会执行
                    el.focus()   
                },
                updated:function(el){ //当vnode更新的时候执行,可能会触发多次

                }
            })

            Vue.directive("color",{
                bind:function(el,binding){
                    console.log(binding.value)
                    el.style.color = binding.value  //这个样式的操作可以在bind中执行
                }
            })

            //定义自定义键盘修饰符   键盘上的每个键都对应一个码  比如113==f2
            Vue.config.keyCodes.f2 = 113

            //过滤器函数中的第一个参数是固定的是源数据,后面的是参数,提高程序健壮性,可以使用es6  pattern = ''给一个初始值
            Vue.filter("timeFormat",function(data , pattern = ''){  
                var dt = new Date(data)
                var y = dt.getFullYear()
                var m = dt.getMonth() + 1 //getMonth 返回值是从0 开始的
                var d = dt.getDate() 
                if(pattern.toLowerCase == 'yyyy-mm-dd'){
                    //return y + '-' + m + '-' + d
                    return `${y}-${m}-${d}` //模板字符串 ES2015新增的符号
                }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:{
                    bandList:[
                        {id:1,name:"奥迪",ctime:new Date()},
                        {id:2,name:"宝马",ctime:new Date()}
                    ],
                    newid:'',
                    newname:'',
                    keywords:''
                },
                methods: {
                    add(){
                        var car = {id:this.newid,name:this.newname,ctime:new Date()}
                        this.bandList.push(car)
                    },
                    research(keywords){
                        //方法一:使用forEach 循环原数组,符合条件则插入到新数组
                        //var newList = []
                        //forEach循环所有元素,some找到就返回
                        // this.bandList.forEach(item => {
                        //     if(item.name.indexOf(keywords)!=-1){
                        //         newList.push(item)
                        //     }
                        // });
                        // return newList
                        //方法二:使用filter 进行过滤
                        return this.bandList.filter(item=>{
                            if(item.name.includes(keywords)){
                                return item
                            }
                        })
                        
                    },
                    del(id){  //如果传入的值是item.id,那么该值是id;如果传入的是索引(i),则该值是索引
                        //方法一:用some循环删除数组中的元素
                        // this.bandList.some((item,i)=>{   //some函数需要传一个回调函数
                        //     if(item.id == id){
                        //         this.bandList.splice(i,1) //删除数组中的元素,从i开始,删一个
                        //         //在list的some循环中如果return true会立即终止数组的循环
                        //         return true
                        //     }
                        // })
                        //方法二:使用findIndex查找数组中的元素索引,
                        // var index = this.bandList.findIndex(item=>{
                        //     if(item.id == id){
                        //         return true
                        //     }
                        // })
                        // console.log(index)
                        // this.bandList.splice(index,1)
                        //方法一和方法二是在id值唯一的情况下,如果id不唯一,则会出错
                        //方法三:直接传入索引值
                        this.bandList.splice(id,1)
                    }
                },
                filters:{   //私有的过滤器   如果私有和公有的名称一致,优先使用私有的
                    timeFormat : function(data,pattern){
                        var dt = new Date(data)
                        var y = dt.getFullYear()
                        //var m = dt.getMonth() + 1 //getMonth 返回值是从0 开始的
                        var m = (dt.getMonth() + 1).toString().padStart(2,'0') //使用es6的padStart函数,总长度为2,不足时在前面补0
                        var d = dt.getDate() 
                        if(pattern.toLowerCase == 'yyyy-mm-dd'){
                            //return y + '-' + m + '-' + d
                            return `${y}-${m}-${d}`
                        }else{
                            var hh = dt.getHours()
                            var mm = dt.getMinutes()
                            var ss = dt.getSeconds()
                            return `${y}-${m}-${d} ${hh}:${mm}:${ss}----`
                        }
                    }
                },
                directives:{
                    'fontweight': {
                        bind:function(el,binding){
                            el.style.fontWeight = binding.value
                        }
                    },
                    //自定义指令的函数可以简写,这种写法表示将bind和update上都是执行这个
                    'fontsize':function(el,binding){ //fontsize 不能写成fontSize
                        el.style.fontSize = parseInt(binding.value)+'px'
                    }
                }
            })   
	</script>

    </body>
</html>

相关标签: vue vue