VueJS +活字最初の入門レッスン

ウェッジ

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

学習は、背景知識が必要です

* NodeJs
* NpmJs
* VueJS
* TypeScript

VueJSの作成 - 活字体プロジェクト

公式には、足場の使用を推奨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'
    }
  }
})

コンポーネントを使用する2番目の方法

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

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

概要

コードは、このリンクをクリックしてください詳細
近い事業を書き込む場所ReactJsフレームワークVueJsフレームワークを、これは実際には開発者にとっては良いことです。これは、あなたがそれを学習し、使用するためのフレームワークを好むだろう。