vue自定义指令

在Vue中自定义指令:
inserted
bind
指令的简写形式
inserted:
inserted主要涉及和行为相关的指令, 来看这个界面:

现在我们想自定义一个指令v-focus,使得每次进入页面时,我们的光标都停在search的输入栏。为了实现这个功能,可以定义全局指令,代码如下:

Vue.directive('focus',{
            inserted:function(el){
                el.focus()
            }
        })
Vue.directive是自定义指令的语句
inserted:function(el)中的el不可省略
最终形成的指令为v-focus
将上述代码插入到**<script> 代码块最前端**,得到全部代码为:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .inner{
            height:30px;
            background-color:crimson
        }
    </style>
    <link href="./cssfiles/table_type1.css">
</head>
<body>
    <div id="app">
        <div class="inner">user management</div>
        <label>
            Id:<input type="text" v-model="id">
        </label>
        <label>
            Name:<input type="text" v-model="name" @keyup.enter="add">
        </label>
        <input type="button" value="add" @click="add">
        <label>
            Search:<input type="text" v-model="keywords" v-focus>
        </label>

        <table>
            <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 }}</td>
                    <td>
                        <a href="" @click.prevent="delete(item.id)">delete</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        Vue.directive('focus',{
            inserted:function(el){
                el.focus()
            }
        })
        var vm=new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                keywords:'',
                list:[
                    {id:1,name:'userA',ctime:new Date()},
                    {id:2,name:'userB',ctime:new Date()},
                    {id:3,name:'userC',ctime:new Date()}
                ],
                msg:'vue test'
            },
            methods:{
                add(){
                    var user={id:this.id,name:this.name,ctime:new Date()}
                    this.list.push(user)
                    this.id=''
                    this.name=''
                },
                delete(id){
                    this.list.some((item,i) => {
                        if(item.id==id){
                            this.list.splice(i,1)
                            return true;
                        }
                    })
                },
                search(keywords){
                    var newList=[]
                    this.list.forEach(item=>{
                        if(item.name.indexOf(keywords)!=-1){
                            newList.push(item)
                        }
                    })
                    return newList
                }
            }
        })    
        
    </script>

</body>
</html>
显示的效果为:

可以看到进入页面后,search栏的输入框内有光标


bind:
bind主要涉及样式相关的指令,还是上面那个界面,现在我们希望search文本框中字体的颜色为红色,自定义指令如下:

Vue.directive('color',{
            bind:function(el,arg){
                el.style.color=arg.value
            }
        })
这段代码的意思是,我们自定义的指令名为v-color,arg是传入参数的形参,是一个表示颜色的字符串。全部代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .inner{
            height:30px;
            background-color:crimson
        }
    </style>
    <link href="./cssfiles/table_type1.css">
</head>
<body>
    <div id="app">
        <div class="inner">user management</div>
        <label>
            Id:<input type="text" v-model="id">
        </label>
        <label>
            Name:<input type="text" v-model="name" @keyup.enter="add">
        </label>
        <input type="button" value="add" @click="add">
        <label>
            Search:<input type="text" v-model="keywords" v-color="'blue'">
        </label>

        <table>
            <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 }}</td>
                    <td>
                        <a href="" @click.prevent="delete(item.id)">delete</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
        Vue.directive('color',{
            bind:function(el,arg){
                el.style.color=arg.value
            }
        })
        var vm=new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                keywords:'',
                list:[
                    {id:1,name:'userA',ctime:new Date()},
                    {id:2,name:'userB',ctime:new Date()},
                    {id:3,name:'userC',ctime:new Date()}
                ],
                msg:'vue test'
            },
            methods:{
                add(){
                    var user={id:this.id,name:this.name,ctime:new Date()}
                    this.list.push(user)
                    this.id=''
                    this.name=''
                },
                delete(id){
                    this.list.some((item,i) => {
                        if(item.id==id){
                            this.list.splice(i,1)
                            return true;
                        }
                    })
                },
                search(keywords){
                    var newList=[]
                    this.list.forEach(item=>{
                        if(item.name.indexOf(keywords)!=-1){
                            newList.push(item)
                        }
                    })
                    return newList
                }
            }
        })    
        
    </script>

</body>
</html>
可以看到search输入框部分的代码为:

<label>
            Search:<input type="text" v-model="keywords" v-color="'blue'">
</label>
注意这里"‘blue’“是一个字符串(双引号内单引号),如果写成"blue”(只有双引号)则代码会在data数据块中找变量blue而不是识别blue这个字符串。
显示的效果为:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值