Vue学习之自定义指令「建议收藏」

Vue学习之自定义指令「建议收藏」Vue学习之自定义指令

大家好,又见面了,我是你们的朋友全栈君。

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-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.4.0.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.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" v-model="name" @keyup.f2='add'>
                    </label>
            
                    
                    <input type="button" value="添加" 
                        class="btn btn-primary" @click='add'>

                    <label>
                        搜索名称关键字:
                        <input type="text" class="form-control" v-model="keywords">
                    </label>    
              </div>
        </div>
        
        
        
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <tr>
                    <th>id</th>
                    <th>name</th>
                    <th>cTime</th>
                    <th>操作</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 | msgDateFormat('yyyy-mm-dd hh-mi-ss') }}</td>
                    <td><a href="" @click.prevent="del(item.id)">删除</a></td>
                </tr>
            </tbody>
        </table>
        
        
        
    </div>
    <script>
        // 定义一个全局按键修饰符
        Vue.config.keyCodes.f2=113
        var vm = new Vue({
            el: "#app",
            data: {
                id:'',
                name:'',
                keywords:'',
                list:[
                    {id:1,name:'奔驰',ctime:new Date()},
                    {id:2,name:'宝马',ctime:new Date()}
                ]
            },
            methods: {
                add(){
                    // 添加记录到list中
                    this.list.push({id:this.id,name:this.name,ctime:new Date()})
                    // 将输入框置空
                    this.id=this.name=''
                },
                del(id){
                    // some方法循环数组,返回true可以终止循环
                    // this.list.some((item,i) =>{
                     //   if(item.id == id){
                            // 移除记录 1 移除一条记录
                     //       this.list.splice(i,1);
                            // 返回true 终止循环
                      //      return true;
                      //  }
                    //}) 
                    // 通过findIndex方法获取要删除记录的index
                    var index = this.list.findIndex(item => {
                        if(item.id == id){
                            return true
                        }
                    })
                    // 通过splice方法来移除记录
                    this.list.splice(index,1);
                },
                search(keywords){
                    // 保存新的数组
                   // var newList = []
                   // this.list.forEach(item => {
                        // 判断循环的记录是否包含的查询的关键字
                       // if(item.name.indexOf(keywords) != -1){
                            // 将循环的记录添加到新的数组中
                         //   newList.push(item)
                      //  }
                  //  })
                    // 返回数组信息
                   // return newList
                  // filter 过滤  返回满足条件的数组
                  return  this.list.filter(item => {
                       // includes 是否包含
                       if(item.name.includes(keywords)){
                            return item
                       }
                   })
                }
            },
            filters:{ // 通过局部过滤器来实现
                msgDateFormat:function(msg,pattern=''){
                    // 将字符串转换为Date类型
                    var mt = new Date(msg)
                    // 获取年份
                    var y = mt.getFullYear()
                    // 获取月份 从0开始 
                    var m = (mt.getMonth()+1).toString().padStart(2,"0")
                    // 获取天数
                    var d = mt.getDate();
                    if(pattern === 'yyyy-mm-dd'){
                        return y+"-"+m+"-"+d
                    }
                    // 获取小时
                    var h = mt.getHours().toString().padStart(2,"0")
                    // 获取分钟
                    var mi = mt.getMinutes().toString().padStart(2,"0")
                    // 获取秒
                    var s = mt.getSeconds().toString().padStart(2,"0")
                    // 拼接为我们需要的各式
                    return y+"-"+m+"-"+d+" "+h+":"+mi+":"+s
                }
            }
        })
    </script>
</body>
</html>

自定义全局指令

我们想创建一个自动获取焦点的指令,该功能其实可以通过

document.getElementById('search').focus()

来实现,但此处我们专门来介绍下自定义指令的实现方式

1.效果实现

定义全局指令:v-focus

// 定义全局的指令  v-focus
Vue.directive("focus",{
    bind:function(el){

    },
    inserted:function(el){
        el.focus()
    },
    updated:function(el){

    }
})

使用v-focus指令

在这里插入图片描述

效果

在这里插入图片描述

我们可以看到刷新后搜索框获取到了焦点,说明我们创建的v-focus生效了,但是大家肯定也有很多疑问,我们来一一解释下。

2.注意点说明

2.1 指令名称

Vue中所有的指令,在调用的时候,都以 v- 开头,然后在定义的时候我们不用添加v-前缀。

在这里插入图片描述

2.2 参数方法

