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

最新推荐文章于 2024-06-25 10:16:38 发布

一只前端蜗牛

最新推荐文章于 2024-06-25 10:16:38 发布

阅读量231

点赞数

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

本文链接：https://blog.csdn.net/yingzi_0322/article/details/106218583

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

这个案列中详述了：自定义按键修饰符，自定义指令，自定义过滤器
复习了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>

一只前端蜗牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue中品牌列表案例及涉及到的知识点--完整可执行

这个案列中详述了：自定义按键修饰符，自定义指令，自定义过滤器复习了v-model v-for自定义按键修饰符按键修饰符 .后加键系统提供的有 enter,tab,delete,esc,space,up,down,left,right;如果要用别的，则可以使用键盘码（键盘上的每个键都对应一个码比如113=f2)，则是@keyup.113=“add”如果不用码则需要自定义按键修饰符,如本例中定义的f2 写法是@keyup.f2=“add”自定义指令如果需要给keywords添加默认获得
复制链接

扫一扫

专栏目录