vue学习高级特性(二)--$nextTick、自定义v-model

这部分来讲vue的高级特性--$nextTick和自定义v-model，写这个主要是给自己有一个大致的印象。

一、$nextTick

直接来看代码：

    
{
    {item}}

push

new Vue({
    el:'#demo',
    data(){
        return {
            list: [0,1,2,3,4,5,6,7,8,9,10]
        }
    },
    methods:{
        push(){
            this.list.push(11);
            let ul = this.$refs.qq
            console.log('DOM未被渲染完成')
            console.log(ul.childNodes);
            // alert(this.$refs.qq)// 数据变化后，DOM不会被立刻渲染
            this.$nextTick(function(){
                console.log('DOM已经渲染完成') 
                console.log(ul.childNodes);
            })
        }
    }})

首先this.$nextTick之前，DOM还没有被渲染出来，但是之后，DOM是完全被渲染出来的。因为$nextTick是微元素，是异步任务，所以当上面console.log的同步任务被执行完，才执行这个异步任务的。

二、自定义v-model

先来看代码：

子组件:

在子组件里面定义input标签，然后给动态属性value的值和派发change1事件给父组件。

父组件：

父组件调用子组件，然后通过动态属性text1给子组件赋值，然后把子组件传来的value传给name。

大概图：