码迷,mamicode.com
首页 > 其他好文 > 详细

[Vue @Component] Simplify Vue Components with vue-class-component

时间:2018-07-22 18:45:32      阅读:163      评论:0      收藏:0      [点我收藏+]

标签:prope   template   tor   vue   export   options   pil   json   port   

While traditional Vue components require a data function which returns an object and a method object with your handlers, vue-class-componentflattens component development by allowing you to add your data properties and handlers directly as properties of your class.

 

Install:

npm i --save vue-class-component vue-property-decorator

 

jsonfing.json:

{
    "compilerOptions": {
        "experimentalDecorators": true
    }
}

 

HelloWorld.vue:

<template>
  <div @click="onClick" class="hello">
    {{message}}
  </div>
</template>

<script>

import {Component, Prop, Vue} from vue-property-decorator

@Component({})
export default class HelloWorld extends Vue {
  @Prop({
    default: Default message from Hello World Component
  })
  message

  onClick() {
    this.message = Goodbye
  }
}
</script>

 

[Vue @Component] Simplify Vue Components with vue-class-component

标签:prope   template   tor   vue   export   options   pil   json   port   

原文地址:https://www.cnblogs.com/Answer1215/p/9350904.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!