vue-class-component 以class的模式写vue组件

vue英文官网推荐了一个叫vue-class-component的包，可以以class的模式写vue组件。vue-class-component(以下简称Component)带来了很多便利：

1.methods，钩子都可以直接写作class的方法

2.computed属性可以直接通过get来获得

3.初始化data可以声明为class的属性

4.其他的都可以放到Component装饰器里

举个小例子

@Component({props: {firstName: String,lastName: String},components: {'component-a': ComponentA}
})
export class XXXX extends Vue {firstName: string;lastName: string;//初始datamiddleName = 'middle';//computed 属性get fullName() {return this.firstName + this.lastName;}//methodhello() {alert(`Hello ${this.fullName}!`);}//钩子mounted() {this.hello();}
}

现在尽管可以以class的模式来写vue的组件了，但自动补全，代码提示等功能还是没有，要想获取好的代码提示还得是原语言啊，js代码在.ts,.js文件写，scss在.scss写,html在.html写。

最终vue组件以以下方式写感觉挺爽，很顺

import Vue from 'vue';
import Componet from 'vue-class-component';require('./XXX.template.scss');@Component({template: require('./XXX.template.html'),props: {firstName: String,lastName: String},components: {'component-a': ComponentA}
})
export class XXXX extends Vue {firstName: string;lastName: string;//初始datamiddleName = 'middle';//computed 属性get fullName() {return this.firstName + this.lastName;}//methodhello() {alert(`Hello ${this.fullName}!`);}//钩子mounted() {this.hello();}
}

现在各个文件回归它的本职工作了，哈哈哈，不过现在打包时有点小问题，

[Vue warn]: You are using the runtime-only build of Vue where the template option is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

解决方法也很简单，在webpack配置文件里加上

alias: {'vue': 'vue/dist/vue.esm.js'
}

即可。好的，现在代码补全，语法提示什么功能都回来了。

vue-class-component 以class的模式写vue组件相关推荐

Vue复习知识点（理解MVVM模式、Vue实例配置的各选项、Vue的各种内置指令....）
Vue复习知识点一.理解MVVM模式 VVM是一种设计模式,它将应用程序分为三个部分:模型(Model).视图(View)和视图模型(ViewModel).它的主要目的是将应用程序的界面逻辑与业务逻 ...
vue filter对象_学习vue源码（3）手写Vue.directive、Vue.filter、Vue.component方法
一.Vue.directive Vue.directive(id,[definition]); 1)参数 { string } id{ Function | Object } [ definition ...
vue 多点触控手势_手写 Vue 手势组件__Vue.js
前言最近需要使用手指捏合扩大的手势操作,找了几个组件,要么对 Vue 适配不好,要么量级太大,决定自己手写手势操作. 项目与效果预览思路直接在 DOM 上绑定 touchstart .touch ...
在google应用商店下载的Vue.js Devtools在控制台(开发者模式)没有vue选项
在google应用商店下载的Vue.js Devtools在控制台没有vue选项第一种:图标不亮第二种:图标亮,但是在下面的控制台选项中没有vue 第一种:图标不亮首先,如果最上面那个vue图标 ...
手牵手教你写 Vue 插件
碎碎念上一篇文章,我们介绍了如何构建一个 react 插件,今天我们说说如何构建 vue 插件准备工作由于与上一篇 react 插件文章使用的是相同的结构,代码测试.持续集成及发布 npm 包也 ...
Vue 源码之手写Vue Router
Vue 源码之手写Vue Router 源码地址:https://github.com/CONOR007/Handwritten-routing 一.Vue Router的两种模式 hash模式实现原 ...
教你从零写vue穿梭框
教你从零写vue穿梭框 1. 前言 2. 制作选择组件(select-input) 2. 制作vue穿梭框组件(table-transfer) 4. 将选择组件和穿梭框组件结合使用 4.1 点击选择组 ...
Vue教程6【完结】【vue-router】路由，路由传参，编程式路由导航，缓存路由组件，路由守卫，路由模式，vue ui组件库
vue-router 了解 vue插件库,用来实现SPA应用(单页面) 整个页面只有一个完整的页面点击页面中导航链接,不会刷新页面,只做局部更新数据通过ajax请求路由的理解一组映射关系(ke ...
vue2.0中组建里面套用组件_vue19 组建 Vue.extend component、组件模版、动态组件的实例代码...
具体代码如下所示: document var aaa=vue.extend({//继承出来一个vue类aaa template:' 我是标题3 ' }); var a=new aaa();//a跟vm ...

vue-class-component 以class的模式写vue组件

vue-class-component 以class的模式写vue组件相关推荐

最新文章

热门文章