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

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

清理无用的代码

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

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

<template>
  <img alt="Vue logo" src="./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="./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 中的 datamethods 属性,直接把逻辑卸载 setup 里就可以
  • ref 函数的使用,它是一个神奇的函数,我们这节只是初次相遇,要在template中使用的变量,必须用ref包装一下。
  • return出去的数据和方法,在模板中才可以使用,这样可以精准的控制暴露的变量和方法。

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

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P04. vue的setup()和 ref()函数制作点餐小程序

发表评论

提供最优质的资源集合

立即查看 了解详情