[Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript
Vue models, v-model, allow us to use two-way data binding, which is useful in some cases such as forms. This lesson shows how to use it by creating a custom checkbox component using the @Model decorator in TypeScript.
When using the v-model, the custom component will receive 'value' prop from the parent component. If we also want to pass ':value' to the custom component, we need to use '@Model('change') propName'.
v-model will also received 'change' event for components communcation.
Checkbox:
<template>
<div>
<input type="checkbox" :id="id" :checked=checked @change="changed"/> {{label}}
</div>
</template> <script lang="ts">
import Vue from 'vue'
import { Component, Prop, Model } from 'vue-property-decorator'
@Component
export default class MyCheckbox extends Vue {
@Prop() label: string
@Prop() id: string @Prop()
@Model('change') checked: boolean changed(ev) {
this.$emit('change', ev.target.checked)
}
}
</script>
Parent Component:
<template>
<div>
<MyCheckbox :label="checkbox.label" :id="checkbox.id" v-model="checkbox.checked"/> {{JSON.stringify(checkbox)}}
</div>
</template>
<script lang="ts"> import Vue from 'vue'
import {Component} from 'vue-property-decorator'
import MyCheckbox from './MyCheckBox.vue' @Component({
components: {
MyCheckbox
}
})
export default class HelloTs extends Vue { checkbox = {
label: 'Fancy checkbox',
id: 'checkbox-id',
checked: true
}
}
</script>
[Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript的更多相关文章
- [Vue + TS] Create your own Decorators in Vue with TypeScript
We’ve used @Watch, @Inject and more decorators from vue-property-decorator. In this lesson however w ...
- [Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript
Vue 2.2 introduced a simple dependency injection system, allowing you to use provide and inject in y ...
- [Vue + TS] Create Type-Safe Vue Directives in TypeScript
Directives allow us to apply DOM manipulations as side effects. We’ll show you how you can create yo ...
- [Vue + TS] Using Route events inside Vue
vue-router introduces new hooks into the component. In this lesson we’ll show you how to use these n ...
- 【vue&ts开发】Vue 3.0前的 TypeScript 最佳入门实践
1.使用官方脚手架构建 新的 VueCLI工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue createmy-app. 然后,命令行会要求选择预设.使用箭头键选择 ...
- vue+ts搭建项目
Tip: 为了避免浪费您的时间,本文符合满足以下条件的同学借鉴参考 1.本文模版不适用于小型项目,两三个页面的也没必要用vue2.对typescript.vue全家桶能够掌握和运用 此次项目模版主要涉 ...
- [Vue 牛刀小试]:第十七章 - 优化 Vue CLI 3 构建的前端项目模板(1)- 基础项目模板介绍
一.前言 在上一章中,我们开始通过 Vue CLI 去搭建属于自己的前端 Vue 项目模板,就像我们 .NET 程序员在使用 asp.net core 时一样,我们更多的会在框架基础上按照自己的开发习 ...
- JS组件系列——又一款MVVM组件:Vue(二:构建自己的Vue组件)
前言:转眼距离上篇 JS组件系列——又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue ...
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
随机推荐
- Python 设计模式--策略模式
策略模式(Strategy Pattern) 策略模式是一种与行为相关的设计模式,允许你在运行时根据指定的上下文确定程序的动作.可以在两个类中封装不同的算法,并且在程序运行时确定到底执行哪中策略. 特 ...
- .Net实战之反射相关类之间的人体经络关系
--1.类的部分组成成员 --2.巧记成员之间的关系 [MyTable("T_UserInfo")] public class UserInfo : Person, UserSer ...
- leetcode375 Guess Number Higher or Lower II
思路: dp. https://leetcode.com/problems/guess-number-higher-or-lower-ii/discuss/ 实现: class Solution { ...
- 鼠标拖拽移动Java界面组件
默认的,Frame或者JFrame自身已经实现了鼠标拖拽标题栏移动窗口的功能. 只是,当你不满意java的JFrame样式,隐藏了标题栏和边框,又或者干脆直接使用JWindow,那你又该怎么实现鼠标拖 ...
- hashtable的用法
C#中哈希表(HashTable)的用法详解 1. 哈希表(HashTable)简述 在.NET Framework中,Hashtable是System.Collections命名空间提供的一个容器 ...
- HDU_1242_Rescue
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1242 大意:迷宫搜索,'#'代表墙,'.'代表路,'x'代表守卫,每移动1格用1秒,杀死守卫用1秒,ang ...
- ThinkPHP---TP功能类之邮件
[一]概论 (1)简介: 这里说的邮件不是平时说的email邮件(邮件地址带有@符号的),而是指的一般论坛网站的站内信息,也叫私信或者pm(private message私信) [二]站内信案例 (1 ...
- 字符串--P1553 数字反转(升级版)
题目描述 给定一个数,请将该数各个位上数字反转得到一个新数. 这次与NOIp2011普及组第一题不同的是:这个数可以是小数,分数,百分数,整数.整数反转是将所有数位对调:小数反转是把整数部分的数反转, ...
- 洛谷——P1342 请柬
P1342 请柬 题目描述 在电视时代,没有多少人观看戏剧表演.Malidinesia古董喜剧演员意识到这一事实,他们想宣传剧院,尤其是古色古香的喜剧片.他们已经打印请帖和所有必要的信息和计划.许多学 ...
- 「 Luogu P1850 」 换教室
解题思路 很明显的是个期望 $dp$. 先前想到 $dp[i][j]$ 表示第决策到第 $i$ 个时间段,已经进行了 $j$ 次申请,然后就没有然后了,因为这根本就没法转移啊,你又不知道前 $i-1$ ...