然后就是我们在定义v-focus指令的时候的第二个参数是一个对象,这个对象身上,有一些指令相关的函数,这些函数可以在特定的阶段,执行相关的操作,那么这几个方法分别是什么含义呢?如下

 钩子方法     | 说明                                   
 -------- | ------------------------------------- 
 bind     | 每当指令绑定到元素上的时候,会立即执行这个 bind 函数,只执行一次  
 inserted | 表示元素 插入到DOM中的时候,会执行 inserted 函数【触发1次】
 updated  | 当VNode更新的时候,会执行 updated, 可能会触发多次     

2.3 方法的参数值

我们调用的bind方法或者inserted方法的参数值是怎么设置的。
第一个参数,永远是el ,表示被绑定了指令的那个元素,这个el参数,是一个原生的JS对象
第二个参数,binding:一个对象,包含以下属性

 参数         | 说明                                                                    
 ---------- | ---------------------------------------------------------------------- 
 name       | 指令名,不包括 v- 前缀。                                                        
 value      | 指令的绑定值,例如                                                             
 oldValue   | 指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。              
 expression | 字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中,表达式为 “1 + 1”。                 
 arg        | 传给指令的参数,可选。例如:v-my-directive:foo 中,参数为 “foo”。                         
 modifiers  | 一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar:true }。

2.4 什么场景下调用什么方法

上面介绍的各个方法在什么场景下调用呢?记住如下原则即可。

  • 和样式相关的操作,一般都可以在 bind 执行
  • 和JS行为有关的操作,最好在 inserted 中去执行

3.小案例

添加一个设置颜色属性的指令v-color

在这里插入图片描述

在这里插入图片描述

效果

在这里插入图片描述

传参使用
我们系统指令能够动态的接收数据来改变

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

自定义私有指令

和前面介绍的过滤器一样,全局指令其他的vm对象都可以共享,我们也可以为每个vm对象创建私有的指令,如下

在这里插入图片描述

为使用v-fontweight之前效果

在这里插入图片描述
使用之后

在这里插入图片描述
在这里插入图片描述

函数简写

在很多时候,你可能想在 bind 和 update 时触发相同行为,而不关心其它的钩子。比如这样写

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/106494.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Java取余和取模

    Java取余和取模抛开高级语言的实现,取余运算和取模运算本身并不完全一致,区别在于对负整数进行取商时操作不同。虽然这样说,但是取余运算和取模运算的公式都一样。对于x和y两个整数(int),通过以下两个操作获取余数或模数:step1、求商:intz=x/ystep2、求余数或模数:intresult=x-y*z它们的差别在于,如果z的值…

  • Golang——uint32「建议收藏」

    Golang——uint32「建议收藏」leetcode:190、1911.uint(usigned)均是无符号整型,uint、uint64占用内存64位。2.int带符号整型,占64位题目其实给定的是十进制varnumuint32=43261596,计算机内存以32位补码形式存储此数,题目说颠倒此数的二进制位,十进制变为2进制:除2取余。3.取10进制数据最低位:n%10,n=n/10;num:=9//intfor…{…}//会得到9、84.取(10进制的)2进制格式数据最低位:n%2,

  • 中文乱码合集

    中文乱码合集-Dfile.encoding=UTF-8

  • JavaScript和Java的区别[通俗易懂]

    JavaScript和Java的区别[通俗易懂]  虽然JavaScript中有Java,但他们之间的关系就如同印度和印度尼西亚一样——没有什么关系。只是JavaScript中的某些语法和Java类似而已。出身不同  Java和JavaScript是由不同公司发布的不同的产品,Java是由Sun公司发布编程语言,而JavaScript是由Netscape公司发布的脚本语言。变量不同1.变量定义时的区别  定义变量时Java和JavaScript有区别。Java是强类型的语言,它要求每个变量必须在定义时明确指出这个变量是什么类型的;而JavaS

  • pytest的assert_java单元测试断言

    pytest的assert_java单元测试断言前言断言是写自动化测试基本最重要的一步,一个用例没有断言,就失去了自动化测试的意义了。什么是断言呢?简单来讲就是实际结果和期望结果去对比,符合预期那就测试pass,不符合预期那就测试failed

  • Odin Inspector 系列教程 — Enum Toggle Buttons Attribute

    Odin Inspector 系列教程 — Enum Toggle Buttons AttributeEnumToggleButtonsAttribute特性:在水平按钮组中绘制枚举而不是下拉列表。枚举多选按钮主要是应用了System.FlagsusingSirenix.OdinInspector;usingUnityEngine;publicclassEnumToggleButtonsAttributeExample:…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号