vue学前班004（基础指令与使用技巧）

    我学vue 的最终目的是为了 做apicloud 和vue 的开发  作为配合apicloud的前端框架使用 所以项目用不到的会暂时不介绍、

   （强烈建议  官网案例走一遍）

 

   基础指令的学习(结合aui)

      v-mode   等结合开发登陆页面

           实现按钮变色 

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
     <title> ----     v-if       v-bind    </title>
    <style type="text/css">
        /**/
    </style>
</head>
<body>
   <div  id="app" >

             <div class="aui-content aui-margin-b-15">
               <ul class="aui-list aui-select-list">
                    <li  class="aui-list-item">
                          <div class="aui-list-item-inner">
                               <div class="sui-list-item-input">
                                     <input type="number"  placeholder="手机号" v-model="moblie">
                               </div>
                          </div>
                    </li>
                     <li  class="aui-list-item">
                          <div class="aui-list-item-inner">
                               <div class="sui-list-item-input">
                                     <input type="number"  placeholder="请输入您的密码"  v-model="password" >
                               </div>
                          </div>
                    </li>
                  
               </ul>
           </div>
            
           <div class="aui-content-padded  aui-margin-t-15">

                    <!-- 001 v-if 指令  为真走一条   为假  走另外一条    if  else -->

                 <!--   <div class=" aui-btn aui-btn-block  aui-btn-info "  v-if="moblie&&password" >登陆</div>
                   <div class=" aui-btn aui-btn-block"  v-else  >登陆</div> -->
                 
                  <!-- 方式2  v-bind       手机为真 就追加类名    && 同时追加2个 案例  -->
                  <div class=" aui-btn aui-btn-block"  v-bind:class="{'aui-btn-info':moblie&&password}"  >登陆</div>

                   <div class="aui-pull-left">
                         <a href="aui-text-info">忘记密码</a>
                   </div>
                   <div class="aui-pull-right">
                         <p href="color">免费注册</p>
                   </div>
           </div>
   </div>
</body>
  <script type="text/javascript" src="./script/api.js"></script>
  <script type="text/javascript" src="./script/vue.js" ></script>   
  <script>

  //  v-model    声明对象      初始化给默认值 给一个空
     
      var vm= new  Vue({
          el:'#app',
          data:{
             moblie:'',
             password:''
          },
      });
 </script>
</html>

　　

 

 

  

posted @ 2017-06-29 14:45  我叫睡不醒  阅读(188)  评论(0)    收藏  举报