起步
<h1>一个简单的例子：登录页</h1>
<p>假设我们需要制作一个包含 用户名、密码 两个表单项的页面，并且我们有一个用于登录的接口，如下所示：</p>
<ul>
<li>接口地址
<a href="https://www.demo.com/user/login">https://www.demo.com/user/login</a></li>
<li>请求方式
POST</li>
<li>请求字段
用户名 - username - 必填
密码 - password - 必填</li>
</ul>
<p>基于Vue来构建一个简单的登录页面，有如下代码：</p>
<pre><code class="language-HTML"><template>
<div class="login-page">
<div>
<input placeholder="请输入用户名" v-model="model.username"/>
</div>
<div>
<input placeholder="请输入密码" type="password" v-model="model.password"/>
</div>
<div>
<button @click="onLoginClick">
登录
</button>
</div>
</div>
</template></code></pre>
<h6>完全可以使用其它的框架来构建这个页面，比如 React</h6>
<p>以上代码中可以看出，登录页面由两个 input 和一个 button构成，通过vue的 v-model 和 @click 很容易就实现了数据的双向绑定和监听按钮的点击事件</p>