以类的写法创建的 vue3+Ts+Vant 移动端项目

8个生命周期：

<template>
  <div>
    <h1 id="mh1" v-text="uname"></h1>
  </div>
</template>

<script lang="ts">
import { Vue, Options } from "vue-class-component";
@Options({
  components: {
    // 组件声明
  },
})
export default class HomeView extends Vue {
  // 声明变量 不可使用关键字var,let,const 并且必须有初始值

  uname: string = "小红";

  // 使用的时候使用this

  // 生命周期里面进行方法执行
  // 8个生命周期
  // 数据初始化一般是在created/mounted

  public beforeCreate(): void {
    console.log("beforeCreate", this.uname);
  }

  public created(): void {
    console.log("created", this.uname);
  }

  // 数据渲染前
  public beforeMount(): void {
    console.log("beforeMount", document.querySelector("#mh1"));
  }

  // 数据渲染后
  public mounted(): void {
    console.log("mounted", document.querySelector("#mh1"));
    // 数据操作
    setTimeout(() => {
      this.uname = "小明";
    }, 2000);
  }

  public beforeUpdate(): void {
    console.log("beforeUpdate");
  }

  // 数据更新并且引发了dom更新,就会触发
  public updated(): void {
    console.log("updated");
  }

  // vue实例销毁前
  public beforeUnmount(): void {
    console.log("beforeUnmount");
  }
  
  // vue实例销毁后
  public unmounted(): void {
    console.log("unmounted");
  }
}
</script>

<style lang="less">
</style>

模板语法：

<template>
  <div class="about">
    <h1 v-text="text1"></h1>
    <h1>{{ text2 }}</h1>
    <hr />
    <h1 v-html="text2" v-bind:h1Id="attrId"></h1>
    <!-- 绑定类名 -->
    <h1 :class="{ red: isRed, big: isBig }">我的文字颜色</h1>
    <!-- 商品质量 -->
    <p v-if="goodsType == 'A'">商品很好</p>
    <p v-else-if="goodsType == 'B'">商品合格</p>
    <p v-else>商品不好</p>
    <p v-show="showPrice">价格:100</p>
    <p v-show="showDec">详情</p>
    <hr />
    <h1>商品列表</h1>
    <ul>
      <li v-for="(item, index) in goodsList" :key="index">
        <p>商品标题:{{ item.goodsName }}</p>
        <p>商品价格:{{ item.goodsPrice }}</p>
        <p v-if="item.goodsDec">商品详情:{{ item.goodsDec }}</p>
        <hr />
      </li>
    </ul>
    <van-button type="danger" v-on:click="handleDanger1">单击警告</van-button>
    <van-button type="danger" @dblclick="handleDanger2">双击警告</van-button>
    <!--不知为何移动端dblclick不生效：未解决-->
    <input type="text" placeholder="请输入你的需求" v-model="needVla1" />
    <p>{{ needVla1 }}</p>
    <input
      type="text"
      placeholder="请输入"
      v-model="needVla2"
      @input="handleInput"
      @change="handleChange"
      @focus="handleFocus"
      @blur="handleBlur"
    />
  </div>
</template>
<script lang="ts">
interface IGoods {
  //定义接口
  goodsName: string;
  goodsPrice: number;
  goodsDec?: string; //? 代表非必填
}
import { Options, Vue } from "vue-class-component";
export default class AboutView extends Vue {
  /* 模板语法:
  1.v-text  绑定文本    缩写 {{变量名}}  频率比较高
  2.v-html  绑定富文本
  3.v-bind  绑定属性值  缩写 :
  4.v-if v-else / v-if v-else-if v-else
  5.v-show    
     区别: v-if控制渲染来进行展示隐藏        耗费性能,若只初始化时隐藏或展示,使用v-if
           v-show通过控制样式来进行展示隐藏  若频繁隐藏或展示则使用v-show
  6.v-for  :key一定要写,提高性能
  7.v-on:事件名="事件"  缩写  @事件名="事件"
  8.v-model  双向绑定-只针对表单组件
  */
  text1: string = "我是普通文本";
  text2: string = "<i>我是html文本</i>";
  attrId: number = 100;
  isRed: boolean = false;
  isBig: boolean = true;
  goodsType: string = "A";
  showPrice: boolean = false;
  showDec: boolean = true;
  needVla1: string = "";
  needVla2: string = "";
  goodsList: IGoods[] = [ //定义对象需要先定义一个接口,再通过接口对对象进行类型限定 (类型限定:声明变量的时候定义其类型)
    {
      goodsName: "商品名1",
      goodsPrice: 100,
      goodsDec: "商品详情1",
    },
    {
      goodsName: "商品名2",
      goodsPrice: 200,
    },
  ];
  handleDanger1(): void {
    alert("这是一个单击警告" + this.needVla1);
  }
  handleDanger2(): void {
    alert("这是一个双击警告");
  }
  handleInput(): void {
    console.log("用户在输入" + this.needVla2);
  }
  handleChange(): void {
    console.log("用户handChange" + this.needVla2);
  }
  handleFocus(): void {
    console.log("用户获取焦点" + this.needVla2);
  }
  handleBlur(): void {
    console.log("用户失去焦点r" + this.needVla2);
  }
}
</script>

路由：因为创建项目时已选择了路由，所有不需要再次安装，直接引入就可以使用了

import { createRouter, createWebHashHistory, createWebHistory, RouteRecordRaw } from "vue-router"
// 引入组件
import HomeView from "../views/HomeView.vue"

// 声明路由
// ts 泛型: 类型不定,可推断
const routes: Array<RouteRecordRaw> = [
  // 路由对象  必须属性: path, name, component   非必须属性: meta()
  {
    path: "/",
    name: "HomeView",
    component: HomeView
  },
  {
    path: "/about",
    name: "AboutView",
    component: ()=>import("../views/AboutView.vue")  //异步引入,优化性能
  }
]
const router = createRouter({
  history:createWebHashHistory(),
  routes:routes
})

export default router