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>
