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

　　

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. db2 托管事务未设置方法有问题

    https://q.cnblogs.com/q/63862

  2. centos6.5 设置ssh无密码登录

    :关闭防火墙 vim /etc/selinux/config 把SELINUX=enforcing修改为SELINUX=disabled   A机器root连接B机器root用户 (root用户登录) ...

  3. 2018.09.27 codeforces1045D. Interstellar battle（期望dp）

    传送门 一道有意思的期望dp. 题意是给出一棵树,每个点最开始都有一个gg的概率,有m次修改,每次修改会把某个点gg的概率更换掉,让你求出每次修改之后整个树被分成的连通块的数量的期望(gg掉的点不算) ...

  4. 2018.09.22 atcoder Snuke's Coloring 2（线段树+单调栈）

    传送门 就是给出一个矩形,上面有一些点,让你找出一个周长最大的矩形,满足没有一个点在矩形中. 这个题很有意思. 考虑到答案一定会穿过中线. 于是我们可以把点分到中线两边. 先想想暴力如何解决. 显然就 ...

  5. JAVA开发常用计算机命令

    系统常用命令 win+r > control (可进入控制面板,管理工具,服务) win+r > cmd > systeminfo (x86-based 指32位系统,x86-64 ...

  6. android build.gradle(groovy)

    一.build.Gradle 这个 build.Gradle 文件来自 drakeet 大神的 Meizi 项目我直接在代码上加注释,参照着注释看代码就行,是不是发现有很多代码平时都没看见过. //M ...

  7. OpenGL中的帧缓存

    OpenGL中的帧缓存 在OpenGL窗口中, 左下角的像素为(0, 0). 一般而言, 像素(x, y)占据的矩形区域左下角为(x, y), 右上角为(x+1, y+1). 1. 缓存及其用途 [1 ...

  8. Pywinauto 基于Win32 程序的自动化功能测试工具

    1.  前提条件 ü  Python2.6 下载地址:http://ishare.iask.sina.com.cn/f/8173206.html ü  Pywinauto-0.4.1 下载地址:htt ...

  9. mssql内存表

    自MSSQL2014开始引入内存表. 怎样创建内存表: USE testGO ALTER DATABASE testADD FILEGROUP fg_test CONTAINS MEMORY_OPTI ...

  10. 拒绝“高冷”词汇！初学C#中实用的泛型！

    初学C#,整天对着业务逻辑,写反反复复的“过程型”代码逻辑十分枯燥,不如用点新东西提升一下代码效率,让代码看起来更有逼格?! 好,下面我们看看C#中简单易学的泛型. 首先,我写了一个这样的方法 --- ...