凱開 x 慵懶日子

默默也使用vue有幾個月了，覺得最常用的就是這個組件(componet)了

應該可以聊聊她在幹嘛吧!!!雖然有可能有錯，但應該可以說說小心得阿哈哈哈

每個.vue的檔案都有三大區塊

<template>：html，會使用vue的指令(ex. v-if, v-for．．．)

<script>：js,  常用import, export

<style>：css, 設定樣式

Q：這裡我就會想問那是怎麼自己解析成我們常看到的那些檔案?

A：原來是vue-loader允許我們這樣做

通常組件會長這樣

kaikai.vue

<template>
    <div class="name">        
        {{username}}
    </div>
</template>

<script>
export default {
    data: function() {
        return {
            username:'kaikai',  
        }
    }
}
</script>

<style>
.name{
    color:gray;
}
</style>

以下橘色字體是我常用到的

//屬性

data : 資料對象，在值更動時候，視圖也會跟著變

props：外層傳入的資料屬性，父傳子

computed：計算屬性，getter? setter？基於依賴進行緩存的，依賴變他才會重新求值

>>可參考 https://goo.gl/eJpN4t

watch：監聽屬性，可以處理非同步狀況，補足computed有些不能達成的部分

methods：事件，處理函式

//生命週期函式，這個還不是很熟XDD

beforeCreate：

created：

beforeMount：

mounted：

beforeUpdate：

update：

beforeDestroy：

destroyed：

//vue 指令，前面都帶有v

v-if：條件渲染，v-else跟v-else-if要在v-if後面才會被識出

v-show：條件渲染，若頻繁切換可能使用v-show會比v-if好

v-for：列表渲染，若與v-if一起使用，v-for優先權高於v-if

v-model：表單輸入綁定，＜input＞、＜select＞等等，使用時候需要在data裡面設定初始值

v-bind：縮寫" : "

v-on：縮寫" ＠ "