[Vue + TS] Write a Vue Component as a Class in TypeScript
Starter app: https://github.com/alexjoverm/Vue-Typescript-Starter
Writing Vue components as plain objects has very limited capabilities for TypeScript’s IntelliSense. This lesson will show you how to write components as classes to take full potential of TypeScript static typing by using vue-class-component.
Install:
npm install --save vue-class-component
Original file:
<template>
<div class="hello">
<h1>{{ message }}</h1>
<button @click="clicked">Click</button>
</div>
</template> <script lang="ts">
export default {
data () {
return {
message: 'Welcome to Your Vue.js App'
}
}, computed: {
fullMessage(){
return `${this.message} from Typescript`;
}
}, created() {
console.log('created');
}, methods: {
clicked(){
console.log('clicked');
}
}
}
</script>
- Everything inside "data" mapping to props in class.
- Everything inside "computed" mapping to get method
- "created" lifecycle hook is just a function
- Everything inside "methods" are also just functions.
<template>
<div class="hello">
<h1>{{ message }}</h1>
<button @click="clicked">Click</button>
</div>
</template> <script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component' @Component({})
export default class Hello extends Vue {
message: string = 'Welcome to Your Vue.js App' get fullMessage() {
return `${this.message} from Typescript`
} created() {
console.log('created');
} clicked(){
console.log('clicked');
}
} /*
export default {
data () {
return {
message: 'Welcome to Your Vue.js App'
}
}, computed: {
fullMessage(){
return `${this.message} from Typescript`;
}
}, created() {
console.log('created');
}, methods: {
clicked(){
console.log('clicked');
}
}
}*/
</script>
[Vue + TS] Write a Vue Component as a Class in TypeScript的更多相关文章
- [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开发】Vue 3.0前的 TypeScript 最佳入门实践
1.使用官方脚手架构建 新的 VueCLI工具允许开发者 使用 TypeScript 集成环境 创建新项目. 只需运行 vue createmy-app. 然后,命令行会要求选择预设.使用箭头键选择 ...
- "[Vue warn]: Failed to mount component: template or render function not defined"错误的解决
VUE中动态路由出错: vue.esm.js?a026: [Vue warn]: Failed to mount component: template or render function not ...
- vue +ts 在router的路由中import报错的解决方案
在router.ts中引入.vue文件,会提示打不到module,但是编译可能成功,运行也不报错 找了好久,发现了这个答案 https://segmentfault.com/a/11900000167 ...
- Vue官方文档Vue.extend、Vue.component、createElement、$attrs/$listeners、插槽的深入理解
一.Vue.extend({}). 看官网文档介绍,Vue.extend({})返回一个Vue的子类,那么这个Vue子类是啥玩意儿呢?我直观感觉它就是创建出一个组件而已啊,那么它又和Vue.compo ...
- Vue报错之"[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead......"
一.报错截图 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the p ...
- Vue报错之" [Vue warn]: Unknown custom element: <wzwzihello> - did you register the component correctly? For recursive components, make sure to provide the "name" option."
一.报错截图 [Vue warn]: Unknown custom element: <wzwzihello> - did you register the component corre ...
- [Vue warn]: Failed to mount component: template or render function not defined. found in ---> <XFbwz> at src/views/XFbwz.vue <App> at src/App.vue <Root>
1.引入.vue文件忘记加.vue 2.引入文件内容为空
- Vue 爬坑之路(十)—— Vue2.5 + Typescript 构建项目
Typescript 在前端圈已经逐渐普及,Vue 2.5.0 改进了类型声明,使得对 TypeScript 更加友好 不过要想在项目中直接使用 TypeScript 仍然需要对项目进行一些改造 P ...
随机推荐
- 实现人脸识别性别之路---matplotlib
Np.linspace(start,stop,num,endpoint,dtype)函数 1.参数:范围值,在范围值中取到的数值总数.是否包含范围值.类型 2.返回值:返回一维数据 3.在指定的范围内 ...
- JQ each 各种标签
类选择器: $("input[class=class1]").each(function(){ alert($(this).val()); }); ID选择器: $("i ...
- Linux下安装Go环境
登录Linux Mac或Linux的用户可以用命令ssh root@xxx.xxx.xxx.xxx登录主机Window的用户可以使用SecureCRT登录主机虚拟机用户直接打开你的虚拟机 安装Go环境 ...
- 实战c++中的string系列--string的替换、查找(一些与路径相关的操作)
今天继续写一些string操作. string给我们提供了非常多的方法,可是每在使用的时候,就要费些周折. 场景1: 得到一个std::string full_path = "D:\prog ...
- 一些安全的DNS提供商
检测当前使用的DNS服务器 https://dnsleaktest.com 一些安全的DNS提供商 DNS提供商名称 主DNS服务器 次要DNS服务器 Google 8.8.8.8 8.8.4. ...
- vim-缓存区中打开另外一个文件的方法
现在有这么一种情况: 我现在在ubuntu用户根目录下-- 我根目录下有一个文件夹blogs,这个文件夹下面有两个文件:text1,text2. 我现在从-目录下进行如下操作 ...
- cmake 常见问题及解决
1. undefined reference to symbol 'pthread_key_delete@@GLIBC_2.2.5 未定义对某符号的引用,该错误为链接时(linking)发生的错误.有 ...
- Redis安装以及配置
下载 http://redis.io/download 解压 tar zxvf redis-2.8.17.tar.gz 编译并安装 1 2 3 4 cd redis-2.8.17 make cd sr ...
- Server.MapPath()的用法
http://blog.csdn.net/qiuhaifeng_csu/article/details/19416407 Server.MapPath(string path)作用是返回与Web服务器 ...
- C++ 补课(二)
1,如果遇到派生类成员和基类成员的名称冲突的情况,程序会采用派生类成员执行相应的操作.如果需要使用基类中的同名成员,则必须在程序中使用全局分辨符“::” 虚基类 —— 派生类在继承基类时加入“virt ...