回到项目，我们继续再编辑一下这个登录组件，先设置一下页面的标题，可以用一个 title 属性或者 title 方法。如果是方法返回的东西就是页面的标题内容。用户登录。在浏览器上观察一下，现在标签栏上就会显示刚才在组件里设置的页面标题。

数据

这个登录组件上的主要内容就是一个登录表单，主要有两个表单字段，用户名还有密码。先在组件的数据里面添加两个数据，一个是 name 表示用户名，默认的值是空白，还有一个是 password，表示用户的密码，默认值也是空白。

模板

下面再处理一下组件的模板。在这个包装元素上添加一个类，名字是 auth-login，在这个组件的 style 里面，设计一下 .auth-login 这个类的样式，用 max-width ，把最大宽度 设置成 520 像素。 margin 是 0 auto ，再添加 32 像素的内边距。

继续再编辑组件的模板，在这个 div 元素里面，再添加一个 div ，上面加上 form 这个类，里面包装的是一个 h1 元素，上面加上 header ，标题文字是 用户登录。

然后是表单里的一些字段，一个 div 加上 field 类，里面包装的是一个文本框，一个 text 类型的 input 元素。

再用 placeholder 属性设置一下占位符文字，这个字段是让用户输入用户名用的。 v-model 绑定一个数据，数据的名字叫 name ，用户在这个文本框里输入内容的时候，会改变组件里的 name 这个数据的值，组件里的 name 数据的值有变化的时候，也会体现在这个文本框上。

复制一份，再添加一个密码字段，字段的类型设置成 password， 占位符文字是 密码， v-model 绑定的数据是组件里的 password。

下面可以再添加一个提交表单用的按钮，一个 div，上面加上 field ，里面包装的是一个 button 元素，按钮文字是 登录。 元素上加上两个类，一个是 button ，还有一个是 large。 等会儿在样式表里用这些类可以设计元素的样式。

在这个按钮元素上绑定一个点击事件，发生点击事件的时候执行一下 onClickLoginButton 这个方法。

事件处理

在组件的方法里要定义这个方法，在这个 methods 选项里面，添加一个方法，名字是 onClickLoginButton，在这个方法里可以先在控制台上输出点内容，输出组件里的 name ，还有 password 这两个数据的值。

测试

在浏览器上试一下，现在这个登录页面上会出现两个文本框，输入用户名，再输入一个密码，在这些文本框里输入内容的时候就会改变登录组件里对应的数据的值。

点击 登录。在控制台上会输出组件里的 name 还有 password 这两个数据的值。它们就是要登录的用户的用户名，还有对应的密码。