vue3.x初探之v-model的详细使用

更新日期: 2020-12-22阅读: 1.9k标签: vue3

1、用于自定义组件时,v-model的prop和默认事件名更改了,并且移除了model选项

//父组件
<template>
  <div>
    <Child v-model="message" />
    <div>绑定的值:{{message}}</div>
  </div>
</template>


//子组件
<template>
  <div>
    <input 
      type="text" 
      :value="modelValue" 
      @input="$emit('update:modelValue', $event.target.value)"
    >
  </div>
</template>
<script>
export default {
  //2.x用法,可以修改prop和触发的事件名称,model以废弃
  // model: {
  //   prop: 'value', //3.x默认值改为了modelValue
  //   event: 'input' //3.x默认值改为了update:modelValue
  // },
  props:['modelValue']
}
</script>

2.x移除了model配置,3.x那又该怎么配置其他prop呢?

//父组件
<template>
  <div>
    <Child v-model:text="message" />
    <div>绑定的值:{{message}}</div>
  </div>
</template>

//子组件
<template>
  <div>
    <input 
      type="text" 
      :value="text" 
      @input="$emit('update:text', $event.target.value)"
    >
  </div>
</template>
<script>
export default {
  //3.x 接收v-model冒号后面的值,相应的触发的方法改为update:text
  props:['text']
}
</script>


2、3.x新增,可以定义多个v-model

//父组件
<template>
  <div>
    <Child 
      v-model="message1"
      v-model:text="message2" 
    />
    <div>绑定的值1:{{message1}}</div>
    <div>绑定的值2:{{message2}}</div>
  </div>
</template>

//子组件
<template>
  <div>
    <input 
      type="text" 
      :value="modelValue" 
      @input="$emit('update:modelValue', $event.target.value)"
    >
    <input 
      type="text" 
      :value="text" 
      @input="$emit('update:text', $event.target.value)"
    >
  </div>
</template>
<script>
export default {
  //v-model冒号后面不写值,默认就是modelValue
  props:['modelValue','text']
}
</script>


3、去掉了.sync 修饰符,新增自定义v-model修饰符

非自定义组件中,v-model除了.sync以外,其他依然还是可以使用的,比如:.lazy、.trim等

//父组件
<template>
  <div>
    <Child 
      v-model.toUpperCase="message1" 
      v-model:text.toLowerCase="message2" 
    />
    <div>绑定输入的字母全为大写:{{message1}}</div>
    <div>绑定输入的字母全为小写:{{message2}}</div>
  </div>
</template>

//子组件
<template>
  <div>
    <input 
      type="text" 
      :value="modelValue" 
      @input="handleInput1"
    >
    <input 
      type="text" 
      :value="text" 
      @input="handleInput2"
    >
  </div>
</template>
<script>
export default {
  props:['modelValue','modelModifiers','text','textModifiers'],
  created(){
    //对不带参数的v-model绑定,检查对象名称为:modelModifiers
    //对于带prop参数的v-model绑定,检查对象名称为:prop + modelModifiers
    console.log(this.modelModifiers); //{toUpperCase: true}
    console.log(this.textModifiers); //{toLowerCase: true}
  },
  methods: {
    handleInput1(e){
      let value = e.target.value;
      if(this.modelModifiers.toUpperCase){
        value = value.toUpperCase();
      }
      this.$emit("update:modelValue", value)
    },
    handleInput2(e){
      let value = e.target.value;
      if(this.textModifiers.toLowerCase){
        value = value.toLowerCase();
      }
      this.$emit("update:text", value)
    }
  }
}
</script>

链接: https://fly63.com/article/detial/9975

vue3.x 新特性 - CompositionAPI

安装 vue-cli3,在使用任何 @vue/composition-api 提供的能力前,必须先通过 Vue.use() 进行安装,安装插件后,您就可以使用新的 Composition API 来开发组件了。

Vue3数据响应系统

Vue3 就是基于 Proxy 对其数据响应系统进行了重写,现在这部分可以作为独立的模块配合其他框架使用。数据响应可分为三个阶段: 初始化阶段 --> 依赖收集阶段 --> 数据响应阶段

快速进阶Vue3.0

在2019.10.5日发布了Vue3.0预览版源码,但是预计最早需要等到 2020 年第一季度才有可能发布 3.0 正式版。新版Vue 3.0计划并已实现的主要架构改进和新功能:

Vue 3 对 Web 应用性能的改进

有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非常出色)的巨大改进。 Vue 团队在改进框架 API 方面做得非常出色

Vue3 中令人兴奋的新功能

用新的 Vue 3 编写的程序效果会很好,但性能并不是最重要的部分。对开发人员而言,最重要的是新版本将会怎样影响我们编写代码的方式。如你所料,Vue 3 带来了许多令人兴奋的新功能。值得庆幸的是

200 行从零实现 vue3

emmm 用半天时间捋顺了 vue3 的源码,再用半天时间写了个 mini 版……我觉得我也是没谁了,vue3 的源码未来一定会烂大街的,我们越早的去复现它,就……emm可以越早的装逼hhh

从 Proxy 到 Vue 源码,深入理解 Vue 3.0 响应系统

10 月 5 日,尤雨溪在 GitHub 开放了 Vue 3.0 处于 pre-alpha 状态的源码,这次 Vue 3.0 Updates 版本的更新,将带来五项重大改进:速度体积、可维护性、面向原生、易用性

Vue 的数据响应式(Vue2 及 Vue3)

从一开始使用 Vue 时,对于之前的 jq 开发而言,一个很大的区别就是基本不用手动操作 dom,data 中声明的数据状态改变后会自动重新渲染相关的 dom。换句话说就是 Vue 自己知道哪个数据状态发生了变化及哪里有用到这个数据需要随之修改。

在Vue2与Vue3中构建相同的组件

Vue 开发团队终于在今天发布了 3.0-beta.1 版本,也就是测试版。通常来说,从测试版到正式版,只会修复 bug,不会引入新功能,或者删改老功能。所以,如果你对新版本非常感兴趣,或者有新项目即将上马,不妨尝试一下新版本

Vue3中的Vue Router初探

对于大多数单页应用程序而言,管理路由是一项必不可少的功能。随着新版本的Vue Router处于Alpha阶段,我们已经可以开始查看下一个版本的Vue中它是如何工作的。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!