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

相关推荐
Sun_light9 分钟前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子11 分钟前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空000011 分钟前
Vue组件通信方式详解
前端·面试
呆呆的心12 分钟前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再12 分钟前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了15 分钟前
Vue 3 中的组件通信与组件思想详解
vue.js
susnm16 分钟前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v20 分钟前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
小皮侠22 分钟前
nginx的使用
java·运维·服务器·前端·git·nginx·github
WildBlue24 分钟前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html