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>
vue学前班004(基础指令与使用技巧)的更多相关文章
- Vue.js 基础指令实例讲解(各种数据绑定、表单渲染大总结)——新手入门、高手进阶
Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- Vue的介绍及基础指令
一.什么是Vue Vue.js是一个渐进式 JavaScript 框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目 为什么要学习Vue 三 ...
- 0807 创建vue实例以及vue的基础指令
lession1 1.Vue的了解 渐进式框架 作者:尤雨溪 mvvm 2.创建vue实例 引入<script src="vue.js"><scr ...
- Vue 2.0基础语法:系统指令
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. Vue初体验 新建一个空的项目,引入vue.js文件.写如下代码: &l ...
- 移动端Tap与滑屏实战技巧总结以及Vue混合开发自定义指令
最近在忙混合开发,因交互相对复杂,所以也踩了很多坑.在此做一下总结. 1.tap事件的实际应用 在使用tap事件时,老生常谈的肯定是点透问题,大多情况下,在有滑屏交互的页面时,我们会在根节点阻止默认行 ...
- Vue.js之常用指令
vue常用指令 vue.js官方给自己的定义是数据模板引擎,并给出了一套渲染数据的指令.本文详细介绍vue.js的常用指令. 官网:点我 一.v-text.v-html v-text:用于绑定文本 v ...
- 1.Vue.js的常用指令
Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的.相比于Angular.js,Vue.js提供了更加简洁.更易于理解的API,使得 ...
- 在vue中创建自定义指令
原文:https://dev.to/ratracegrad/creating-custom-directives-in-vue-58hh 翻译:心上有杨 指令是带有 v- 前缀的特殊属性.指令的作用是 ...
随机推荐
- 编译 link
--generating dsym file change the appropriate one from 'DWARF with dSYM file' to just 'DWARF',This s ...
- eclipse怎样检出SVN项目
首先确定你的eclipse安装了svn插件.查看eclipse是否安装插件的方法:打开eclipse->文件->新建->其他 ,在弹出的选择向导窗口中如果能搜索到svn,说明ecli ...
- centos6.8下redis的安装和配置
centos6.8下redis的安装和配置 下载.安装 在redis官网可以获取到最新版本的redis 进入/usr/local/目录,执行如下命令 wget http://download.redi ...
- 浅析10种常见的黑帽seo手法
虽然博主并不认同黑帽seo手法,但是一些常见的黑帽手法还是需要了解的,增加自己对黑帽的认知,也可以在自己优化网站时适时的规避开这些黑帽手法,从而避免自己的网站被搜索引擎惩罚.好了,话不多说,下面进入今 ...
- 2018.10.14 NOIP训练 圣诞树(简单dp)
传送门 sbDP题. 曾经一直TLE不知道为什么. 这次发现输入有坑233. 代码
- 2018.09.10 bzoj1855: [Scoi2010]股票交易(单调队列优化dp)
传送门 单调队列优化dp好题. 有一个很明显的状态设置是f[i][j]表示前i天完剩下了j分股票的最优值. 显然f[i][j]可以从f[i-w-1][k]转移过来. 方程很好推啊. 对于j<kj ...
- composer 安装扩展失败的决绝方法
https://getyii.com/topic/32
- sql笔试练习
转:http://www.360doc.com/content/16/0919/17/14804661_592046675.shtml 本文是在Cat Qi的参考原帖的基础之上经本人一题一题练习后编辑 ...
- spss-非参数检验-K多个独立样本检验( Kruskal-Wallis检验)案例解析
今天和大家一起探讨和分下一下SPSS-非参数检验--K个独立样本检验 ( Kruskal-Wallis检验). 还是以SPSS教程为例: 假设:HO: 不同地区的儿童,身高分布是相同的 H1: 不 ...
- Git在windows环境下的使用教程
前言 安装 配置 关于git使用的几个问题 后记 关于代码托管,以前用过vss和svn,看博客或论坛的时候,经常有人提到github,有很多著名的开源软件都托管在github,想来肯定不错(莫笑),当 ...