10.Vue.js : 自动获取焦点dom版本-ref

最新推荐文章于 2023-11-07 09:36:56 发布

屋顶上的小喵

最新推荐文章于 2023-11-07 09:36:56 发布

阅读量1.1k

点赞数

分类专栏： Vue.js 文章标签： Vue.js ref获取焦点

本文链接：https://blog.csdn.net/vivian_1122/article/details/88738731

版权

Vue.js 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

mounted

mounted 钩子函数很特殊，他表示页面一加载进来就执行函数里面的内容（和window.onload类似）；

注意：mounted钩子函数的名字不能随便取，不能写在methods属性中

ref

ref 属性表示对dom的引用，它的值可以随便取，但是不能重复

<input type="text" v-model="newId" id='inputId' ref='inputRefId'> 

mounted() {
            // document.getElementById('inputId').focus()原生js方式实现的
            //通过this.$refs.ref的值--来获取dom
              this.$refs.inputRefId.focus()
      }

自定义获取焦点自定义指令版本

<input type="text" v-model="newId" id='inputId' ref='inputRefId' v-myfocus> 

自定义指令通过Vue.directive()创建,它包含两个参数，一个是自定义指令的名字，可以随便取；
但是全部小写，另一个是一个对象，表示自定义指令的配置项。

//这里实际上创建的是v-myfocus指令
        Vue.directive('myfocus', {
            //inserted钩子函数，它表示自定义指令插入到标签中的时候就执行
            //inserter钩子函数有两个参数（el,bingding) el表示使用自定义指令的元素，binding表示自 
             定义指令的信息
            inserted(el, binding) {
                el.focus();
            }
        })

<input type="text" v-model="newId" id='inputId' ref='inputRefId' v-myfocus v-mycolor='color'> 

 //创建是的v-mycolor='color'指令
        Vue.directive('mycolor', {
            inserted(el, binding) {
                //binding.value可以获取传入自定义指令中的属性的值
                el.style.color = binding.value
            }
        })

<!DOCTYPE html>
<html lang="en">

<head>
    <title>列表展示删除添加</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="./vue.js"></script>
    <style>
        #app {
            width: 600px;
            margin: 20px auto;
        }
        
        .dv1,
        .dv2 {
            border: 1px solid black;
            margin-bottom: 10px;
            padding: 5px;
        }
        
        table {
            width: 600px;
            border-right: 1px solid black;
            border-top: 1px solid black;
        }
        
        .tb th {
            width: 600px;
            background-color: blue;
            color: white;
            border-bottom: 1px solid #000;
        }
        
        .tb th,
        .tb td {
            border-left: 1px solid black;
            border-bottom: 1px solid #000;
            text-align: center;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="dv1">
            编号：
            <input type="text" v-model="newId" id='inputId' ref='inputRefId' v-myfocus v-mycolor='color'> 品牌名称：
            <input type="text" v-model="newName">
            <input type="button" value="添加" @click='addData'>
        </div>
        <div class="dv2">
            品牌名称：
            <input type="text" placeholder="请输入搜索条件">

        </div>
        <div class="tb">
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <th>编号</th>
                    <th>品牌名称</th>
                    <th>创立时间</th>
                    <th>操作</th>
                </tr>
                <tr v-for='(item,index) in list' :key='index'>
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.ctime}}</td>
                    <td><a href="#" @click='deleteData(index)'>删除</a></td>
                </tr>
                <tr v-if='list.length===0'>
                    <td colspan='4'>没有品牌数据</td>
                </tr>
            </table>
        </div>
    </div>
    <script>
        //这里实际上创建的是v-myfocus指令
        Vue.directive('myfocus', {
            //inserted钩子函数，它表示自定义指令插入到标签中的时候就执行
            //inserter钩子函数有两个参数（el,bingding) el表示使用自定义指令的元素，binding表示自定义指令的信息
            inserted(el, binding) {
                el.focus();
            }
        })
        //创建是的v-mycolor='color'指令
        Vue.directive('mycolor', {
            inserted(el, binding) {
                //binding.value可以获取传入自定义指令中的属性的值
                el.style.color = binding.value
            }
        })
        var vm = new Vue({
            el: '#app',
            data: {
                newId: '',
                newName: '',
                color: 'red',
                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()
                }, ]
            },
            // mounted() {
            // document.getElementById('inputId').focus()原生js方式实现的
            //通过this.$refs.ref的值--来获取dom
            // this.$refs.inputRefId.focus()
            // },
            methods: {
                deleteData(idx) {
                    this.list.splice(idx, 1)
                },
                addData() {
                    this.list.push({
                        id: this.newId,
                        name: this.newName,
                        ctime: new Date()
                    })
                }
            }
        })
    </script>
</body>

</html>

屋顶上的小喵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
10.Vue.js : 自动获取焦点dom版本-ref

mountedmounted 钩子函数很特殊，他表示页面一加载进来就执行函数里面的内容（和window.onload类似）；注意：mounted钩子函数的名字不能随便取，不能写在methods属性中refref 属性表示对dom的引用，它的值可以随便取，但是不能重复<input type="text" v-model="newId" id='inputId' ref...
复制链接

扫一扫