码迷,mamicode.com
首页 > Web开发 > 详细

VueJS + TypeScript 入门第一课

时间:2020-03-07 09:19:12      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:ted   代码   res   vue   ret   第一课   r++   sel   tor   

楔子

伴随着 Vue 新版本发布对 TypeScript 支持越来越好。当然值得在项目中使用优秀的技术栈。

学习要求背景知识

* NodeJs
* NpmJs
* VueJS
* TypeScript

创建 VueJS - TypeScript 项目

使用官方推荐的脚手架 Vue Cli

vue create VueJs-TypeScript // 项目名为 VueJs-TypeScript,另外创建过程中,请选 "Manually select features",后选中 TypeScript

第一种写组件的方式

该目录:src/components/HelloWorld.vue
import { Component, Prop, Vue } from 'vue-property-decorator'
@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
  firstName = "Hello World!"
  lastName = 'Hello Wrold'
  counter = 0
  mounted() {
    console.log('mounted')
  }
  get fullName(): string {
    return this.firstName + this.lastName
  }
  IncrementCounter() {
    this.counter++
  }
}

第一种引用组件的方式

该目录为:src/App.vue
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';

@Component({
  components: {
    HelloWorld,
  },
})
export default class App extends Vue {}

第二种写组件的方式

该目录:src/components/HelloWorld.vue
import Vue from 'vue'

export default Vue.extend({
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      test: "Hello TS!" as string
    }
  },
  methods: {
    pressMe(): string {
      return this.test + 'banana'
    }
  }
})

第二种使用组件的方式

该目录为:src/App.vue
import Vue from 'vue'
import HelloWorld from './components/HelloWorld.vue';

export default Vue.extend({
  name: 'App',
  components: {
    HelloWorld
  }
})

总结

代码详情点击此处链接
VueJs 框架何 ReactJs 框架在写业务方面越来越接近,这对于开发者其实是一件好事。你喜欢哪一个框架就使用且学习它。

VueJS + TypeScript 入门第一课

标签:ted   代码   res   vue   ret   第一课   r++   sel   tor   

原文地址:https://www.cnblogs.com/zhourongcode/p/12432090.html

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