TS基础------ ts项目搭建-----------get新技能

全局安装过vue以后

在根目录创建 vue create ts-vu-demo 项目

选择手动

上下选择 空格键选择确认活取消 然后回车



![在这里插入图片描述](https://img-blog.csdnimg.cn/20210318154734431.png

案例 简单实用demo

import { Component, Prop, Vue, Watch ,Emit, Model} from “vue-property-decorator”;

about.vue

<template>
  <div class="about">
    <h1>{{firstName}}{{lastName}}</h1>
    <p>{{fullName}}</p>
    <button @click="change">修改</button>
    <hr>
    <User  v-for="item in userList" :key="item.id" v-bind="item"  @on-remove="remove" @add-age="addAge"   v-model="firstName" ></User>
  </div>

</template>
<script lang="ts">
import { Component, Prop, Vue, Watch ,Emit, Model} from "vue-property-decorator";
import User from "../components/User.vue";
interface IUser {
  id: number;
  name: string;
  age: number;
  sex?: number;
}
@Component({
  name:"user",
  components:{
      //之定义属性
      User
  }
})

export default class About extends Vue {
  firstName: string = "zhang";
  lastName: string = "san";

  userList: Array<IUser> = [
    {
      id: 1,
      name: "zhangsan",
      age: 20,
      sex: 1
    },
    {
      id: 2,
      name: "zhangsan",
      age: 20,
      sex: 0
    },
    {
      id: 3,
      name: "zhangsan",
      age: 20,
      sex: 1
    },
    {
      id: 4,
      name: "zhangsan",
      age: 20,
      sex: 1
    }
  ];

  get fullName() {
    return this.firstName + "" + this.lastName;
  }
  set fullName(val) {
    const arr = val.split("");
    this.firstName = arr[0];
    this.lastName = arr[1];
  }
  change() {
    this.firstName = "li si";
  }
  @Watch("firstName")
  nFirstNameChang(newVal, oldVal) {
    console.log(newVal, oldVal);
  }



  remove(id:number){
   const index:number= this.userList.findIndex(userList=>userList.id===id)
    this.userList.splice(index,1)

  }

  addAge(id:number){
    const user:IUser=this.userList.find(userList=>userList.id===id)
  //  console.log(user);
   
     user.age++
   
  }

  created(){
    this.fullName="wang wu"
  }
  mounted(){

  }
}
</script>

User.vue

<template>
<div>
    姓名{{name}}
    性别:{{SEX[sex]}}
    年龄:{{age}}
    <button @click="addAge(id)">年龄+1</button>
    <button @click="remove(id)">删除</button>

    <hr>

    <div>
        fName: <input type="text" :value="fName" @input="onChangefName">
    </div>
</div>
</template>
<script lang="ts">
import { Component, Vue ,Prop,Emit,Model} from 'vue-property-decorator';
enum Sex{
    '男' = 1,
    "女" = 0
}
@Component({
  name:"User",
})
export default class User extends Vue{
    SEX:any=Sex
    @Prop(Number)
    id!:number;
     @Prop({type:String})
    name!:string;
     @Prop(Number)
     age!:number;
     @Prop({type:Number,default:1})
     sex!:number;


     @Emit("on-remove")
     remove(id:number){ }

     //不用Emit指定方法名也行
     @Emit()
     addAge(id:number){}


     @Emit('MODELchangeFirstName') ///这里要emit （model 事件)
     onChangefName(e:any){
         return e.target.value

     }


     @Model("MODELchangeFirstName",{type:String})  //
     fName!:string





}
</script>

<style>

</style>