一个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中是一个多功能的工具,既能够让你在模板中获取引用,又能够帮助你创建响应式的数据,使得应用的状态能够更方便地与视图同步。

相关推荐
Yvonne爱编码4 分钟前
后端编程开发路径:从入门到精通的系统性探索
java·前端·后端·python·sql·go
GIS之路1 小时前
GDAL 读取遥感影像数据
前端
wow_DG1 小时前
【Vue2 ✨】Vue2 入门之旅 · 进阶篇(九):Vue2 性能优化
javascript·vue.js·性能优化
一 乐2 小时前
美食分享|基于Springboot和vue的地方美食分享网站系统设计与实现(源码+数据库+文档)
java·vue.js·spring boot·论文·毕设·美食·地方美食分享网站系统
IT_陈寒2 小时前
Spring Boot 3.2 新特性全解析:这5个性能优化点让你的应用提速50%!
前端·人工智能·后端
携欢2 小时前
PortSwigger靶场之Stored DOM XSS通关秘籍
前端·xss
LDM>W<2 小时前
Electron下载失败
前端·javascript·electron
EndingCoder2 小时前
Electron 新特性:2025 版本更新解读
前端·javascript·缓存·electron·前端框架·node.js·桌面端
BillKu3 小时前
Vue3 中使用 DOMPurify 对渲染动态 HTML 进行安全净化处理
前端·安全·html
子兮曰3 小时前
🔥深度解析:Nginx目录浏览美化与功能增强实战指南
前端·javascript·nginx