我学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>