一个Todolist 表单 带你搞明白ref 响应式数据 和动态绑定数据

一个Todolist 表单 带你弄清楚ref 响应式数据 和动态绑定数据

哈喽哈喽,我是你们的金樽清酒。最近不是放假了嘛,闲来无聊,那肯定是把原先没弄明白的vue的知识点搞清楚啦,然后呀我就想能不能自己敲一个小demo,来弄明白vue中的各种数据的传递。据我所了解,vue中的数据分为三种,props,ref和computed。那我们今天就来学一下ref吧。

ref

在Vue.js中,ref可以用于创建响应式对象。当你使用ref创建一个变量时,它会返回一个包含value属性的对象。这个value属性是一个响应式的、可观察的值。

下面是一个简单的例子:

xml 复制代码
htmlCopy code
<template>
  <div>
    <p>{{ myValue }}</p>
    <button @click="updateValue">Update Value</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 使用 ref 创建响应式变量
    const myValue = ref('Initial Value');

    // 创建的 myValue 是一个包含 value 属性的对象
    // 你可以通过 myValue.value 获取其值

    // 提供数据给模板
    return {
      myValue
    };
  },
  methods: {
    updateValue() {
      // 修改 myValue 的值
      this.myValue.value = 'Updated Value';
    }
  }
};
</script>

在这个例子中,ref函数用于创建一个包含初始值 'Initial Value' 的响应式变量 myValue。然后,通过模板中的插值 {{ myValue }} 将该值渲染到页面上。当点击按钮时,调用 updateValue 方法,修改 myValue.value 的值,这会自动触发页面的重新渲染。

需要注意的是,访问和修改 myValue 的值时,使用 myValue.value。Vue 3 的 ref 是为了更明确地表示变量是响应式的,而不是直接暴露变量的值。

注意!!!!!!! 用ref的时候数据一定要加.value。

小demo

js 复制代码
<template>
  <div>
    <h1>钟氏珠宝店</h1>
    <input v-model="inputValue" />
    <button @click="handleAddItem">添加商品
    </button>
    <button @click="deleteAddItem">删除商品
    </button>
    <div id="app">
      <ul>
        <li v-for="(item, index) in data">{{ [index] }}{{ item }}</li>
      </ul>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'

const inputValue = ref('')
const data = ref([])


const handleAddItem = () => {//往数组里面添加数据
  data.value.push(inputValue.value)
  console.log(data.value)
  inputValue.value = ''
}
const deleteAddItem = () => {//往数组里面删除数据
  data.value = data.value.filter(item => item !== inputValue.value);
  console.log(data.value)
  inputValue.value = ''
}


</script> 

<style lang="less" scoped>
h1 {
  text-align: center;
}
</style>

代码解析:首先在页面上放置了一个list列表,然后创建了一个ref响应式数组data数据源。然后用v-for循环数组里面的数据并渲染在页面上。创建了响应式数组之后当然得需要创建一个input框,再创建一个ref字符串,并动态绑定到input框里面。再创建两个按钮,绑定两个点击事件,一个将数据添加进data数组,一个data数组里面得元素。这样一个小demo就完成了。

demo效果

总结

总的来说,ref 在Vue.js中是一个多功能的工具,既能够让你在模板中获取引用,又能够帮助你创建响应式的数据,使得应用的状态能够更方便地与视图同步。

相关推荐
袁煦丞32 分钟前
数据库设计神器DrawDB:cpolar内网穿透实验室第595个成功挑战
前端·程序员·远程工作
天天扭码40 分钟前
从图片到语音:我是如何用两大模型API打造沉浸式英语学习工具的
前端·人工智能·github
鱼樱前端2 小时前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig3 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少3 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder3 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix3 小时前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句3 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易3 小时前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟3 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试