Vue:入门级demo

/ Vue / 没有评论 / 1446浏览

这是一个Vue实例

是进入页面,输入用户民和密码,Vue.js获取到之后通过alert打印出来。

以下代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script type="text/javascript" src=".//vue.min.js"></script>
</head>
<body>
   <div id="app1">
       <div class="top-tips"> {{ tpsMsg }} </div>
       <div class="input-wrapper">
           <div class="flex wrapper-item">
               <label for="account" class="flex2 item-name">帐号/手机号</label>
               <div class="flex4 item-input">
                   <input id="account" type="tel" maxlength="11" placeholder="帐号/手机号" autofocus="autofocus" v-model="account">
               </div>
           </div>
           <div class="flex wrapper-item">
               <label for="password" class="flex2 item-name">密码</label>
               <div class="flex4 item-input">
                   <input id="password" type="password" placeholder="输入授权密码" v-model="password">
               </div>
           </div>
       </div>
       <div class="flex vertical-center license">
           <div class="checked"></div>
           <div class="text">我已阅读并同意</div>
           <div><a href="javascript:void(0);">《授权协议》</a>
           </div>
       </div>
       <div class="bottom-button">
           <button id="app1-next-btn" type="button"  class="next-button" v-on:click="nextButtonClick">开始授权</button>
       </div>
   </div>
   <script>
       var app1 = new Vue(
           {
               el: '#app1',
               data: {
                   tpsMsg: '我们不会保存您的帐号密码,仅采集与您信用相关的信息。您的信息受严密保护,不对外公开',
                   account: '',
                   password: ''
               },
               methods: {
                   nextButtonClick: function (){
                       alert( "account : " + this.account + "\npassword : " + this.password )
                   }
               }
           }
       );
   </script>
</body>
</html>


页面效果: alt