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终于和我们更改过的内容同步了！