Vue

<template>
    <div class="person_email">
        <div class="contain_email">
            <x-header :left-options="{backText: ''}">修改邮箱</x-header>
            <img class="qrcodeimg" src="../../../assets/new/email.png" alt="">
            <p>当前邮箱:&nbsp;&nbsp;{{email}}</p>
            <group class='input_'>
                <x-input ref="email" placeholder="输入邮箱" v-model="new_email" @on-click-clear-icon="clear_Email">
                </x-input>
            </group>
            <group title="" class='input_'>
                <x-input placeholder="验证码" v-model="psw" @on-click-clear-icon="clear_psw">
                    <x-button slot="right" type="primary" mini @click.native="get_psw"  v-bind:disabled="isDisabled">{{post_psw}}</x-button>
                </x-input>
            </group>
            <div class="button_">
                <x-button type="primary" @click.native="submit">提交</x-button>
            </div>
        </div>
    </div>
</template>
<script>
    import { updatePhomail } from '@/controller/corp/update_phomail'
    import { changeEmail } from '@/controller/corp/change_email'
    import dateutil from '@/util/date'
    import { XHeader, Cell, Group, Panel, Confirm, CellBox, XInput, XButton } from 'vux'
    import KpBottomBtn from '@/plugin/bottombtn'
    export default {
        name: 'mine',
        props: ['mine'],
        data() {
            return {
                email: JSON.parse(sessionStorage.getItem('agentStaffRes')).agentStaffEmail || "无邮箱信息",
                new_email: "",
                psw: "",
                time:60,
                isDisabled:false,
                post_psw:'获取验证码'
                
            }
        },
        components: {
            XHeader,
            Group,
            Cell,
            Panel,
            KpBottomBtn,
            Confirm,
            CellBox,
            XInput,
            XButton
        },
        computed: {
            profile() {
                let corpRole = ''
                let isInner = this.agentLoginStaff ? this.agentLoginStaff.agentType : ''
                if(isInner) {
                    corpRole = isInner === 0 ? '(外部账号)' : '（内部账号）'
                } else {
                    corpRole = ''
                }
                let profile = {
                    src: require('../../../assets/user_default.png'),
                    title: this.agentLoginStaff ? (this.agentLoginStaff.agentStaffName + ' | ' + this.agentLoginStaff.agentStaffPhone) : '',
                    desc: this.agentLoginStaff ? this.agentLoginStaff.agentName + corpRole : ''
                }
                if(this.agentLoginStaff) {
                    profile.src = this.agentLoginStaff.agentStaffAvatar
                }
                return [profile]
            }
        },
        mounted() {
            this.$refs.email.focus()
        },
        methods: {
            get_psw() { //验证邮箱接口
                let _this = this;
                _this.isDisabled = true;
                let interval = window.setInterval(function() {
                    _this.post_psw =  _this.time + 's后重试';
                    --_this.time;
                    if(_this.time < 0) {
                        _this.post_psw = "获取验证码";
                        _this.time = 10;
                        _this.isDisabled = false;
                        window.clearInterval(interval);
                    }
                }, 1000);
                changeEmail({
                    email: this.new_email
                })
            },
            submit() { //提交            
                updatePhomail({
                    accountId: JSON.parse(sessionStorage.getItem('agentStaffRes')).accountId,
                    type: 2,
                    code: this.psw,
                    number: this.new_email,
                    callback: res => {
                        let temp = JSON.parse(sessionStorage.agentStaffRes)
                        temp.agentStaffEmail = this.new_email
                        sessionStorage.setItem('agentStaffRes', JSON.stringify(temp))
                        this.$router.push('/person_center')
                    }
                })
            },
            clear_Email(){
                this.new_email = ''
            },
            clear_psw(){
                this.psw = ''
            }
        }
    }
</script>
<style lang="less">
    .contain_email {
        img {
            display: block;
            margin: auto;
            margin-top: 30px;
            margin-bottom: 30px;
        }
        p {
            text-align: center;
            font-weight: bold;
        }
        .input_ {
            width: 329px;
            margin: auto;
            display: block;
        }
        .button_ {
            width: 329px;
            margin: auto;
            height: 44px;
            margin-top: 44px;
        }
    }
</style>

这样光标在此页面的时候就可以定位到input标签上。

环境：要引入vux，脚手架的环境才能复制看到效果，所以看方法就好了。

用refs的时候如果是普通DOM元素就是指向DOM元素

<input type="text"  id="input" ref="input"/ >//此时refs和DOM的效果是一致

console.log(1111111111,this.$refs.input1,documentElement.get)Byid("input1")

如果是再组件上用就会指向组件实例，被解析成为了一个对象的形式。

当v-for和ref一起连用的时候也是返回一个对象。

<ul v-for="item in this.list">
        <li ref="item">{{item.name}}</li>
    </ul>
  </div>
</template>

<script>
    
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'home',
  components: {
    HelloWorld
  },
  data:function(){// 在实例中data是对象, 在组件中data就得是函数返回对象
      return{
          list:[{name:111},{name:2222}] 
      }
               
  },
  methods:{
      ko() {
          console.log(document.getElementById("df"))
          console.log(this.$refs.df)
          console.log(this.$refs.item)//(2)[li,li]
      }
  }
}
</script>