vue3.0快速⼊门的三个⼩实例
前⾔
之前⼀直在⽤Vue2做项⽬，近段时间看vue3⽤起来挺⽅便，就把之前学习Vue2的⼏个⼩案例⽤Vue3实现了⼀遍，希望能帮到⼤家更好的学习和了解Vue3，如果发现⽂章写得不好，或者有什么建议！欢迎⼤家指点迷津！
⾸先要了解Vue2和Vue3的区别，⽐如：
1、3.0去掉了filter, 没有有beforeCreate created,⽤setup取代
2、setup⾥没有this
3、响应式不区分数组和对象
4、新增Composition API，更好的逻辑复⽤和代码组织
其次要了解Vue3中常⽤的函数：
1、setup 函数，可以代替Vue2中的data和method属性，直接把逻辑加在setup中
2、reactive ⽤于为对象添加响应式状态（获取数据值的时候直接获取，不需要加.value，参数只能传⼊对象类型）
3、ref ⽤于为数据添加响应式状态（由于reactive只能传⼊对象类型的参数，⽽对于基本数据类型要添加响应式状态就只能⽤ref）
4、toRef ⽤于为源响应式对象上的属性新建⼀个ref，从⽽保持对其源对象属性的响应式连接。接收两个参数：源响应式对象和属性
名，返回⼀个ref数据
4、toRefs ⽤于将响应式对象转换为结果对象，其中结果对象的每个属性都是指向原始对象相应属性的ref
下⾯就是最简单的⼩案例
1、简单计算器功能
计算器功能很简单的，只需要两个输⼊框，第⼀个输⼊框代表输⼊的第⼀个数字、第⼆个输⼊框代表输⼊的第⼆个数字，如果你没有输⼊数字或者只输⼊⼀个就直接点击 加减 这些按钮就给出提⽰
代码如下：
<html>
<head>
<title>Vue3 计算器</title>
<script src="unpkg/vue@next"></script>
</head>
<body>
<div id = "app" style = "text-align:center;">
<h1>计算结果：{{numCount}}</h1>
<div>
第⼀个数字：<input type="number"v-model="form.num1"/>
</div>
<div >
第⼆个数字：<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, reactive, 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('请输⼊数字')
}
}
const app ={
setup(){
return{
...toRefs(state),
MCK
}
}
}
createApp(app).mount('#app')
</script>
</body>
</html>
2、⽇记本功能
⽇记本功能也很简单，⾸先你要在输⼊框v-model绑定⼀个字符串、然后每次输⼊后点击回车按钮做⼀些判断，判断改输⼊框绑定字符串是否为空，如果为空就提⽰输⼊、反之把该字符串push到数组中，如果你想删除其中某⼀项，在点击删除按钮时传⼊该项的索引然后在数组中删除指定位置元素
<html>
<head>
<title>Vue3 ⼩⽬标⽇记本</title>
<script src="unpkg/vue@next"></script>
</head>
<body>
<div id = "app" style = "text-align:center;">
<h1>⼩⽬标列表</h1>
<ul v-for="(item,index) in addList":key="index">
<ol>
{{item}}
<a @click="delBtn(index)">删除</a>
</ol>
</ul>
<input type="text"v-model="message"@="add"placeholder="输⼊⼩⽬标后，按回车确认"/>
<h2>共有{{addList.length}}个⼩⽬标</h2>
</div>
<script type = "text/javascript">
const{ createApp, ref, reactive,toRefs }= Vue
const message =ref('')
const state =reactive({
addList:[]
})
const add=()=>{
if(message.value){
state.addList.push(message.value)
message.value =''
}else{
alert('没有输⼊⼩⽬标')
}
}
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、增删查改
增删查改功能就不⽤说了，看⼀下就⾏，数据都是写死的
<html>
<head>
<title>学⽣增删查改</title>
<script src="unpkg/vue@next"></script>
</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 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">
<script type = "text/javascript">
const{ createApp, reactive, 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('请正确输⼊！')
}
}
const app ={
setup(){
return{
...toRefs(state),
安卓开发实例入门delBtn,
detailBtn,
updateBtn
}
}
}
createApp(app).mount('#app')
</script>
</body>
</html>
好了，三个⼩实例在这⾥就说完了！内容稍微有点多，但是都是⼀些基础，只要知道函数怎么⽤，多加练习⼀下就没多⼤问题，基础语法都在这⾥，只是没有做样式看起来⽐较丑，给⼤家推荐⼀个在线运⾏⼯具，⼤家可以把代码直接复制过去运⾏。最后还有⼀句话，如果觉得我哪⾥写错了，写得不好，
欢迎指点！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论