由于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. 命令行导入mysql数据

    找到mysql安装目录(bin) 进入mysql mysql -u root -p 123 选中数据库 use 数据库名 导入sql  source sql数据库路径

  2. 日期时间组件 - layui.laydate

    全部参数 一.核心方法:laydate(options); options是一个对象,它包含了以下key: '默认值' { elem: '#id', //需显示日期的元素选择器 event: 'cli ...

  3. 使用Jmeter进行HTTP接口测试

    这几天学习了一下使用Jmeter进行HTTP接口测试,这个也是后面进行性能测试的基础吧 安装运行请自行搜索,下载地址:http://jmeter.apache.org/download_jmeter. ...

  4. Java数组扩容算法及Java对它的应用

    1)Java数组对象的大小是固定不变的,数组对象是不可扩容的.利用数组复制方法可以变通的实现数组扩容.System.arraycopy()可以复制数组.Arrays.copyOf()可以简便的创建数组 ...

  5. Java之数组了解

    一.什么是数组 数组可以理解为是一个巨大的“盒子”,里面可以按顺序存放多个类型相同的数据, 比如可以定义 int 型的数组 scores 存储 4 名学生的成绩: int[] scores={76,8 ...

  6. call 和 apply使用

      call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向.因为 JavaScript 的函数存在「定义时上下文」 ...

  7. 解决javascript动态改变img的src属性图片不显示问题

    首先讲下这个bug的出现的情况,页面中有<a href="JavaScript:void(0)" onclick="document.getElementById( ...

  8. git配置笔记

    windows: 1. PS>ssh-keygen -t rsa -C "your_email@youremail.com" ssh-keygen命令报错--无法将“ssh- ...

  9. 纯CSS tooltip 提示

    一般的tooltip,使用超链接的title,或者是css+javascript生成. 如果页面布局合理,样式结构清晰,可以使用纯CSS的提示. demo如下: a.tooltip { positio ...

  10. MVC3 新建项目

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