前端的框架部分，其實之前就有碰過React了，但學不太起來，過一段時間也忘了，之後被朋友驅使來學Vue，所以就來記錄一下Vue的學習過程吧。

vue為MVVM框架，所謂M就是Model就是資料的部分，而V就是View就是畫面的部分 ，而VM就是我們的Vue，也就是扮演M與V之間的橋樑，將資料與畫面綁起來。

首先需要引入vue的資料庫。

    <!-- 透過script直接引入vue的資料 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

再來就是需要建立vue物件，利用new實體化。
data屬性:物件所存的資料(可以加上陣列、物件、布林值等類型)。
el屬性(掛載點):用在哪個元素上。

    <div id="main">
        <p>{{message}}</p>
    </div>

    <script type="text/javascript">
        // 建立vue物件
        var vue = new Vue({
            el: "#main", 
            data: {
                message: "hello vue123",
                haha: "哈哈",
                hehe: "嘿嘿",
                isShow: false,
                array: ["1", "2", 3],
                imgSrc: "你沒大聲阿.png",
            }
        });
    </script>

資料顯示

v-html:可讀取標籤。
v-text:(等同{{}})不可讀取標籤。

        <p v-html="message"></p>
        <p v-text="message"></p>
        
        <p v-html="title"></p>
        <!-- Hello-->
        
        <p v-text="title"></p>
        <!-- <h2>Hello<h2/>  -->

迴圈顯示

v-for:與js的for in 一樣，前(item)為陣列中的資料，後(array)就為指定陣列。

        <!-- 顯示循環列表 v-for -->
        <ul>
            <li v-for="item in array">
                {{item}}
            </li>
        </ul>

事件綁定

v-on:click(等同@click):點擊事件。

        <div
            class="box"
            v-on:click="sleep"
        >
            {{message}}
        </div>
        <div
            class="box"
            @click="sleep"
        >
            {{message}}
        </div>

屬性綁定

v-bind:(要綁定的屬性，等同:(...)):屬性綁定。

        <img v-bind:src="imgSrc">
        <img :src="imgSrc">

樣式綁定

利用v-bind，可在對應的DOM的屬性上賦予 "{ 要添加的樣式:值 }"。

        <div
            class="view"
            :class="{active:isActive}"
        >
        {{message}}
        </div>

computed,methods

都建立在vue物件底下，而在獲取物件下的資料，都需要用this指向當前物件。
computed:類似變數的概念，去紀錄並處理資料。
methods:類似function的概念，處理互動方面的功能。

        let data = {
            message: "hello vue",
            index: 0,
            src: "https://picsum.photos/200/300",
            menu: [ {...},{...},.. ]}

        // 建立vue物件
        let vue = new Vue({
            el: "#main",
            // 將資料另外設為一個名為data的變數，並在物件下去獲取
            data: data,
            methods: {
                // 改變下標
                changePage(change) {
                    // let length = this.menu.length;
                    // 功能為點選最左邊再次，點最左時，會跳轉到最右邊，反之
                    // 當我們下標為0 = (0 - 1 + 5) % 5 = 5一個通用於輪播循環的概念 
                    // this.index = (this.index + change + length) % length;

                    this.index = (this.index + change + this.total) % this.total;
                }
            },
            computed: {
                current() {
                    return this.menu[this.index];
                },
                total() {
                    return this.menu.length;
                }
            },
        });

而在html我們就可以獲取物件所創建的方法，資料...

            <div class="img">
                <!-- 獲取對應下標的圖標 -->
                <img :src="current.src">
            </div>
            
            <div class="detail">
                 <!-- 獲取對應下標的title -->
                 <p>{{current.title}}</p>
            </div>
            
            <div>
                 <a
                    class="right"
                    @click="changePage(+1)"
                    :href="current.link"
                 >
                 </a>
            </div>

雙向綁定

雙向資料綁定(v-model)，也就是當我在html修改資料，也能夠修改data中對應的資料，當輸入框資料改變，就會去改變對應的屬性，如我們更動input中的vaule，物件中data下的message也會跟著改變，而checkbox也是如此。

js部分。

let data = {
    message: "hello vue",
    hobby: []
}
// 建立vue物件
let vue = new Vue({
    el: "#main",
    data: data
});

html部分，此處我們額外判斷，如果hobby為空或非空就返回對應字串，而後再將hobby中的資料串接成字符串。
將每個input都進行雙向綁定v-model。

        <div>
            <p>{{message}}</p>
            <p>
                {{ hobby.length ? '我的興趣是' : '我沒什麼興趣' }}
                {{ hobby.join('、') }}
            </p>

            <input v-model="message">

            <input
                type="checkbox"
                value="eat"
                v-model="hobby"
            >eat
            <input
                type="checkbox"
                value="play"
                v-model="hobby"
            >play
            <input
                type="checkbox"
                value="music"
                v-model="hobby"
            >music

        </div>