Vue&TypeScript:vue-property-decorator / vue-class-component的'el'属性?

时间:2018-09-08 02:39:47

标签: typescript vue.js vue-component

让这个问题很简单。下列代码的哪个等效项适用于TypeScript和 Vue && vue-property-decorator组合?

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

1 个答案:

答案 0 :(得分:2)

vue-property-decorator旨在通过TypeScript中的类样式语法扩展Vue组件。有问题的代码不符合标准,因为它不是组件。假设您打算在此单一文件组件中转换脚本:

App.vue

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

使用vue-property-decorator进行的转换如下所示:

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class App extends Vue {
  message = 'Hello Vue!'
}
</script>

安装根目录保持不变(不会使用vue-property-decorator):

<!-- index.html -->
<body>
  <div id="app"></div>

  <script>
    new Vue({
      el: '#app'
    });
  </script>
</body>

我建议使用vue-cli生成TypeScript项目(在提示符下选择TypeScript预设和“类样式语法” )。