前言
之前一直在用Vue2做項(xiàng)目具钥，近段時(shí)間看vue3用起來(lái)挺方便豆村，就把之前學(xué)習(xí)Vue2的幾個(gè)小案例用Vue3實(shí)現(xiàn)了一遍，希望能幫到大家更好的學(xué)習(xí)和了解Vue3骂删，如果發(fā)現(xiàn)文章寫(xiě)得不好掌动，或者有什么建議！歡迎大家指點(diǎn)迷津宁玫！
首先要了解Vue2和Vue3的區(qū)別粗恢，比如：
1、3.0去掉了filter, 沒(méi)有有beforeCreate created,用setup取代
2欧瘪、setup里沒(méi)有this
3眷射、響應(yīng)式不區(qū)分?jǐn)?shù)組和對(duì)象
4、新增Composition API佛掖，更好的邏輯復(fù)用和代碼組織
其次要了解Vue3中常用的函數(shù)：
1妖碉、setup 函數(shù)，可以代替Vue2中的data和method屬性,直接把邏輯加在setup中
2芥被、reactive 用于為對(duì)象添加響應(yīng)式狀態(tài)（獲取數(shù)據(jù)值的時(shí)候直接獲取欧宜，不需要加.value，參數(shù)只能傳入對(duì)象類(lèi)型）
3拴魄、ref 用于為數(shù)據(jù)添加響應(yīng)式狀態(tài)（由于reactive只能傳入對(duì)象類(lèi)型的參數(shù)冗茸，而對(duì)于基本數(shù)據(jù)類(lèi)型要添加響應(yīng)式狀態(tài)就只能用ref）
4、toRef 用于為源響應(yīng)式對(duì)象上的屬性新建一個(gè)ref匹中，從而保持對(duì)其源對(duì)象屬性的響應(yīng)式連接夏漱。接收兩個(gè)參數(shù)：源響應(yīng)式對(duì)象和屬性名，返回一個(gè)ref數(shù)據(jù)
4职员、toRefs 用于將響應(yīng)式對(duì)象轉(zhuǎn)換為結(jié)果對(duì)象麻蹋，其中結(jié)果對(duì)象的每個(gè)屬性都是指向原始對(duì)象相應(yīng)屬性的ref
下面就是最簡(jiǎn)單的小案例
1、簡(jiǎn)單計(jì)算器功能
計(jì)算器功能很簡(jiǎn)單的焊切，只需要兩個(gè)輸入框扮授，第一個(gè)輸入框代表輸入的第一個(gè)數(shù)字芳室、第二個(gè)輸入框代表輸入的第二個(gè)數(shù)字，如果你沒(méi)有輸入數(shù)字或者只輸入一個(gè)就直接點(diǎn)擊 加減 這些按鈕就給出提示
代碼如下：
???<head>
??????<title>Vue3 計(jì)算器</title>
???</head>
???<body>
??????<div id = "app" style = "text-align:center;">
??????????<h1>計(jì)算結(jié)果：{{numCount}}</h1>
??????????<div>
???????????? 第一個(gè)數(shù)字：<input type="number" v-model="form.num1"/>
??????????</div>
??????????<div style="margin:10px">
???????????? 第二個(gè)數(shù)字：<input type="number" v-model="form.num2"/>
??????????</div>
??????????<div>
??????????????<button @click="MCK('加')">加</button>
??????????????<button @click="MCK('減')">減</button>
??????????????<button @click="MCK('乘')">乘</button>
??????????????<button @click="MCK('除')">除</button>
??????????????<button @click="MCK('清空')">清空</button>
??????????</div>
??????</div>
??????<script type = "text/javascript">
??????????const { createApp, ref, reactive, watch,toRefs } = Vue
??????????const state = reactive({
????????????numCount:0,
??????????????form:{
????????????????num1:'',
????????????????num2:'',
????????????}
??????????})
??????????const MCK = (val) => {
??????????????if(state.form.num1 && state.form.num2){
??????????????????switch(val){
??????????????????????case '加':
??????????????????????????state.numCount = parseInt(state.form.num1) + parseInt(state.form.num2)
??????????????????????????break;
??????????????????????case '減':
??????????????????????????state.numCount = parseInt(state.form.num1) - parseInt(state.form.num2)
??????????????????????????break;
??????????????????????case '乘':
??????????????????????????state.numCount = parseInt(state.form.num1) * parseInt(state.form.num2)
??????????????????????????break;
??????????????????????case '除':
??????????????????????????state.numCount = parseInt(state.form.num1)/ parseInt(state.form.num2)
??????????????????????????break;
??????????????????????case '清空':
??????????????????????????state.numCount = 0
??????????????????????????state.form.num1 = ''
??????????????????????????state.form.num2 = ''
??????????????????????????break;
??????????????????}
??????????????}else{
????????????????alert('請(qǐng)輸入數(shù)字')??
??????????????}
??????????}
??????????const app = {
????????????setup() {
????????????????return {
????????????????????...toRefs(state),
????????????????????MCK
????????????????}
????????????}
????????}???
????????createApp(app).mount('#app')
??????</script>
???</body>
</html>
2刹勃、日記本功能
日記本功能也很簡(jiǎn)單堪侯，首先你要在輸入框v-model綁定一個(gè)字符串、然后每次輸入后點(diǎn)擊回車(chē)按鈕做一些判斷荔仁，判斷改輸入框綁定字符串是否為空伍宦，如果為空就提示輸入、反之把該字符串push到數(shù)組中乏梁，如果你想刪除其中某一項(xiàng)次洼，在點(diǎn)擊刪除按鈕時(shí)傳入該項(xiàng)的索引然后在數(shù)組中刪除指定位置元素
<html>
???<head>
??????<title>Vue3 小目標(biāo)日記本</title>
https://unpkg.com/vue@next">
???</head>
???<body>
??????<div id = "app" style = "text-align:center;">
??????????<h1>小目標(biāo)列表</h1>
??????????<ul v-for="(item,index) in addList" :key="index">
??????????????<ol>
??????????????????{{item}}
??????????????????<a style="color:red;margin:15px;cursor:pointer" @click="delBtn(index)">刪除</a>
??????????????</ol>
??????????</ul>
??????????<input type="text" v-model="message" @keyup.enter="add" placeholder="輸入小目標(biāo)后，按回車(chē)確認(rèn)"/>
??????????<h2>共有{{addList.length}}個(gè)小目標(biāo)</h2>
??????</div>
??????<script type = "text/javascript">
??????????const { createApp, ref, reactive, watch,toRefs } = Vue
??????????const message = ref('')
??????????const state = reactive({
??????????????addList:[]
??????????})
??????????const add = () => {
??????????????if(message.value){
??????????????????state.addList.push(message.value)
??????????????????message.value = ''
??????????????}else{
??????????????????alert('沒(méi)有輸入小目標(biāo)')
??????????????}
??????????}
??????????const delBtn = (index) => {
????????????state.addList.splice(index,1)??
??????????}
??????????const app = {
????????????setup() {
????????????????return {
????????????????????message,
????????????????????...toRefs(state),
????????????????????add,
????????????????????delBtn
????????????????}
????????????}
????????}???
????????createApp(app).mount('#app')
??????</script>
???</body>
</html>
3遇骑、增刪查改
增刪查改功能就不用說(shuō)了卖毁，看一下就行，數(shù)據(jù)都是寫(xiě)死的
<html>
???<head>
??????<title>學(xué)生增刪查改</title>
https://unpkg.com/vue@next">
???</head>
???<body>
??????<div id = "app" style = "text-align:center;">
??????????<button @click="detailBtn('add')" v-if="hidden">添加</button>
??????????<table align="center" border cellpadding="10" cellspacing="0" v-if="hidden">
??????????????<tr>
??????????????????<th>ID</th>
??????????????????<th>姓名</th>
??????????????????<th>年齡</th>
??????????????????<th>性別</th>
??????????????????<th>操作</th>
??????????????</tr>
??????????????<tr v-for="(item,index) in list" :key="index">
??????????????????<td>{{item.id}}</td>
??????????????????<td>{{item.name}}</td>
??????????????????<td>{{item.age}}</td>
??????????????????<td>{{item.sex == 0 ? '男' : '女'}}</td>
??????????????????<td>
????????????????????<button @click="detailBtn(item)">修改</button> 
????????????????????<button @click="delBtn(index)">刪除</button>
????????????????</td>
??????????????</tr>
??????????</table>
??????????<div style="border:1px solid #CCC;margin:70px" v-if="!hidden">
??????????????<div>
??????????????????姓名：<input type="text" v-model="form.name"/>
??????????????</div>
??????????????<div>
????????????????????年齡：<input type="number" v-model="form.age"/>
??????????????</div>
??????????????<div>
??????????????????性別：<select v-model="form.sex">
??????????????????????????<option value = "0">男</option>
??????????????????????????<option value = "1">女</option>
?????????????????????????</select>
??????????????</div>
??????????????<div>
??????????????????<button @click="updateBtn">確定</button> 
??????????????????<button @click="hidden = true">取消</button>
??????????????</div>
??????????</div>
??????</div>
??????<script type = "text/javascript">
??????????const { createApp, ref, reactive, watch,toRefs } = Vue
??????????const state = reactive({
????????????hidden:true,
??????????????list:[
????????????????{id:1,name:'張三',age:18,sex:0},
????????????????{id:2,name:'李四',age:23,sex:0},
????????????????{id:3,name:'王五',age:25,sex:1},
????????????],
????????????form:{},
????????????id:3
??????????})
??????????const delBtn = (index) => {
????????????state.list.splice(index,1)
??????????}
??????????const detailBtn = (item) => {
????????????state.hidden = false
????????????if(item != 'add'){
????????????????state.form.name??= item.name
????????????????state.form.age??= item.age
????????????????state.form.sex??= item.sex
????????????????state.form.id??= item.id
????????????????state.form.addIsUpdate = 'update'
????????????}else{
????????????????state.form = {}
????????????}
??????????}
??????????const updateBtn = () => {
??????????????if(state.form.name != '' && state.form.age > 0 && state.form.sex != 2){
??????????????????if(state.form.addIsUpdate == 'update'){
??????????????????????state.list.forEach((item,index) => {
????????????????????????if(state.form.id == item.id){
????????????????????????????item.name = state.form.name
????????????????????????????item.age = state.form.age
????????????????????????????item.sex = state.form.sex
????????????????????????????state.hidden = true
????????????????????????}
??????????????????????})
??????????????????}else{
??????????????????????state.form.id =??++state.id
??????????????????????state.list.push(state.form)
??????????????????????state.hidden = true
??????????????????}
??????????????????state.form = {}
??????????????}else{
??????????????????alert('請(qǐng)正確輸入落萎！')??
??????????????}
??????????}
??????????const app = {
????????????setup() {
????????????????return {
???????????????????...toRefs(state),
????????????????????delBtn,
????????????????????detailBtn,
????????????????????updateBtn
????????????????}
????????????}
????????}???
????????createApp(app).mount('#app')
??????</script>
???</body>
</html>
好了亥啦，三個(gè)小實(shí)例在這里就說(shuō)完了！內(nèi)容稍微有點(diǎn)多练链，但是都是一些基礎(chǔ)翔脱，只要知道函數(shù)怎么用，多加練習(xí)一下就沒(méi)多大問(wèn)題媒鼓，基礎(chǔ)語(yǔ)法都在這里届吁，只是沒(méi)有做樣式看起來(lái)比較丑，給大家推薦一個(gè)在線(xiàn)運(yùn)行工具隶糕，大家可以把代碼直接復(fù)制過(guò)去運(yùn)行在線(xiàn)運(yùn)行工具瓷产。最后還有一句話(huà)站玄，如果覺(jué)得我哪里寫(xiě)錯(cuò)了枚驻，寫(xiě)得不好，歡迎指點(diǎn)株旷！
