zoukankan      html  css  js  c++  java
  • Vue ref

    一、位置

    生命周期的mounted

    二、作用

    1、获取原始的DOM

    给input标签添加focus属性

    <!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>
    </head>
    <body>
        <div id="app">
            <App />
        </div>
        <script src="./js/vue.js"></script>
        <script src="./js/vue-router.js"></script>
        <script>
            let App = {
                data(){
                    return {
                        msg: "测试"
                    }
                },
                template: `
                    <div>
                        <p>{{msg}}</p>
                        <input type="text" ref="test">    
                    </div>
                `,
                mounted(){
                    var temp = this.$refs.test;
                    console.log(temp);  // <input type="text"> 原始DOM资源
                    temp.focus();
                }
            }
            new Vue({
                el: "#app",
                data(){
                    return {
    
                    }
                },
                components:{
                    App
                }
    
            })
        </script>
    </body>
    </html>

    2、获取组件实例化对象

    <!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>
    </head>
    <body>
        <div id="app">
            <App ref="foo"></App>
        </div>
        <script src="./js/vue.js"></script>
        <script src="./js/vue-router.js"></script>
        <script>
            let App = {
                data(){
                    return {
                        msg: "测试"
                    }
                },
                template: `
                    <div>
                        <p>{{msg}}</p>
                        <input type="text" ref="test">    
                    </div>
                `,
                mounted(){
                    var temp = this.$refs.test;
                    // console.log(temp);  // <input type="text"> 原始DOM资源
                    temp.focus();
                }
            }
            new Vue({
                el: "#app",
                data(){
                    return {
    
                    }
                },
                components:{
                    App
                },
                // 箭头函数的单体对象
                mounted(){
                    var temp = this.$refs.foo;
                    console.log(temp); // VueComponent
                }
    
            })
        </script>
    </body>
    </html>
  • 相关阅读:
    .Net Core 微服务学习一
    微服务学习一
    软件开发基本接口学习二
    浏览器根对象window之操作方法
    浏览器根对象window之caches
    Angular面试题三
    浏览器根对象window之performance
    Angular面试题二
    浏览器根对象window之screen
    浏览器根对象window之history
  • 原文地址:https://www.cnblogs.com/wt7018/p/11509483.html
Copyright © 2011-2022 走看看