本節課要點

我們利用之前學到的知識點做一個使用者登入框，其中
1.為了介面不至於太噁心，我們引入bootstrap樣式
2.我們故意把登入介面要素比如使用者名稱、密碼和提交按鈕分成3個元件（僅僅是為了學習，增加難度）

一、引入bootstrap

新建目錄css和fonts，放入對應的檔案。

安裝相應的webpack外掛

為了正確的載入bootstrap中的樣式和字型，我們需要安裝

 npm install file-loader --save-dev

webpack的配置檔案中要加入

{test:/\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,loader:"file"
 
}

二、折騰元件

user-login.vue內容如下：

<template>
    <div id="user-login" class="col-md-8 col-md-offset-2">
        <h2 class="text-center">使用者登入</h2>
        <form class="form-horizontal" role="form">
            <user-name placeholder="請輸入你的使用者名稱"></user-name>
 

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

<style>
    @import "./../css/bootstrap.min.css";
    #user-login{
        margin-top: 50px;
    }
</style>

<script>
   import username from "./user/use-name.vue";
    export default{
        components:{
           "user-name":username
        }
    }
 
</script>

user-name.vue內容如下：

<template>
    <div class="row">
        <div class="form-group">
            <label class="col-sm-2">使用者名稱</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" :placeholder="username">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
                <button type="button" class="btn btn-default">提交</button>
            </div>
        </div>
    </div>
</template>

<script>
    export default{
        props:["placeholder"]
    }
</script>

然後要修改入門檔案jssrc/index.js

import Vue from "vue";


import userlogin from "./../components/user-login.vue";

new Vue({
    el:".container",
    components:{"user-login": userlogin}
});

執行webpack打包，瀏覽器檢視編譯之後的html，效果如下：

三、事件是怎麼處理的

比如我們點選『提交』按鈕，應該怎麼處理？

<script>
    export default{
        props:["placeholder"],
        methods:{
            test(){
                alert("test");
            }
        }
    }
</script>

 <button type="button" v-on:click="test" class="btn btn-default">提交</button>

四、怎麼獲取文字框的值

v-model 雙向資料繫結
官方解釋如下：可以用v-model指令在表單控制元件元素上建立雙向資料繫結。根據控制元件型別它自動選取正確的方法更新元素。儘管有點兒神奇，v-model不過是語法糖，在使用者輸入事件中更新資料，以及特別處理一些極端例子。

<input type="text" v-model="username" class="form-control" :placeholder="username">

<script>
    export default{
        props:["placeholder"],
        data:function () {
            return {username:"張三"}
        },
        methods:{
            test(){
                alert(this.username);
            }
        }
    }

五、元件之間的通訊

1.先把提交按鈕拆分出來

user-submit.vue內容如下：

<template>
    <div class="form-group">
        <div class="col-sm-10 col-sm-offset-2">
            <button type="button" v-on:click="test" class="btn btn-default">提交</button>
        </div>
    </div>
</template>

<script>
    export default{
        methods:{
            test(){
                alert(this.username);
            }
        }
    }
</script>

user-username.vue內容如下：

<template>
    <div class="form-group">
        <label class="col-sm-2">使用者名稱</label>
        <div class="col-sm-10">
            <input type="text" v-model="username" class="form-control" :placeholder="username">
        </div>
    </div>
</template>

<script>
    export default{
        props:["placeholder"],
        data:function () {
            return {username:"張三"}
        }
    }
</script>

user-login.vue內容如下：

<template>
    <div id="user-login" class="col-md-8 col-md-offset-2">
        <h2 class="text-center">使用者登入</h2>
        <form class="form-horizontal" role="form">
            <user-name placeholder="請輸入你的使用者名稱"></user-name>
            <user-submit></user-submit>
        </form>
    </div>
</template>

<style>
    @import "./../css/bootstrap.min.css";
    #user-login{
        margin-top: 50px;
    }
</style>

<script>
   import username from "./user/use-name.vue";
   import usersubmit from "./user/user-submit.vue";
    export default{
        components:{
           "user-name":username,
            "user-submit":usersubmit
        }
    }
</script>

至此，介面上還是一樣的，只不過點選『提交』按鈕，就拿不到使用者名稱文字框的值了

怎麼在user-submit元件裡，去訪問user-name元件呢？

元件訪問方式

今天學習最簡單的2個訪問方式
(1) this.parent訪問父組件(2)this.children 訪問子元件（是一個數組）
訪問某個子元件，可以用陣列[索引]是方式。

用索引的方式太麻煩

vue.js 2.0提供了一個ref 的屬性：
可以為子元件指定一個索引id，比如：

則訪問時可以：
this.parent.refs.uname

<user-name ref="uname" placeholder="請輸入你的使用者名稱"></user-name>

user-submit.vue裡：

<script>
    export default{
        methods:{
            test(){
                alert(this.$parent.$refs.uname.$data.username);
            }
        }
    }
</script>

ok，這就實現了相鄰元件之間的通訊。