1.5.2　范例：一个简单的用户登录页面

本节尝试使用Vue来构建一个简单的登录页面。在练习之前，我们先来分析一下需要完成的工作有哪些。

（1）登录页面需要有标题，用来提示用户当前的登录状态。

（2）在未登录时，需要有两个输入框及登录按钮供用户输入账号和密码进行登录操作。

（3）在登录完成后，输入框要隐藏，需要提供按钮让用户登出。

只完成上面列出的3项功能，使用原生的JavaScript DOM操作会有些复杂，借助Vue的单双向绑定和条件渲染功能，完成这些需求则会非常容易。

首先创建一个名为loginDemo.html的文件，为其添加HTML通用的模板代码，并通过CND的方式引入Vue。之后，在其body标签中添加如下代码。

【代码片段1-24　源码见附件代码/第1章/6.loginDemo.html】

上面的代码中，v-if是Vue提供的条件渲染功能，若其指定的变量为true，则渲染这个元素，否则不渲染。v-model用来进行双向绑定，当输入框中的文字变化时，其会将变化同步到绑定的变量上，同样，当我们对变量的值进行改变时，输入框中的文本也会对应变化。

实现JavaScript代码如下。

【代码片段1-25　源码见附件代码/第1章/6.loginDemo.html】

运行上面的代码，未登录时效果如图1-15所示。当输入了账号和密码登录完成后，效果如图1-16所示。

图1-15　简易登录页面（1）

图1-16　简易登录页面（2）