vue2.0,vue3.0 v-model数据双向绑定

vue.2.0
vue2.0 vue-property-decorator
vue3.0

vue.2.0

<base-checkbox v-model="lovingVue"></base-checkbox>Vue.component('base-checkbox', {model: {prop: 'checked',event: 'change'},props: {checked: Boolean},template: `<inputtype="checkbox"v-bind:checked="checked"v-on:change="$emit('change', $event.target.checked)">`
})

vue2.0 vue-property-decorator

// 父组件
<template><div class="Model"><ModelComponent v-model="fooTs" value="some value"></ModelComponent><div>父组件 app : {{fooTs}}</div></div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import ModelComponent from '@/components/ModelComponent.vue';@Component({ components: {ModelComponent} })
export default class ModelPage extends Vue {private fooTs = 'App Foo!';
}
</script>// 子组件
<template><div class="hello">子组件:<input type="text" :value="checked" @input="inputHandle($event)"/></div>
</template><script lang="ts">
import {Component, Vue, Model,} from 'vue-property-decorator';@Component
export default class ModelComponent extends Vue {@Model('change', { type: String }) readonly checked!: stringpublic inputHandle(that: any): void {this.$emit('change', that.target.value); // 后面会讲到@Emit,此处就先使用this.$emit代替}
}
</script>

vue3.0


<com-automatic v-model:username="PassengerName"/>app.component('com-automatic',{template: `<input type="text" :value="username" @input="inputChange"/>`,props: {username: { type: String  }}, setup(props, { emit}) {function inputChange(e) {  emit("update:username", e.target.value)}return { inputChange }}
})

vue2.0,vue3.0 v-model数据双向绑定相关推荐

【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + 代码 [P001-050]
视频链接:尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通_哔哩哔哩_bilibili P1-50:当前页面. P51-100:尚硅谷Vue2.0+Vue3.0全套教程视频笔记 + ...
Vue基础——VueJS是什么、Vue的优缺点、vue2和vue3的模板区别、MVVM数据双向绑定、Vue的安装和使用、Vue模板语法-文本渲染、常用的vue的指令
目录一.VueJS是什么? 二.Vue的优缺点三.MVVM 数据双向绑定四.Vue的安装和使用五.Vue模板语法-文本渲染六.常用的vue的指令一.VueJS是什么? 它是一个轻量级MVV ...
Vue数据双向绑定原理（vue2向vue3的过渡）
众所周知,Vue的两大重要概念: 数据驱动组件系统接下来我们浅析数据双向绑定的原理一.vue2 1.认识defineProperty vue2中的双向绑定是基于defineProperty的ge ...
[Vue]学习笔记目录【Vue2与Vue3完结】 (尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通)
文章目录前言遇见的问题及其解决方案之前笔记 Vue2 Vue3 前言本笔记根据如下笔记和视频进行整理老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8 ...
vue2.0 vue3.0 打包二级项目-如何部署二级目录
看了很多其他大佬的文章,我这边做了一个笔记记录了一下vue打包二级目录的方法我们想要的效果是什么我们想www.taobao.com/web二级目录来访问我们的页面如果我们没有做任何的配置,直接将 ...
数据双向绑定_手写 Vue3 数据双向绑定理解Proxy
前言 vue3的 Proxy 最近貌似各大网红公众号都有发,我也来蹭蹭热度写一篇吧!我们也可以结合vue2来看看vue3到底发生了些什么变化,又解决了Vue2.x的哪些痛点.接下来我们一起看看~ 目录 ...
vue2数据双向绑定的原理
vue2的数据双向绑定原理使用的是es5的数据劫持object.defineProperty,如果读取数据就会触发get,修改数据就会触发set,达到数据和视图的响应和更新,但是因为js固有的特性,不 ...
西安电话面试：谈谈Vue数据双向绑定原理，看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

vue2.0,vue3.0 v-model数据双向绑定

vue2.0,vue3.0 v-model数据双向绑定

vue.2.0

vue2.0 vue-property-decorator

vue3.0

vue2.0,vue3.0 v-model数据双向绑定相关推荐

最新文章

热门文章