Vue-(03双向绑定、组件)

最新推荐文章于 2024-02-29 15:25:12 发布
最新推荐文章于 2024-02-29 15:25:12 发布
阅读量136 收藏
点赞数
分类专栏： 前端部分 文章标签： vue checkbox
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45503643/article/details/110239641
版权

双向数据绑定

Vue.js 是一个 MVVM 框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是 Vue.js 的精髓之处了。

值得注意的是，我们所说的数据双向绑定，一定是对于 UI 控件来说的，非 UI 控件不会涉及到数据双向绑定。对于我们处理表单，Vue.js 的双向数据绑定用起来就特别舒服了。

你可以用 v-model 指令在表单 < input>、< textarea> 及 < select> 元元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

测试代码：< input>标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
</head>
<body>

<!--view层 模板-->
<div id="vue">
    输入的文本: <input type="text" v-model="message" /> {{message}}
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script>

<script>
    var vm = new Vue({
        el: "#vue",
        data: {
            message: "v-model测试"
        }
    });
</script>
</body>
</html>

浏览器效果图：
在这里插入图片描述
可以在控制台中直接修改message
vm.message = ‘hello’
在这里插入图片描述
也可以在文本框中输入任意内容，文本框之后的内容会随之改变：

在这里插入图片描述
这就是双向绑定！

文本框 < textarea>

测试代码：< textarea>文本框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
</head>
<body>

<!--view层 模板-->
<div id="vue">
    <textarea name="" id="" cols="30" rows="10" v-model="message"></textarea> {{message}}
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script>

<script>
    var vm = new Vue({
        el: "#vue",
        data: {
            message: "v-model测试"
        }
    });
</script>
</body>
</html>

浏览器效果图：
在这里插入图片描述
同样可以在控制台中修改文本框的值：
vm.message = ‘hello’
在这里插入图片描述
也可以在文本框中输入任意内容，文本框之后的内容会随之改变：
在这里插入图片描述

单选按钮 < radio>

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
</head>
<body>

<!--view层 模板-->
<div id="vue">
    性别：
    <input type="radio" name="sex" value="男" v-model="select">男
    <input type="radio" name="sex" value="女" v-model="select">女
    <p>
        选中了谁：{{select}}
    </p>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script>

<script>
    var vm = new Vue({
        el: "#vue",
        data: {
            select: ''
        }
    });
</script>
</body>
</html>

效果如图：鼠标点击选择男或女，选中了谁会自动修改
在这里插入图片描述

单复选框 < checkbox>

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
</head>
<body>

<!--view层 模板-->
<div id="vue">
    单复选框：
    <input type="checkbox" id="checkbox" v-model="checked">&nbsp;
    <lable for="checkbox">{{checked}}</lable>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script>

<script>
    var vm = new Vue({
        el: "#vue",
        data: {
            checked: false
        }
    });
</script>
</body>
</html>

浏览器效果图：

在这里插入图片描述
在这里插入图片描述

多复选框 < checkbox>

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
</head>
<body>

<!--view层 模板-->
<div id="vue">
    多复选框：
    <p>
        <input type="checkbox" id="java" value="java" v-model="checkedNames">&nbsp;
        <lable for="java">java</lable>
    </p>
    <p>
        <input type="checkbox" id="C++" value="C++" v-model="checkedNames">&nbsp;
        <lable for="java">C++</lable>
    </p>
    <p>
        <input type="checkbox" id="PHP" value="PHP" v-model="checkedNames">&nbsp;
        <lable for="java">PHP</lable>
    </p>
    <span>选中的值：{{checkedNames}}</span>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script>

<script>
    var vm = new Vue({
        el: "#vue",
        data: {
            checkedNames: []
        }
    });
</script>
</body>
</html>

浏览器效果图：

在这里插入图片描述

下拉框 < select>

测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
</head>
<body>

<!--view层 模板-->
<div id="vue">
    下拉框：
    <select v-model="selected">
        <option disabled value="">请选择</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>
    <span>选中的值：{{selected}}</span>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script>

<script>
    var vm = new Vue({
        el: "#vue",
        data: {
            selected: ''
        }
    });
