vue3教程

vue3语法js

ts教程（vue3）

配置

脚手架安装

https://blog.csdn.net/m0_53912016/article/details/115792885

初始项目(js)

• 创建项目没有选择ts来安装

使用vue3不用考虑this指向问题了
这里是根据在不使用ts后缀 来在.vue里面写setup
如下图所示:

初始项目(ts)

• 创建项目选择ts来安装
• 使用ts语法开发

使用vue3不用考虑this指向问题了
这里是使用ts后缀 来在.vue里面写setup
如下图所示:

第一个项目页面

<template>
  <div class="home">
    <button @click="btnclick(index)" v-for="(item,index) in list" :key="index">{{item}}</button>
    <br/>
    <div>{{sele}}</div>
  </div>
</template>
<script lang="ts" >
import {defineComponent, ref} from "vue";
export default defineComponent({
  name: 'Home',
  setup(){
   const list=ref(['1111','2222','3333']);
   const sele=ref("");
   const btnclick=(index:string)=>{
   //  入参是对应索引值 不能重复 唯一值变换
    // 使用ref无论取值还是获取都要value一下
    sele.value=index;
   }
   return{
     list,
     sele,
     btnclick
   }
  },
});
</script>
<style lang="sass" scoped>

</style>

setup与ref使用

 1 引入ref 在setup里面写功能
 2 写完后进行return 导出去
 3 如上所示

使用reactive优化上面代码(推荐)

<template>
  <div class="home">
    <button @click="btnclick(index)" v-for="(item, index) in list" :key="index">
      {{ item }}
    </button>
    <br />
    <div>{{ sele}}</div>
  </div>
</template>
<script lang="ts" >
import {reactive,toRefs } from "vue";
interface Dtaprops{
  //使用 interface让数据type定死 然后在data写上
  //如果不想写这个把对于的这个去掉
    list: string[];
    sele: string;
    btnclick: (i: number) => void;
}
export default {
  name: "Home",
  setup() {
    const data:Dtaprops= reactive({
      list: ["1111", "2222", "3333"],
      sele: "",
      btnclick: (i: number) => {
        data.sele = data.list[i];
      },
    });
    const refData=toRefs(data);
    return {
      ...refData,
    };
  },
};
</script>
<style lang="sass" scoped>
</style>