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

目录
相关文章
|
1月前
|
前端开发
前端学习笔记202305学习笔记第二十天-vue3.0-element ui引入
前端学习笔记202305学习笔记第二十天-vue3.0-element ui引入
18 0
|
3月前
|
Java API Spring
Swagger UI 2.0和3.0学习笔记
Swagger UI 2.0和3.0学习笔记
|
10月前
|
NoSQL 数据库 开发者
安装部署—集群启动&amp;web ui&amp;注意事项 | 学习笔记
快速学习 安装部署—集群启动&amp;web ui&amp;注意事项
161 0
安装部署—集群启动&amp;web ui&amp;注意事项 | 学习笔记
|
10月前
|
JavaScript 前端开发 Java
Apache Oozie- 安装部署服务启动 &amp;web UI|学习笔记
快速学习 Apache Oozie- 安装部署服务启动 &amp;web UI,本节课重点为 oozie 服务的启动与关闭,并解决页面时区显示异常的问题
168 0
Apache Oozie- 安装部署服务启动 &amp;web UI|学习笔记
|
10月前
|
开发者 Docker 容器
Docker UI 使用|学习笔记
快速学习 Docker UI 使用
468 0
Docker UI 使用|学习笔记
|
11月前
|
JavaScript 前端开发 开发者
|
JavaScript
Onsen UI 学习笔记之二:路由
上次写好了登录页,登录成功之后如何呢? 登录成功之后应该进入用户主页,主页上有显示操作的菜单,对吧。 为了完成上述目标,我们需要添加一个组件Vue Router 添加Vue Router 注意vue cli做的变动,我来依次修改: 首先是App.
1460 0
相关产品
云迁移中心
推荐文章
更多