vue2+ts在项目中的用法

安装项目

vue create vuets

初始内容 Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {
}
</script>

声明组件

import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

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

设置页面的值

<template>
  <div class="home">
    {{name}}
  </div> 
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

@Component({   //注册组件
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {
  name='123'       //设置变量
}
</script>

public，private，protected的用法

<template>
  <div class="home">
    {{name}}    {{age}}    {{num}}
  </div>
</template>

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

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {
 public name:string='123'
 private age:number=11
 protected num:number=45
}
</script>

public，private，protected的区别

   public：是表示是公开的，在任何地方，都可以调用，不管在类中，还是子类中，还是对象中均是可以直接调用
   private:是表示私有的，只能在类中访问，不能在子类或者对象中访问，要调用私有的属性或者方法，可以通过在类中设置公有的方法访问私有的成员，对外暴露公有的方法进行访问，**子类继承的时候，也可以继承父类私有的属性和方法，但是也要通过在子类继承过来的公有的方法进行访问私有的属性**
   protected: 只能在类中或者子类中进行访问，但是不能在自身类或者子类对象中访问
    
   总的老说,权限范围：public>protected>private

vue-property-decorator 提供的装饰器

@Prop
@PropSync
@Model
@Watch
@Provide
@Inject
@ProvideReactive
@InjectReactive
@Emit
@Ref
@Component (由 vue-class-component 提供)
Mixins (由 vue-class-component 提供)