vue中遇到的一些问题，data到底是function还是对象以及自动对焦

1 今天遇到的，组件里面data，用function ，而一般的页面中就是直接是对象，原因：点击打开链接 vue的官网讲了，我是把页面中的定为了fuction，有报错，才发现这个细节，好吧，自动生成代码一直没怎么注意

2 另外就是UI给的图是这样的

input框其实有限，但是我想点击这个区域，input自动聚焦，并且初次登陆的时候，自动聚焦到用户名那里，看了看官网，这么实现了

<template>
            <div id="content-box">
                <form class="login-wrap" @submit.prevent="login">
                    <div class="login">
                        <div class="title">logo</div>
                        <div class="loginItem" @click="userNameFocusClick">
                            <label>用户名</label>
                            <input maxlength="30"  v-model="userName" @blur="userNameFocus = false" v-focus="userNameFocus" v-focusinit required/>
                        </div>
                        <div class="loginItem" @click="passWordFocusClick">
                            <label>密码</label>
                            <input maxlength="18"  v-model="passWord" @blur="passWordFocus = false" v-focus="passWordFocus" required/>
                        </div>
                        <button class="loginBtn" type="submit">登录</button>
                    </div>
                </form>

            </div>
        </template>

js部分

var app = new VueRoot({
            template: 'public/pages/index/index.html',
            data:{
                    userName:'',
                    passWord:'',
                    passWordFocus:false,
                    userNameFocus:true
            },
            store: store,
            created: function() {},
            mounted: function() {

            },
            methods: {
                userNameFocusClick:function () {
                    this.userNameFocus = true
                },
                passWordFocusClick:function () {
                    this.passWordFocus = true
                },

                login:function () {
                  console.log(this.userName,this.passWord)
                }

            },
            directives: {
                focusinit: {
                    // 指令的定义
                    inserted: function (el) {
                        el.focus()
                    }
                },
                focus: {
                    update: function (el, {value}) {
                        if (value) {
                            el.focus()
                        }
                    }
                }
            },
        });
        return app;