vue的知識點

啾啾啾！小程序寫多了，vue沒碰就忘了，記下來記下來。

1.this.$rel

需求：獲取dom節點，進行dom操作。並且可以用來操作子組件的屬性。

（假如子組件有news這個屬性的話，就可以直接操作）

<div id="app">
    <hdnews ref="hdnews"></hdnews>
</div>

new Vue({
    el:'#app',
    mounted:function () {
        console.log(this.$refs.hdnews.news);
    }
})

2. 動態綁定class

需求：給item項添加一個點擊事件更改isActive值，就能夠在點擊的時候加上一個樣式'active'

<div v-for="(item,index) in numlist">
     <div :class="{ 'active': isActive == index }"> </div>
</div>

3. 兩層的for循環

<div class="table-row" v-for="(dataItem,index1) in dataItems">
    <div class="timestamp" 
        v-for="(data,index2) in dataItem.Detail"
        @mouseenter="showStampTooltip(index2)">
        <div class="stampTooltip" v-show="activeIndex===index2"></div>
    </div>
</div>

data() {
    return {
        activeIndex: -1
    }
},
methods:{

showStampTooltip:function (index) {
    this.activeIndex = index;
    console .log(index);
},

3. vue生命週期的認識

引：https://www.cnblogs.com/emma0118/p/6660004.html

1.   beforeCreate：鉤子函數中不能使用data中的數據，也不能獲得DOM節點。

2. 在created （創建）：我們能夠讀取到數據data的值，但是DOM還沒有生成，所以和DOM相關的屬性還不存在，自然也就不能獲取DOM元素。（到當執行鉤子函數created時，complier還沒有將template解析成render方法，DOM自然不能獲取）

3.beforeMount （掛載之前），vue掛載的根節點已經創建，下面vue對DOM的操作將圍繞這個el繼續進行。

4.mounted：在這個階段，數據和DOM都已被渲染出來。

5.beforeUpdate（即將更新渲染）：在數據更新後並沒立即更新數據，但是DOM中的數據已經改變，這是Vue雙向數據綁定的作用

6. updated（更新渲染）：DOM終於和我們更改過的內容同步了！