【vue3.0】vue的setup()和ref()制作点餐小程序

本文我们通过一个简单的点餐流程，初步了解一下 Vue3 中 Ref 的魅力。这个点餐很简单，所以你学习的时候不要有任何的压力。 如果你真的听起来非常难，请一定在听过之后动手敲一下这段代码，你会有更深的领悟。

清理无用的代码

在用vue-cli生产的 Vue3 项目中，有一些默认的代码，为了方便学习，需要清理掉一些无用的代码。

打开根组件App.vue文件，去掉HelloWorld自定义组件相关代码。

<template>
<img alt="Vue logo" src="https://www.mybj123.com/assets/logo.png" />
</template>
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
name: "App",
components: {},
});
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

这时候再进行浏览就没有其他的元素了，只剩下一个Vue的图标。就可以继续开发啦。这时候你可以在终端中运行yarn serve,在浏览器中预览一下效果。

编写服务程序

在App.vue里添加如下代码，我先修改了template，增加了两行代码和一个按钮。

<template>
<img alt="Vue logo" src="https://www.mybj123.com/assets/logo.png" />
<div>
<h2>欢迎光北海九号主题餐厅</h2>
<div>请选择一位美女为你服务</div>
</div>
<div>
<button> </button>
</div>
</template>

然后我开始改写<script>部分，使用setup()新语法，写了这个就不需要再写data这样的东西了。然后在setup中加入一个girls变量，为了能让模板中进行使用，还需要返回。（有的小伙伴此时可能会感觉有点复杂，没有 Vue2 直接写 data 那么直观，但这正式 Vue3 的先进之处，不用暴漏在界面中的变量就可以不进行返回了。精确控制那些方法和变量被导出和使用）。

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "App",
setup() {
const girls = ref(["小红", "小李", "小张"]);
return {
girls
};
},
});
</script>

写完后可以把这三个美女用按钮的形式展示在页面上,这里使用v-for语法。代码如下：

<button v-for="(item, index) in girls" v-bind:key="index">
{{ index }} : {{ item }}
</button>

现在要实现的就是当我们点击按钮的时候，触发一个方法selectGirlFun，方法绑定一个选定值selectGirl,具体实现代码如下。

<script lang="ts">
import { defineComponent, ref } from "vue";
export default defineComponent({
name: "App",
setup() {
const girls = ref(["小红", "小李", "小张"]);
const selectGirl = ref("");
const selectGirlFun = (index: number) => {
selectGirl.value = girls.value[index];
};
//因为在模板中这些变量和方法都需要调用，所以需要return出去。
return {
girls,
selectGirl,
selectGirlFun,
};
},
});
</script>

修改template代码，为Button绑定selectGirlFun事件，实现联动效果。

<button
v-for="(item,index) in girls"
v-bind:key="index"
@click="selectGirlFun(index)"
>
{{index}}:{{item}}
</button>

这样我们这个最简单的点餐小程序就制作完了。

 

P04. vue的setup()和 ref()函数制作点餐小程序

总结

我们通过一个简单的点餐需求，讲解了一些 Vue3 的新知识点，现在来总结一下：

  • setup 函数的用法，可以代替 Vue2 中的 data 和 methods 属性，直接把逻辑卸载 setup 里就可以

  • ref 函数的使用，它是一个神奇的函数，我们这节只是初次相遇，要在template中使用的变量，必须用ref包装一下。

  • return出去的数据和方法，在模板中才可以使用，这样可以精准的控制暴露的变量和方法。

本文我们就学这么多，需要提醒小伙伴的是一定要跟着码云笔记一起学习，把代码敲出来。只看是学不会的，我在所有的教程中反复强调这个问题，目的只有一个，就是让你能学有所成。

以上是 【vue3.0】vue的setup()和ref()制作点餐小程序 的全部内容， 来源链接： utcz.com/a/125197.html

回到顶部