配置
脚手架安装
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>