</script>
</body>
</html>

浏览器效果图：

在这里插入图片描述

注意：如果 v-model 表达式的初始值未能匹配任何选项，< select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

什么是组件？

组件是可复用的 Vue 实例，说白了就是一组可以重复使用的模板，跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment 等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织：

在这里插入图片描述
例如，页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。

使用 Vue.component() 方法注册组件：

使用 props 属性传递参数

默认规则下 props 属性里的值不能为大写

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--view层 模板-->
<div id="vue">
    <!--组件：传递给组件中的值 ：props-->
    <my-component-li v-for="item in items" v-bind:item="item"></my-component-li>
</div>

<!--1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> </script>

<script>
    //注册组件
    Vue.component('my-component-li',{
        props: ['item'],
        template: '<li>{{item}}</li>'
    });
    //实例化vue
    var vm = new Vue({
        el: "#vue",
        data: {
            items: ["Java","PHP","C"]
        }
    });
</script>
</body>
</html>
  • Vue.component()：注册组件
  • my-component-li：自定义组件的名字
  • template：组件的模板

说明：

  • v-for=“item in items” ：遍历 Vue 实例中定义的名为 items 的数组，并创建同等数
    量的组件；
  • v-bind:item=“item” ：将遍历的 item 项绑定到组件中 props 定义的名为 item 属
    性上；
  • = 号左边的 item 为 props 定义的属性名，右边的为 item in items 中遍历的 item 项的值；

在这里插入图片描述

