vue的高级特性

v-model 实现数据双向绑定

v-model指令的作用是获取表单输入值，将数据和表单输入值进行双向绑定。
1、v-model是语法糖，原理是:value和@input

<input type="text" v-model="msg" />

:value获取表单输入值，@input根据表单输入值修改data数据，实现双向绑定

<input type="text" :value="msg" @input="changeVaule"/>
 methods: {
   
    changeVaule (e) {
   
      this.msg = e.target.value
    }
  }

父子组件之间v-model的使用

作用：父组件通过v-model给子组件绑定表单数据，使父组件能获取子组件表单输入值
1、父组件中调用子组件，定义v-model
在vue3中，v-model后面加冒号变量名，将父组件数据以特定变量名传给子组件，子组件用props接收

<p>{
   {
   name}}</p>
<childVue v-model:test="name"></childVue>

2、子组件中，props接收父组件数据，value发生变化时，通过update:test事件$emit给父组件

<template>
  <input type="text" :value="test" @input="$emit('update:test', $event.target.value)">
</template>

<script lang="ts">
  export default {
   
    props: {
   
      test:{
    //接收v-model冒号后面的值，相应触发方法为update:text
        type:String,
        default() {
   
          return ''
        }
      }
    },
    emits:['update:test']
  }
</script>

3、vue2中，v-model的使用

注意：vue2中v-model只能使用一次

父.vue
<CustomVModelVue v-model="name"/> -->

子.vue
<template>
  <input type="text" :value="text" @input="$emit('change', $event.target.value)" >
</template>
<!--
1、change和model里的event一致
2、text和model里的prop，以及props里的text一致
 -->
<script>
export default {
   
  props: {
   
    text: {
   
      type: String,
      default () {
   
        return ''
      }
    }
  },
  model: {
   
    event: 'change',
    prop: 'text'
  }
}
</script>

$nextTick

作用：data数据改变之后，dom树不会立即渲染，而$nextTick会在dom树渲染之后才执行，多次data数据改变会整合，data改变后再统一渲染

未使用$nextTick的结果

<template>
<ul ref=