Vue学习

v-model

原理：v-model本质上是一个语法糖。

例如应用在输入框上，就是value属性和 input事件 的合写。

作用:提供数据的双向绑定 ①数据变，视图跟着变:value ②视图变，数据跟着变@input

注意:$event 用于在模板中，获取事件的形参。

<template>
<div id="app" >
<input v-model="msg"type="text">
<input :value="msg" @input="msg = $event.target.value" type="text"> 中   
</div>
</template>

表单类组件封装&v-model简化代码

1.表单类组件 封装

① 父传子:数据 应该是父组件 props 传递 过来的，v-model 拆解 绑定数据

② 子传父:监听输入，子传父传值给父组件修改

<BaseSelect :cityId="selectId" @事件名="selecteId = $event"/>
<select :value="cityId" @change="handlechange">...</select>
props:{
cityId: string
}
methods:{
handlechange(e){this.$emit('事件名'，e.target.value)}
}

.sync 修饰符

作用:可以实现 子组件 与 父组件数据 的 双向绑定，简化代码

特点:prop属性名，可以自定义，非固定为value

场景:封装弹框类的基础组件，visible属性 true显示 false隐藏

本质:就是 :属性名 和 @update:属性名 合写

<BaseDialog :visible.sync="isShow" />
​
<BaseDialog
:visible="isShow"
@update:visible="isShow = $event
/>
props:{
visible: Boolean
},
this.$emit('update:visible',false)

ref 和 $refs

作用:利用 ref 和 $refs 可以用于 获取 dom 元素,或 组件实例

特点:查找范围 →当前组件内(更精确稳定)

获取 dom:

1.目标标签-添加 ref 属性<div ref="chartRef">我是渲染图表的容器</div> 2.恰当时机, 通过 this.$refs.xxx,获取目标标签

mounted(){
console.log(this.$refs.chartRef)
}

获取组件: 1.目标组件-添加 ref 属性 <BaseForm ref="baseForm"></BaseForm> 2.恰当时机,通过 this.$refs.xxx,获取目标组件,就可以调用组件对象里面的方法this.$refs.baseForm.组件方法()

Vue异步更新、$nextTick

$nextTick:等 DOM 更新后,才会触发执行此方法里的函数体

语法: this.$nextTick(函数体) this.$nextTick(()=>{this.$refs.inp.focus()})

DOM更新是异步的

当我们在更新数据后立马去获取DOM中的内容是会发现获取的依然还是旧的内容。

DOM的更新是异步的

当我们在更新数据后立马去获取DOM中的内容是会发现获取的依然还是旧的内容。

<template>
  <div class="next_tick">
      <div ref="title" class="title">{{name}}</div>
  </div>
</template>
<script>
export default {
    data() {
        return {
            name: '前端南玖'
        }
    },
    mounted() {
        this.name = 'front end'
        console.log('sync',this.$refs.title.innerText)
        this.$nextTick(() => {
            console.log('nextTick',this.$refs.title.innerText)
        })
    }
}
</script>