爱喝椰汁的木木
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cron_vue-cron_vuecrond组件_vuecron_
10-04
以上代码展示了如何在Vue组件中引入Vue-Cron，通过`v-model`双向绑定Cron表达式，并监听`@change`事件来响应定时任务设置的变化。 总的来说，Vue-Cron是Vue.js开发中的一个实用工具，它简化了Cron表达式的使用，...
vue3组件之间双向绑定
徐三岁的博客
02-10 6189
Vue3中组件的双向绑定统一使用 v-model 进行处理，并且可以和多个数据进行绑定，例如 v-model:foo、v-model:bar。v-model:foo 等价于。v-model 等价于。父子组件之间双向绑定。
【Vue3 第十五章】组件中的双向绑定
前端知识分享喵
01-30 4934
组件中的双向绑定、参数、修饰符
【vue3】关于vue3中的数据双向绑定
zhangawei123的博客
05-29 4330
，`doubleCount`的值将根据`count`的变化而动态更新。你可以使用`ref`和`reactive`来创建响应式数据，使用`computed`来创建计算属性，使用`watch`来监听数据的变化，以及使用`toRefs`来在模板中解构响应式对象的属性。`，现在可以通过`userRefs.name`和`userRefs.age`访问属性。2. ref：`ref`函数用于创建一个简单的响应式数据。1. 响应式数据：在 Vue 3 中，使用`ref`和`reactive`来创建响应式数据。
[ Vue3 ] 三种方式实现组件数据双向绑定
记录开发日常
11-28 8401
在 Vue 中，组件数据双向绑定是一项非常重要的特性，它使得我们能够轻松地在组件中处理数据的变化并将其同步到视图 比如我们想要在父组件中修改数据能够同步给子组件，并且子组件修改数据也能同步给父组件，使他们数据一方发生变化，则双方都发生改变
Vue3 数据双向绑定 / 原理
记录开发日常
06-26 1118
这样一来不论是父组件还是子组件修改了数据，数据都会同步发生变化。来实现组件之间的数据双向绑定，下面是一个简单的示列。如果需要实现多个数据双向绑定，可以这么写。方法来修改数据 实现双向绑定。在子组件中调用父组件的。
Vue表单demo v-model双向绑定问题
08-27
在Vue.js中，`v-model`是一个非常关键的指令，用于实现数据的双向绑定，它使得视图（View）和模型（Model）之间的数据能够实时同步。在本篇示例中，我们通过一个简单的Vue表单组件来深入理解`v-model`的工作原理以及...
VUE-Table上绑定Input通过render实现双向绑定数据的示例
10-18
当用户修改`Input`的值时，`on-change`事件被触发，事件处理器会更新`params.row.numLots`，并将整个行对象赋值回`vm.data`数组的对应索引，从而实现了双向绑定。 这种实现方式的关键在于监听`Input`的`on-change`...
Vue自定义组件双向绑定实现原理及方法详解
10-14
Vue自定义组件双向绑定是Vue框架中一个强大的特性，它使得父子组件间的通信更为便捷，提高了代码的可维护性和复用性。本文将深入探讨Vue自定义组件双向绑定的实现原理与方法，以及如何改进组件设计，使其更易于使用...
vue-tags-input组件使用指南(推荐)
10-15
在这个例子中，`v-model`用于双向绑定当前输入的标签，`:tags`用于显示已有的标签，`@tags-changed`监听标签的变化，将新的标签数组更新到`tags`中。 验证规则： Vue Tags Input允许你设置自定义的验证规则，以确保...
Vue 3.0双向绑定原理的实现方法
12-13
proxy方法 vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过new Proxy()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 Vue 3.0与Vue 2.0的区别仅是数据劫持的方式由Object.defineProperty更改为Proxy代理，其他代码不变。可查看Vue 2.0双向绑定原理的实现 具体实现过程的代码如下： 1、定义构造函数 function Vue(option){ this.$el = document.querySelector(option.el); //获取挂载节点 this.$data =
systemverilog中的bind
最新发布
hh199203的博客
02-29 1257
通常我们需要将设计的代码和验证的代码进行分离，systemverilog中提供bind的方式，能够在不改变设计代码的前提下，在设计的代码的module或者instance下边，例化一些用于存放断言等辅助代码的module/interface/program/checker。本文主要总结和记录一下bind的用法。
Vue3父子组件数据双向绑定
weixin_45750721的博客
05-10 424
Vue3父子组件数据双向绑定
CALL和APPlY以及BIND语法（含BIND的核心原理）
qq_35895679的博客
05-20 146
CALL和APPlY以及BIND语法（含BIND的核心原理） 每个函数都是Function的一个实例，Function原型（Function.prototype）上有3个方法call、apply、bind,所有的函数都可以通过原型链__proto__找到Function原型（Function.prototype）上的这三个方法 Function.prototype：call、apply、bind,这三个方法都是用来改变函数中的THIS的 call：[function].call([context],p
vue3 组件双向绑定的方案
weixin_51897979的博客
12-22 4504
目前在用vue3写项目的时候，当对一个组件进行双向绑定的时候，在子组件中数据发生改变通常要使父组件里面的相应的数据进行同步修改. 1，话不多说针对上述需求，目前主流的方案是 在父组件中用v-model （实则v-model只是一种语法糖写法）绑定相应的值，在子组件中 中利用props中modelValue来接收值，然后我们就可以直接修改modelValue来修改父组件中相应的值, 但是这种做法虽然普遍，但是vue3 props标准是要保持单向数据传递的原则，但是我们能违背这个原则直接改变...
Vue之组件间的双向绑定
知识应该共享，创造才应收费
03-09 1641
组件间的双向绑定就是对于父组件的变更，子组件可以感知到，同样对于子组件的变更，父组件也可以感知到。这个过程是自动的。Vue中的双向绑定用`v-model`来实现
boost::bind 介绍
weixin_34112181的博客
12-14 191
这篇文章介绍boost::bind()的用法， 文章的主要内容是参考boost的文档。 1. 目的 boost::bind 是std::bindlist 和 std::bind2nd的结合体。它提供一个任意的函数对象(仿函数)、函数、函数指针、成员函数指针。 它可以绑定任意的参数。bind 没有对函数对象有任何的要求。 2. 把bind()用在函数和函数指针上 有如下...
vue3不使用v-model双向绑定组件
05-16
在Vue 3中，可以使用`v-model`指令来实现双向绑定，但是对于一些自定义组件，可能需要自己实现双向绑定。 下面是一个示例，演示如何在Vue 3中自定义组件并实现双向绑定： ```html ($event.target.value)"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值