入坑Vue的学习笔记-第四天

折腾那么久以后，终于要写代码了，先从简单的登录界面开始。

cd components 

新建login.vue和index.vue

//组件文件夹，所有的.vue文件都放在这个目录下，
components
    |
    |------login.vue
    |
    |------index.vue

所有的vue页面都分为3个部分，<template/>，<script/>，<style/>

//页面的html代码都在这里
<template>
    <div id="app">
        {{msg}}
    </div>
</template>

//页面的函数实现都在这里
<script>
export default {
data(){
  retern{
    msg: 'this is my app!'
}
}
}
</script>

//页面的样式都在这里
<style scoped>
#app{
    width: 100%;
    height: 60px;
    background-color: #b33300;
}
</style>

这样一来，编写vue就和写普通的html页面一样了。

点击登录，跳转到首页，这里需要路由功能，vue推荐使用的是官方的路由vue-router，向后台验证数据需要使用ajax，但是vue没有使用ajax而是使用了第三方的aoixs模块。

效果图

login.vue

<template>
    <div id="app" class="content_box">
      <div class="from_head left_are">
        <ul>
          <li :class="{active},input_white" @click="act">密码登录</li>
          <li :class="{active},input_white" @click="act">验证码登录</li>
        </ul>
      </div>
      <div class="from_body">
        <form class="" action="javascript:;">
        <div class="input_item clearfix">
          <input class="input input_white" v-model="jsonData.name" placeholder="输入账号">
        </div>
        <div class="input_item clearfix">
          <input type="password" class="input input_white" v-model="jsonData.pwd" placeholder="输入密码">
        </div>
        <div class="input_item clearfix">
          <a href="" class="forgatpwd">忘记密码？</a>
        </div>
        <div class="input_item clearfix">
          <input class="btn btn_green btn_bok btn_lg" type="submit" value="登 录" @click="sub">
        </div>
        </form>
      </div>
    </div>
</template>

<script>

export default {
  name: 'type',
  data () {
    return {
      jsonData: {},
      active: true,
      input_white: true
    }
  },
  methods: {
    act: function () {
      console.log(111)
    },
    sub: function (e) {
      // 这里是使用 aoix模块请求后台数据
      // let that = this
      // this.$ajax.get('/api/data')
      //   .then(function (rsp) {
      //     let cont = JSON.stringify(rsp.data.data)
      //     let seData = '00000' + cont.length + cont
      //   })
      //   .catch(function (err) {
      //     console.log('这是错误' + err)
      //   })
      // 这里是设置路由跳转到首页
      this.$router.push({path: 'index'})
    }
  }
}
</script>

<style scoped>
#app {
    width: 550px;
    height: 300px;
    background-color: #fff;
    border-radius: 2px;
    border: 1px solid #dce1e6;
    margin: -205px auto 60px;
    padding: 62px 70px 68px 78px;
    position: relative;
    z-index: 1;
}
.content_box {
    width: 552px;
    margin: -205px auto 60px;
    padding: 62px 70px 68px 78px;
    background-color: #fff;
    display: table;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border: 1px solid #dce1e6;
    position: relative;
    z-index: 1;
}
.left_are{
      width: 290px;
}
.fl {
      float: left;
}
.from_body {

}
form {
    display: block;
    margin-top: 0em;
}
.clearfix {
  zoom: 1;
}
li {
  list-style: none;
  display: list-item;
  text-align: -webkit-match-parent;
}
.from_head {
    position: relative;
    z-index: 1;
    height: 33px;
    margin-bottom: 29px;
    border-bottom: 1px solid #ebebeb;
}
.from_head li {
    font-size: 16px;
    line-height: 24px;
    position: relative;
    float: left;
    width: 50%;
    height: 33px;
    cursor: pointer;
    text-align: center;
    color: #333;
    border-bottom-color: #007b5f;
}
ul li.active {
    color: #00b38a;
}
.input {
    font-size: 14px;
    position: relative;
    z-index: 1;
    height: 44px;
    line-height: 44px\9;
    vertical-align: middle;
    color: #333;
    border-width: 1px;
    border-style: solid;
    outline: 0;
    font-family: Arial,"Hiragino Sans GB","Microsoft Yahei",SimSun;
    box-sizing: border-box;
    width: 290px;
    border-radius: 0;
}
.input_white {
    border-left: 0;
    border-top: 0;
    border-right: 0;
    border-color: #ededed;
    background: 0 0;
}
.input_item{
    position: relative;
    z-index: 1;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
a {
    background-color: transparent;
    outline: 0;
    text-decoration: none;
}
.forgatpwd {
    position: relative;
    float: right;
    font-size: 14px;
    display: block;
    text-align: right;
    text-decoration: none;
    color: #00b38a;
    margin-top: -5px;
    z-index: 3;
}
.btn {
    font-size: 16px;
    line-height: 44px;
    display: inline-block;
    height: 44px;
    padding: 0 30px;
    text-align: center;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    outline: 0;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-transition: .05s linear;
    -o-transition: .05s linear;
    transition: .05s linear;
}
.btn_green {
    color: #00b38a;
    border-color: #00b38a;
    background-color: #fff;
}
.btn_lg {
    font-size: 18px;
    line-height: 46px;
    height: 46px;
}
.btn_bok {
    display: block;
    width: 100%;
}
</style>

注：不是很擅长css样式，后面会慢慢调整。

转载于:https://my.oschina.net/u/3631947/blog/1856979