Onsen UI 学习笔记之一:登录页-阿里云开发者社区

开发者社区> 甜海> 正文

Onsen UI 学习笔记之一:登录页

简介: Onsen UI 是个H5的混合移动框架。据其文档说,其通吃Vue, React, Angular, jQuery.
+关注继续查看

Onsen UI 是个H5的混合开发移动框架43.gif。据说,其对Vue, React, Angular, jQuery友好19.gif

尝试做个登录页,学习学习,用Vue,流行啊。

1.创建项目


be84ae788b2e8a37e11b19d6db07b263554f1737

2.安装onsenui

4682e12ddb2a67e6d1057cc999904831a1c510a4

3.将HelloWorld组件改为LoginForm


<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">登录</div>
    </v-ons-toolbar>

    <p style="text-align: center">
      <v-ons-input id="username" modifier="underbar" v-model="username" placeholder="用户名" float></v-ons-input>
    </p>
    <p style="text-align: center">
      <v-ons-input id="password" modifier="underbar" v-model="password" type="password" placeholder="密码" float></v-ons-input>
    </p>
    <p style="text-align: center">
      <v-ons-button @click="login()">登录</v-ons-button>
    </p>
  </v-ons-page>
</template>

<script>
export default {
  name: 'LoginForm',
  data(){
    return {username:'',password:''}
  },
  methods:{
    login(){
      if (this.username === 'admin' && this.password === 'secret') {
        this.$ons.notification.alert('Congratulations!');
      } else {
        this.$ons.notification.alert('Incorrect username or password.');
      }
    }
  }
}
</script>

模板标签来自

https://onsen.io/v2/api/js/ons-input.html

4. App.vue如下


<template id="main-page">
  <login-form></login-form>
</template>

<script>
import LoginForm from './components/LoginForm.vue'

export default {
  name: 'app',
  components: {
    LoginForm
  }
  
}
</script>
5. main.js如下


import Vue from 'vue'
import App from './App.vue'
// Webpack CSS import
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

// JS import
import VueOnsen from 'vue-onsenui'; // This already imports 'onsenui'

Vue.use(VueOnsen);

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')
6. 运行 npm run serve

效果图


abc0b7c7c37240e7dbb6c212fb1cdea6afe94aa2

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Linux学习笔记之档案权限与目录配置
Linux学习笔记之档案权限与目录配置一. 档案权限与目录配置用户的属性信息: /etc/passwd用户的密码信息: /etc/shadow组的信息:    /etc/group 每个用户都有唯一的UID供系统识别sudo -i      输入密码切换到root s...
607 0
Linux学习笔记之目录配置
Linux学习笔记之目录配置一.目录配置相关目录说明 /bin   二进制文件 /boot    系统启动文件(内核的初始化文件等) /dev    设备文件(硬盘等) /etc    配置文件 /home    用户家目录 /lib    链接库文件(相当于windows里的.
783 0
Spring Security笔记:自定义登录页
以下内容参考了 http://www.mkyong.com/spring-security/spring-security-form-login-example/ 接上回,在前面的Hello World示例中,Spring Security为我们自动生成了默认登录页,对于大多数项目而言,如此简单的...
934 0
应用统计学与R语言实现学习笔记(一)——简介
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ESA_DSQ/article/details/71076504 Chapter ...
953 0
Mac下终端使用密钥登录服务器
可行方法: mac终端输入 ssh-keygen 因为mac系统是类unix系统,linux系统是unix系统演变来的,所以呢,相当于在一个linux系统登录另外一个linux系统, 基本命令还是一样的。
2706 0
笔试题目记录
32位机器上,以下结构的sizeof(P)为 struct A { int a; char b; int c; char d; } struct P { struct A w[2]; short b; struct A* p; } /*考察结构体对齐和填充: 结构体每个成员相对于结构体首地址的偏移量都是成员大小的整数倍,如果不是,编译器会自动在成员间填充。
691 0
Spring Security笔记:使用BCrypt算法加密存储登录密码
在前一节使用数据库进行用户认证(form login using database)里,我们学习了如何把“登录帐号、密码”存储在db中,但是密码都是明文存储的,显然不太讲究。这一节将学习如何使用spring security3新加入的bcrypt算法,将登录加密存储到db中,并正常通过验证。
1621 0
Spring Security笔记:登录尝试次数限制
今天在前面一节的基础之上,再增加一点新内容,默认情况下Spring Security不会对登录错误的尝试次数做限制,也就是说允许暴力尝试,这显然不够安全,下面的内容将带着大家一起学习如何限制登录尝试次数。
1321 0
PostGIS学习笔记(开篇)
PostGIS事实上算是笔者开始写博客的第一篇内容。而事实上那篇博文的内容并不丰富,笔者对PostGIS的了解仍然不多,然而17年在OSGeo课程学习时对PostGIS又有了进一步了解,并逐步发现它的强大。刚好最近又遇上一个问题,也使我萌发了开坑PostGIS的想法。
1548 0
数据结构学习笔记——最大子列和问题
PTA 中国大学MOOC-陈越、何钦铭-数据结构 01-复杂度1 最大子列和问题(20 分) 给定K个整数组成的序列{ N​1​​ , N​2​​ , ..., N​k},“连续子列”被定义为{ N​i , N​i+1​​ , ..., N​j},其中 1≤i≤j≤K。
1024 0
+关注
甜海
看似寻常最奇崛,成如容易却艰辛
13
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载