由于vue.js的特殊机制,初始化后给对象添加的属性是无法更新UI的.

最近结合typescript和vue进行web开发,就遇到了这样的坑.

class user{

name:string;

age:number;

constructor(){

}

}

var v=new Vue(var v2 = new Vue({
            el: '#app',
            data: {
               user:new user()
            }});

如果直接这样把user提交给vue,后续user.name='xxxx',UI是不会更新的

再控制台打印出user,什么都没有,因此务必在构造函数中初始化字段:

constructor(){

this.name="";

this.age=0;

}

脑袋里一定要有根线:ts中class interface之类的东西只是为了声明!!!

Typescript中的class interface 只是在声明,其实什么也没有干!的更多相关文章

  1. 转载:《TypeScript 中文入门教程》 11、声明合并

    版权 文章转载自:https://github.com/zhongsp 建议您直接跳转到上面的网址查看最新版本. 介绍 TypeScript有一些独特的概念,有的是因为我们需要描述JavaScript ...

  2. 在TypeScript中使用其他JS框架或库的方法

    最近刚刚接触TypeScript,感觉非常强大,但是也有一些问题. 比如我们正常写js时,只要把其他js库引入页面,甚至于只要加入到项目中,ReSharper就会自动分析他,并提供语法只能感知,写代码 ...

  3. 十分钟教你理解TypeScript中的泛型

    转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者.原文出处:https://blog.bitsrc.io/understanding-generics-in-t ...

  4. TypeScript 高级类型 接口(interface)

    在代码的实现或者调用上能设定一定的限制和规范,就像契约一样.通常,我们把这种契约称为接口. TypeScript的核心原则之一是对值所具有的结构进行类型检查. 有时称为“鸭式辨型法”或“结构性子类型化 ...

  5. 关于typescript中的枚举你需要知道这些

    数字枚举 数字枚举,即枚举里所有属性的值都是数字类型,先看这段代码: enum Colors { Red, Blue, Yellow } console.log(Colors.Red) console ...

  6. TypeScript中的private、protected

    首先我们要清楚 private . protected 现阶段只是javascript中的保留字(Reserved words),而非关键字(Keywords ).因此TypeScript中的纯类型声 ...

  7. TypeScript 中命名空间与模块的理解?区别?

    一.模块 TypeScript 与ECMAScript 2015 一样,任何包含顶级 import 或者 export 的文件都被当成一个模块 相反地,如果一个文件不带有顶级的import或者expo ...

  8. 介绍Unreal Engine 4中的接口(Interface)使用C++和蓝图

    这个教程是从UE4 Wiki上整理而来. 在C++中直接使用Interface大家应该很熟悉.只是简单先定义一个个有虚函数的基类,然后在子类中实现相应的虚函数.像这样的虚函数的基类一般概念上叫接口.那 ...

  9. TypeScript中的怪语法

    TypeScript中的怪语法 如何处理undefined 和 null undefined的含义是:一个变量没有初始化. null的含义是:一个变量的值是空. undefined 和 null 的最 ...

随机推荐

  1. swift_初始化器的使用

    //: Playground - noun: a place where people can play import Cocoa ***************************结构体与Cla ...

  2. cookie封装

    //设置cookie function setCookie(name,value,days){     //如果不设置天数 , 默认为30天     days=days?days:30;     va ...

  3. AS3和js相互通信要点分析

    目标:在html页面里可以使用事件来影响到swf文件的内容,swf文件也可以影响html里js代码的内容 一.新建flash文件,用Flash CC试用版新建一个TextArea.fla的源文件,不添 ...

  4. js倒计时跳转页面

    var t=10; setInterval(function refer(){ if(t>0){ document.getElementById("em").innerHTM ...

  5. Scrapy爬虫导图(持续完善中)

    Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架. 可以应用在包括数据挖掘,信息处理或存储历史数据等一系列的程序中.

  6. MVC3 新建项目

    一.安装工具 二.新建项目 step1:新建MVC3项目 打开新建项目窗口,在“已安装的模板”列表中选择“Web”,在右侧应用程序模板列表中选择“ASP.NET MVC3 Web应用程序”,修改项目名 ...

  7. 无废话WCF入门教程六[一个简单的Demo]

    一.前言 前面的几个章节介绍了很多理论基础,如:什么是WCF.WCF中的A.B.C.WCF的传输模式.本文从零开始和大家一起写一个小的WCF应用程序Demo. 大多框架的学习都是从增.删.改.查开始来 ...

  8. 自定义动画css属性

    自定义动画: 1.animation-name(自定义动画名称) 元素所应用的动画名称,必须与@keyframes使用,名称由@keyframes定义. keyframes(动画关键帧):以@keyf ...

  9. Repository - Service

  10. Hibernate实体关系映射(OneToMany、ManyToOne双边)——完整实例

    双边关系是最常见的配置.在多方有一方的引用,一方也有多方的引用.双边关系能够很方便地查询数据.看一个班级与学生的双边关系. 班级(Clazz类)与学生(Student类):一对多关系.班级中有学生属性 ...