1. 前言
1.vue3現(xiàn)在其實(shí)很多公司已經(jīng)用到了,今天捋一捋
2.默認(rèn)你已經(jīng)了解了TS的基礎(chǔ)語法,不了解的也可以看之前寫的幾篇文章
3.TS語法-03
4.TS語法-04
2. 基本環(huán)境
就是簡單的腳手架配置
vue create 項(xiàng)目名
可以選擇默認(rèn) 這里選擇自定義配置 Manually select feature
tsv3.png
注意
Use class-style component syntax yes 選擇了
yes
3. 使用TS 方式1 ---腳手架默認(rèn)的
類似 Home或者about這樣的寫法
3.1 Home
import { Options, Vue } from 'vue-class-component';
import HelloWorld from '../components/HelloWorld.vue';
@Options({
components: {
HelloWorld
},
})
export default class Home extends Vue {}
</script>
3.2 HelloWorld
@Options({
props: {
msg: String,
},
})
export default class HelloWorld extends Vue {
msg!: string;
}
3.3 簡要分析
- 如你所見 props類似之前的data
2.msg!:string
3.組件里面的 data可以像這樣直接定義,
4.!的意思是賦值斷言
5.去掉報(bào)錯(cuò)
1.png
6.去掉的話會(huì)報(bào)錯(cuò) 沒有進(jìn)行初始化賦值
7.!就是告訴編譯器你不用操心了,將來肯定會(huì)有傳參的
4. 使用TS 方式2----JSX語法
隨意新建個(gè)
tsx文件 例如yzs.tsx
4.1 tsx 文件內(nèi)容
import { Options, Vue } from 'vue-class-component';
@Options({
props: {
msg: String
}
})
export default class World extends Vue {
// ! 賦值斷言
// 去掉的話會(huì)報(bào)錯(cuò) 沒有進(jìn)行初始化賦值 ! 就是告訴編譯器你不用操心了,將來肯定會(huì)有傳參的
msg!: string
render(){
// 提示強(qiáng)悍
return <div>{this.msg}</div>
}
}
4.2 簡要分析
tsx后綴的文件可以使用JSX的寫法- 在
render寫內(nèi)容會(huì)有對應(yīng)的提示,
1.png
2.png
3.在
vue文件中的模板中寫可是沒有對應(yīng)的提示的
4.越來越像react了,學(xué)起來吧
5.使用的時(shí)候也是直接導(dǎo)入/import就行
5. 基本的循環(huán)寫法
組件里面直接寫 參照
msg
5.1 data數(shù)據(jù)
characters:string[] = ["類型注解","編譯性的語言"]
5.2 運(yùn)用
<h1>{{ msg }}</h1>
<hr />
<h1>特性列表</h1>
<ul>
<li
v-for="item in characters"
:key="item"
>
{{ item}}
</li>
</ul>
6. 類型別名
6.1 類型別名定義
type Character = {
id: number;
name: string;
};
6.2 用法
characters:Character[] = [{id:1,name:"類型注解"},{id:2,name:"編譯性的語言"}]
6.3 使用的地方也需要更改
<li
v-for="item in characters"
:key="item.id"
>
{{ item.name }}
</li>
不足之處就是 數(shù)據(jù)類型改了;使用的地方并不會(huì)進(jìn)行報(bào)錯(cuò)
7. 交叉類型
7.1 交叉類型定義
type Character = {
id: number;
name: string;
};
type SelectCharacter = Character & { selected: boolean }
7.2 變量
characters: SelectCharacter[] = [
{ id: 1, name: "類型注解", selected: true },
{ id: 2, name: "編譯性的語言", selected: false },
];
7.3 使用
<li
v-for="item in characters"
:key="item.id"
:class="{ selected: item.selected }"
>
{{ item.name }}
</li>
7.4 樣式
.selected {
background-color: orange;
color: #fff;
}
8. 圖示
1.png
