【千字长文，熬夜更新，原创不易，多多支持，感谢大家】
前言
小伙伴们大家好。在前面一篇文章中我们学习了vue3.0中组合式API的使用，组合式API能够给我们带来的好处以及组合式API中一些常用的方法等。但是整篇文章下来感觉知识点有点散，对于没有vue基础的小伙伴来说可能只知道有这么个知识点，但是具体怎么使用还是不太理解。接下来我们就从零开始实现一个超级简单的投票功能，目的是学以致用，把零散的知识点串联起来形成一个整体，从而更方便我们理解和使用。
创建vue3.0项目
首先我们用vue脚手架来创建一个vue3.0项目：vue3vote。
- 运行命令：vue create vue3vote
- 在弹出框中选择 “Default <Vue 3>” 或者“Manually select features”
- 上一步中如果选择了Default则默认创建即可
- 如果选择的是Manually，那么在下一步操作中一定要将“Choose Vue version”选上
- 继续向下选择“3.x”
- 接下来就按照操作提示一步步创建即可
需要注意的是要创建Vue3.0的项目，vue的脚手架（vue-cli）必须要选择4.5版本以上的才可以，否则默认只能创建2.0版本的项目
搭建投票功能模块
- vote.vue
打开上面创建好的项目vue3vote，然后
- 将默认的components/Helloworld.vue"，‘views/Home.vue’和‘views/About.vue’全部删除
- 在views目录下新建一个vote.vue组件
- 在vote.vue组件中一个标题标签h1用于显示投票标签，3个div标签用于显示支持人数，反对人数和支持率
- 最后再添加2个按钮用于投支持和反对
模板设置好以后，我们再来看下JavaScript代码
- 首先从vue中导入ref和computed两个方法，分别用于定义响应式变量和计算属性（用于计算支持率）
- 定义一个props，名称为title，类型为string，必填，用于调用组件时可以动态的传入标题
- 在setup函数中，通过ref函数定义两个响应式变量：supCount和OppCount默认值均为0
- 定义两个方法support和oppose分别用于按钮调用，点击支持按钮调用support方法，点击反对调用oppose方法
- 定义一个计算属性supRate用于计算支持率，该属性结果由computed方法执行返回
- 最后将上面的所有变量和方法通过return暴露出去以便模板使用
<!--vote.vue-->
<template>
<div class="vote">
<h1>{
{title}}</h1>
<div>支持人数：{
{supCount}}</div>
<div>反对人数：{
{oppCount}}</div>
<div>支持率：{
{supRate}}%</div>
<button @click="support">支持</button>
<button @click="oppose">反对</button>
</div>
</template>
import {
ref, computed } from 'vue';
export default{
props:{
title:{
type:String,
required:true
}
},
setup(props,context){
let supCount = ref(0);
let oppCount = ref(0);
// 支持方法
const support = () => {
supCount.value++; //用ref声明的响应式变量操作时应该用点value的形式
}
//反对方法
const oppose = () => {
oppCount.value++ //用ref声明的响应式变量操作时应该用点value的形式
}
// 计算属性，计算支持率
const supRate = computed(()=>{
let totalCount = supCount.value + oppCount.value;
return totalCount === 0 ? 0 : (supCount.value/totalCount*100).toFixed(2); // 保留2位小数
});
//将所有成员暴露出去供模板使用
return {
supCount,
oppCount,
supRate,
support,
oppose
}
}
}
- App.vue
App.vue中将原有代码删掉， 然后将上面创建的vote组件引入并传入必填属性title标题
<template>
<div class="main">
<vote title="你认为Vue3.0好学吗？"></vote>
</div>
</template>
import vote from './views/vote.vue'
export default{
components:{
vote},
setup(){
}
}
- main.js
main.js中代码不用做任何改动，使用默认生成的即可
import {
createApp } from 'vue'
import App from './App.vue'
createApp(App).mount("#app");
总结
本文我们创建了一个很简单的投票功能，目的是让大家再巩固一下上一篇文章中学习的关于vue3.0的一些相关知识，其中就用到了vue中setup函数，ref函数，computed计算属性函数。
本次分享就到这里了，喜欢的小伙伴欢迎点赞评论加关注哦！谢谢大家。