Vue入门2

v-model

原理:v-model本质上是一个语法糖。例如应用于输入框,就是value属性和input事件的合写。

作用:提供数据的双向绑定

  1. 数据变,视图跟着变 :value
  2. 视图变,数据跟着变 @input

注意:$event用于在模板中,获取事件的参数

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

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

表单类组件 封装 实现子组件和父组件数据的双向绑定

  1. 父传子:数据应该是父组件props传递过来的,v-model拆解绑定数据
  2. 子传夫:监听输入,子传夫值给父组件修改

父元素:

<template>
  <div id="app">
<HelloWorld :citiyId="selectId" @changeId="selectId = $event"></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
 data(){
  return{
    selectId: '101'
  }
 },
 components:{
  HelloWorld
 }
}
</script>

<style>

</style>

子元素:

<template>
  <div class="app">
    <select :value="citiyId" @change="handleChange">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">武汉</option>
      <option value="104">深圳</option>
      <option value="105">广州</option>
    </select>
  </div>
</template>

<script>
export default {
  props:{
    citiyId: String
  },
  methods:{
    handleChange(e){
      this.$emit('changeId',e.target.value)

    }
  }
}
</script>

<style>

</style>

父组件 v-model简化代码,实现子组件和父组件数据双向绑定

  1. 子组件中:props通过value接收,事件触发input
  2. 父组件中:v-model给组件直接绑数据

父组件:

<template>
  <div id="app">
<HelloWorld v-model="selectId">
</HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
 data(){
  return{
    selectId: '105'
  }
 },
 components:{
  HelloWorld
 }
}
</script>

<style>

</style>

子组件:

<template>
  <div class="app">
    <select :value="value" @change="handleChange">
      <option value="101">北京</option>
      <option value="102">上海</option>
      <option value="103">武汉</option>
      <option value="104">深圳</option>
      <option value="105">广州</option>
    </select>
  </div>
</template>

<script>
export default {
  props:{
    value: String
  },
  methods:{
    handleChange(e){
      this.$emit('input',e.target.value)

    }
  }
}
</script>

<style>

</style>

表单类基础组件封装思路

  1. 父传子:父组件动态传递prop数据,拆解v-model,绑定数据
  2. 子传父:监听输入,子传父值给父组件修改

本质:实现了实现子组件和父组件的双向绑定

v-model简化代码的核心步骤

  1. 子组件中:props通过value接收,事件触发input
  2. 父组件中:v-model给组件直接绑数据

.sync修饰符

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

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

ref和$refs

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

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

获取组件:

1.ref:

  1. 在vue模板中,可以使用ref特性来标识子组件或DOM元素
  2. 通过ref可以访问子组件实例或DOM元素
  3. 一般在组件内部使用ref来获取子组件实例或DOM元素,并只能在组件内部使用
<template>
  <child-component ref="myComponent"></child-component>
</template>

<script>
export default {
  mounted() {
    this.$refs.myComponent.doSomething();
  }
}
</script>

2.$refs

  1. $refs是vue实例上的一个对象,用来存储所有拥有ref特性的子组件或DOM元素引用。

通过$refs可以直接访问子组件实例或DOM元素

<template>
  <child-component ref="myComponent"></child-component>
</template>

<script>
export default {
  mounted() {
    this.$refs.myComponent.doSomething();
  }
}
</script>

调用组件内的方法:

<template>
  <div>
    <child-component ref="childRef"></child-component>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childRef.childMethod(); // 调用子组件的方法
    }
  }
}
</script>

vue异步更新,$nextTick

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '初始消息'
    };
  },
  methods: {
    updateMessage() {
      this.message = '更新后的消息';
      this.$nextTick(() => {
        // 在 DOM 更新完成后执行的操作
        console.log('DOM 更新完成');
      });
    }
  }
}
</script>

  • 9
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值