zoukankan      html  css  js  c++  java
  • VueJS + TypeScript 入门第一课

    楔子

    伴随着 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 框架在写业务方面越来越接近,这对于开发者其实是一件好事。你喜欢哪一个框架就使用且学习它。

  • 相关阅读:
    保障升级:Splashtop 公布安全顾问委员会成员
    Android Studio gradle-5.4.1
    C++__静态成员
    网络嗅探及协议分析-wireshark
    网络嗅探及协议分析-tcpdump
    Linux基本安全防护技术
    C++__动态对象
    C++___深浅拷贝
    C++____函数重载
    C++__函数的默认参数和占位
  • 原文地址:https://www.cnblogs.com/zhourongcode/p/12432090.html
Copyright © 2011-2022 走看看