Vue學習記錄-畫頁面

webstorm

因為之前開發ReactNative的時候，選擇了webstorm，這回轉戰Vue，自然還是用它。如果什么也不做的話，打開Vue工程，編輯區域基本上沒有語法高亮。怎么辦呢？

安裝插件（以mac版本為例，window下面應該大同小異）

1. 打開偏好設置，從左邊找到Plugins

2. 點擊Browse repositories...，然后搜索Vue，進行安裝

3. 添加Vue模板

<template>
</template>

<script>
export default {
  name: ''
}
</script>

<style>
</style>

4. 重啟webstorm，准備工作到此結束

 

項目結構

 

 

配置路由，根路徑顯示Login 

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/modules/Login'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Login',
      component: Login
    }
  ]
})

 

編寫Login.vue

先把代碼貼一下，過程慢慢看

<template>

  <div id="container">
    <div id="background-container">
      <img src="../assets/bgd_login.jpg" id="background-image"/>
    </div>

    <div id="main">
      <div id="logo">
        <img id="logo-img" src="../assets/logo.png">
      </div>

      <div id="login">
        <div class="form-input">
          <span>
            <i class="icon input-icon">&#xe601;</i>
          </span>
          <input class="input" placeholder="請輸入用戶名"/>
        </div>

        <div class="form-input form-input-password">
          <span>
            <i class="icon input-icon">&#xe601;</i>
          </span>
          <input class="input" placeholder="請輸入密碼" type="password"/>
        </div>

        <div id="setting">
          <checkbox title="記住密碼" :checked="remember_password" v-on:press="onPressRememberPassword"></checkbox>
        </div>

        <div id="login-button">
          <Button type="primary" size="large">登 錄</Button>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
  import {Field, Button, Radio} from 'mint-ui';
  import checkbox from '../components/checkbox.vue'

  export default {
    name: 'login',
    components: {
      'v-input': Field,
      Button,
      checkbox,
    },
    data: function () {
      return {
        remember_password: false,
      }
    },
    methods:{
      onPressRememberPassword: function () {
        this.remember_password = !this.remember_password;
      }
    }
  }
</script>

<style>
  #container {
    width: 100%;
    height: 100%;
    /*background-image: url("../assets/bgd_login.jpg") ;*/
  }

  #background-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 0;
  }

  #main {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: transparent;
  }

  #background-image {
    width: 100%;
    height: 100%;
    z-index: 1;

  }

  #logo {
    text-align: center;
    vertical-align: center;
    margin-top: 50px;
  }

  #logo-img {
    width: 100px;
    height: 100px;
  }

  .form-input {
    background-color: white;
    margin-top: 20px;
  }

  .input-icon {
    margin-left: 15px;
    color: gray;
  }

  .input {
    background-color: transparent;
    line-height: 60px;
    border: none;
    outline: none;
    font-size: 16px;
    color: white;
    margin-left: 5px;
    width: 70%;
  }

  .form-input-password {
    margin-top: 1px;
  }

  #setting {
    margin-top: 20px;
    margin-left: 10px;
  }

  #login-button {
    margin-top: 55px;
    padding: 0px 15px;
  }

</style>

 

過程1：怎么讓一個圖片作為背景顏色

iOS原生開發：

　　方案1：圖片作為view的backgroundcolor；

　　方案2：一個UIImageView同時位於.subviews[0]；

ReactNative開發：

　　方案1：<Image>作為容器，將其他部分作為childrens；

　　方案2：通過positon、zIndex將圖片壓到最底層；

 Vue方案：

　　方案1：作為div的背景圖片，但是最后我沒有解決圖片的拉伸問題；

　　方案2：將背景圖單獨一個div，其他內容單獨一個div，然后通過zIndex壓到最后

　　

#main { /* 其他內容所在的div，包括輸入框、忘記密碼、登錄按鈕 */
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: transparent;
  }

  #background-image { /*背景圖所在的div*/
    width: 100%;
    height: 100%;
    z-index: 1;
  }

 

 

過程2：輸入框，怎么讓input撐滿剩余部分呢

在ReactNative里面，可以通過flex:1，讓一個組件撐滿，放到div/css里面，我就不知道怎么處理了。因為暫時不影響使用，只是簡單的做了處理

<div class="form-input">
  <span>
    <i class="icon input-icon">&#xe601;</i>
  </span>
  <input class="input" placeholder="請輸入用戶名"/>
</div>

.input {
    background-color: transparent;
    line-height: 60px;
    border: none;
    outline: none;
    font-size: 16px;
    color: white;
    margin-left: 5px;
    width: 70%;
  }

 

過程3：“記住密碼”，能不能做個單獨的組件，方便以后復用

<template>
  <div @click="press">
    <img class="comp-checkbox-icon" :src="iconImage">
    <label class="comp-checkbox-title">{{title}}</label>
  </div>
</template>

<script>
  export default {
    name: 'checkbox',
    props: ['title', 'checked'],
    data: function () {
      return {

      }
    },
    computed: {
      iconImage: function () {
        const icon = this.checked
          ? require('../components/images/checkbox_on.png')
          : require('../components/images/checkbox_no.png');
        return icon;
      }
    },
    methods: {
      press: function () {
        this.$emit('press');
      },
    }
  }
</script>

<style>
  .comp-checkbox-icon {
    width: 20px;
    height: 20px;
    float: left;
  }

  .comp-checkbox-title {
    margin-left: 10px;
  }
</style>

問題a. 如何讓顯示的文本，從父組件傳過來顯示呢？

（參照Vue：使用Prop傳遞數據）

 

問題b. 如何將點擊事件交給父組件處理呢？

（參照Vue：使用v-on綁定自定義事件）

 

問題c. 如何判斷顯示的圖片（選中/非選中）呢？

（答案：通過computed計算返回，同時對於img這種特殊的標簽，應該用require進行返回）

 

問題d. 組件寫好了，應該怎么用呢？

（答案：父組件里面，import引入，注冊到components里，然后就可以使用了）

 

 OK，UI部分到此結束，下面的“接口通信”，預知后事如何，待我娓娓道來