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

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

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

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

实现按钮变色

  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.     <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7.     <link rel="stylesheet" type="text/css" href="./css/aui.css" />
  8.      <title> ----     v-if       v-bind    </title>
  9.     <style type="text/css">
  10.         /**/
  11.     </style>
  12. </head>
  13. <body>
  14.    <div  id="app" >
  15.  
  16.              <div class="aui-content aui-margin-b-15">
  17.                <ul class="aui-list aui-select-list">
  18.                     <li  class="aui-list-item">
  19.                           <div class="aui-list-item-inner">
  20.                                <div class="sui-list-item-input">
  21.                                      <input type="number"  placeholder="手机号" v-model="moblie">
  22.                                </div>
  23.                           </div>
  24.                     </li>
  25.                      <li  class="aui-list-item">
  26.                           <div class="aui-list-item-inner">
  27.                                <div class="sui-list-item-input">
  28.                                      <input type="number"  placeholder="请输入您的密码"  v-model="password" >
  29.                                </div>
  30.                           </div>
  31.                     </li>
  32.  
  33.                </ul>
  34.            </div>
  35.  
  36.            <div class="aui-content-padded  aui-margin-t-15">
  37.  
  38.                     <!-- 001 v-if 指令  为真走一条   为假  走另外一条    if  else -->
  39.  
  40.                  <!--   <div class=" aui-btn aui-btn-block  aui-btn-info "  v-if="moblie&&password" >登陆</div>
  41.                    <div class=" aui-btn aui-btn-block"  v-else  >登陆</div> -->
  42.  
  43.                   <!-- 方式2  v-bind       手机为真 就追加类名    && 同时追加2个 案例  -->
  44.                   <div class=" aui-btn aui-btn-block"  v-bind:class="{'aui-btn-info':moblie&&password}"  >登陆</div>
  45.  
  46.                    <div class="aui-pull-left">
  47.                          <a href="aui-text-info">忘记密码</a>
  48.                    </div>
  49.                    <div class="aui-pull-right">
  50.                          <p href="color">免费注册</p>
  51.                    </div>
  52.            </div>
  53.    </div>
  54. </body>
  55.   <script type="text/javascript" src="./script/api.js"></script>
  56.   <script type="text/javascript" src="./script/vue.js" ></script>
  57.   <script>
  58.  
  59.   //  v-model    声明对象      初始化给默认值 给一个空
  60.  
  61.       var vm= new  Vue({
  62.           el:'#app',
  63.           data:{
  64.              moblie:'',
  65.              password:''
  66.           },
  67.       });
  68.  </script>
  69. </html>

　　

vue学前班004（基础指令与使用技巧）的更多相关文章

  1. Vue.js 基础指令实例讲解（各种数据绑定、表单渲染大总结）——新手入门、高手进阶

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...

  2. 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch

    回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...

  3. Vue的介绍及基础指令

    一.什么是Vue Vue.js是一个渐进式 JavaScript 框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目 为什么要学习Vue 三 ...

  4. 0807 创建vue实例以及vue的基础指令

    lession1 1.Vue的了解   渐进式框架   作者:尤雨溪     mvvm 2.创建vue实例 引入<script src="vue.js"><scr ...

  5. Vue 2.0基础语法：系统指令

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Vue初体验 新建一个空的项目,引入vue.js文件.写如下代码: &l ...

  6. 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令

    最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...

  7. Vue.js之常用指令

    vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...

  8. 1.Vue.js的常用指令

      Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...

  9. 在vue中创建自定义指令

    原文:https://dev.to/ratracegrad/creating-custom-directives-in-vue-58hh 翻译:心上有杨 指令是带有 v- 前缀的特殊属性.指令的作用是 ...

随机推荐

  1. postman get和post结合

  2. crontab定时任务操作

    一.查看定时任务 crontab -l 二.添加定时任务 crontab -e (一)执行外部链接 //每隔10分钟执行1次 */ * * * * /usr/bin/curl "http:/ ...

  3. 【JS】点击页面判断是否安装app并打开,否则跳转下载的方法

    应用场景 App产品在运营推广上有一个需求,就是要求可以让用户在访问我们的推广网页时,就可以判断出这个用户手机上是否安装了我们的App,如果安装了则可以直接在网页上打开,否则就引导用户前往下载.从而形 ...

  4. 2018.10.20 loj#2593. 「NOIP2010」乌龟棋（多维dp）

    传送门 f[i][j][k][l]f[i][j][k][l]f[i][j][k][l]表示用iii张111,jjj张222,kkk张333,lll张444能凑出的最大贡献. 然后从f[i−1][j][ ...

  5. 2018.09.24 codeforces 1051F. The Shortest Statement（dijkstra+lca）

    传送门 这真是一道一言难尽的题. 首先比赛的时候居然没想出来正解. 其次赛后调试一直调不出来最后发现是depth传错了. 其实这是一道简单题啊. 对于树边直接lca求距离. 由于非树边最多21条. 因 ...

  6. 2018.09.11 bzoj2208: [Jsoi2010]连通数（bitset+floyd）

    传送门 听说正解是缩点+dfs? 直接bitset优化floyd传递闭包就行了.(尽管时间复杂度是假的O(n3/32)" role="presentation" styl ...

  7. 按str 存储和按 list 存储

    按str 存储1 w2 = open('./trsd_w.txt','a')#a代表追加 w代表重写 if matcher1: flag = 1 w2.write("\n") fo ...

  8. ArcGIS Desktop python Add-in 测试一个插件

    a)制作一个插件文件 先找到工作目录,双击运行makeaddin.py脚本.这个脚本拷贝所有插件需要的文件和文件夹并在工作目录形成一个压缩文件.该压缩文件名为工作目录名称加上".esriad ...

  9. [unchecked] 对作 为原始类型Hashtable的成员的put(K,V)的调用未经过检查。。。

    问题: C:\Users\Administrator\Desktop\java\SoundApplet.java:212: 警告: [unchecked] 对作为原始类型Hashtable的成员的pu ...

  10. Codeforces801C Voltage Keepsake 2017-04-19 00:26 109人阅读 评论(0) 收藏

    C. Voltage Keepsake time limit per test 2 seconds memory limit per test 256 megabytes input standard ...