三、Vue数据绑定及指令

最新推荐文章于 2024-08-22 15:37:44 发布
最新推荐文章于 2024-08-22 15:37:44 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： Vue 前端 文章标签： java vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lvruoyu/article/details/124306805
版权
本文介绍了Vue的双向数据绑定原理，展示了如何通过`v-model`、`v-bind`、`v-text`和`v-html`等指令实现文本、内联样式、样式类绑定，以及`v-for`和事件监听的实战应用，带你步入前端数据驱动的高效开发时代。
摘要由CSDN通过智能技术生成

02. Vue数据绑定

​ Vue 框架很核心的功能就是双向的数据绑定。 双向是指：HTML 标签数据 绑定到 Vue 对象，另外反方向数据也是绑定的。通俗点说就是，Vue 对象的改变会直接影响到 HTML 的标签的变化，而且标签的变化也会反过来影响 Vue 对象的属性的变化。
​ 这样以来，就彻底变革了之前 Dom 的开发方式，之前 Dom 驱动的开发方式尤其是以 jQuery 为主的开发时代，都是 dom 变化后，触发 js 事件，然后在事件中通过 js 代码取得标签的变化，再跟后台进行交互，然后根据后台返回的结果再更新 HTML 标签，异常的繁琐。有了 Vue 这种双向绑定，让开发人员只需要关心 json 数据的变化即可，Vue 自动映射到 HTML 上，而且 HTML 的变化也会映射回 js 对象上，开发方式直接变革成了前端由数据驱动的 开发时代，远远抛弃了 Dom 开发主导的时代了。

Vue绑定文本

​ 数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值，比如模板引擎：handlebars 中就是用的{{}}。创建的 Vue 对象中的 data 属性就是用来绑定数据到 HTML 的。如：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>

    <!-- 创建html的快捷键  html：5 -->
    <!-- 代码快速格式化的快捷键 shift + alt + f -->
    <div id="app">
        <span>Message: {{ msg }}</span>
    </div>
    
    <script>
        var app = new Vue({         // 创建Vue对象。Vue的核心对象。
            el: '#app',               // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
            data: {                   // data: 是Vue对象中绑定的数据
                msg: 'Hello Vue!'   // message 自定义的数据
            }
        });
    </script>
</body>

</html>

在这里插入图片描述

Vue绑定内联样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>

    <!-- 创建html的快捷键  html：5 -->
    <!-- 代码快速格式化的快捷键 shift + alt + f -->
    <!-- <div id="app" style="backgroundColor:pink;width: 200px;height: 200px;"> -->
    <div id="app" v-bind:style="{backgroundColor:pink,width:width,height:height}">
        <div v-bind:style="myDiv">Message: {{ msg }}</div>
    </div>

    <script>
        var app = new Vue({         // 创建Vue对象。Vue的核心对象。
            el: '#app',               // el属性：把当前Vue对象挂载到 div标签上，#app是id选择器
            data: {                   // data: 是Vue对象中绑定的数据
                myDiv: {
                    backgroundColor: 'red',
                    width: '100px',
                    height: '100px'
                },
                pink: 'pink',
                width: '100%',
                height: '200px'
            }
        });
    </script>
</body>

</html>

在这里插入图片描述

Vue绑定样式类


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/vue.js"></script>
    <style>
        .box {
            background-color: pink;
            width: 100%;
            height: 200px;
        }

        .inner {
            background-color: powderblue;
            width: 100px;
            height: 50px;
            border: 1px solid black;
        }

        .inner1 {
            background-color: khaki;
            width: 200px;
            height: 10px;
            border: 5px solid black;
        }
    </style>
</head>

<body>

    <div id="app">
        <div v-bind:class="box">
            我是外层的div
            <div v-bind:class="inner">我是内层的div</div>
        </div>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                box: 'box',
                inner: 'inner'
            }
        })
    </script>

</body>

</html>

在这里插入图片描述

在这里插入图片描述

内置指令

路径说明
v-model双向数据绑定
v-on监听事件
v-bind单向数据绑定
v-text插入文本内容
v-html插入包含HTML的内容

v-model演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    
<div id="app">
    <input type="text" v-model="msg"> {{msg}}
</div>

<script>

    let vm = new Vue({
        el:"#app",
        data: {
            msg: "v-model"
        }
    })

</script>

</body>
</html>

在这里插入图片描述

v-text演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        <p>{{msg}}</p>

        <p v-text="msg"></p>

        <p v-text="msg">123546</p>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data:{
                msg: "一切总会过去，不要担心"
            }
        });
    </script>

</body>
</html>

在这里插入图片描述

v-html演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">

        <p v-html="msg"></p>

        <p v-html="msg"> 123456 </p>
        
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                msg: "<strong>同学们，加油</strong>"
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

v-bind演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">

        <input type="text" v-bind:value="msg" style="width: 80%;"/> 
        <input type="text" :value="msg" style="width: 80%;"/> 
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                msg: "<strong>同学们，加油</strong>"
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

v-on 事件监听指令演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">

        {{msg}}
        <br>
        <button v-on:click="showInfo()">点击执行showInfo()方法</button>
        <br>
        <button @click="showInfo()">点击执行showInfo()方法</button>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                msg: "<strong>同学们，加油</strong>"
            },
            methods:{
                showInfo(){
                    this.msg = "我是v-on指令"
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

路径说明
v-for列表渲染
v-if条件渲染
v-show显示隐藏

v-for演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-for="(item , index) in list">元素的下标——>{{index}} : 元素内容是——>{{item}} </p>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                list: [1,2,3]
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

v-if 和 v-show 演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <script src="./js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p v-if="isShow" style="background-color: lightgreen;"> v-if </p>
        <button @click="isShow = !isShow">点击隐藏或显示v-if</button><br>

        <p v-show="isDisplay" style="background-color: lightgreen;"> v-show </p>
        <button @click="isDisplay = !isDisplay">点击隐藏或显示v-show</button>
    </div>

    <script>
        let vm = new Vue({
            el: "#app",
            data: {
                isShow: true,
                isDisplay: true
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

铲屎官白茶
关注
专栏目录
vue项目中div的动态样式绑定
qq_33235680的博客
01-21 1197
vue项目中div的动态样式绑定
浅析vue数据绑定
11-26
Vue.js的数据绑定主要采用了三种方式，分别是： 1. **脏值检查** - 这种方式在Angular.js中较为常见。通过周期性地检查数据变化，例如监听DOM事件（如ng-click）、HTTP响应、Location变更或定时器事件，然后运行$...
vue学习——数据绑定
petrel_zhu的博客
10-20 443
这一章主要讲解vue里面数据绑定的几种方式。 所谓的数据绑定，就是vue里面当数据发生变化时响应更新HTML。 {{}} ——mustache标签 v-html——更新新元素的innerHTML v-bind 1.{{}} 这种是在刚才是接触vue的时候，最早的数据绑定。主要有以下几种功能 1.1插值 <div>{{text}}</div> 这样就能将da...
vue组件双向绑定
最新发布
youhebuke225的博客
08-22 1406
对于自定义组件，Vue 2.2.0+允许你使用.sync修饰符来实现类似v-model的双向绑定效果，但Vue 3推荐使用自定义v-model的方式。v-model在Vue 3中，.sync修饰符被移除了，推荐使用自定义v-model的方式来实现双向绑定。你可以通过指定modelValue作为prop名，并监听事件来实现。
Vue 的数据绑定
weixin_44141172的博客
11-15 428
03 数据绑定 1.单向的数据绑定 使用v-bind: data中的数据改变了，能够影响容器的值 但是容器中输入框的值并不能反过来去影响data中的数据的值 2. 双向的数据绑定 使用v-model: data中的数据改变了，能够影响容器的值 但是容器中输入框的值也能反过来去影响data中的数据的值 局限：v-model:只能用在表单类元素(输入类元素)中,因为只有能捕获用户输入的元素才能去改变data中的数据值。 简写： 双向数据绑定:<input type="text" v-model:value
Vue 数据绑定
公子小黑的博客
07-04 103
Vue 数据绑定
vue-数据绑定
爪哇人的博客
09-22 6945
1 单向绑定(v-bind)：数据只能从data流向页面。2 双向绑定（v-modle）：数据不仅能从data流向页面，还能从页面流向data1双向绑定一般都应用在表单项元素上（如：input、select）2.v-modle: value可以简写v-modle，因为v-modle默认收集的就是value值。
详解Vue双向数据绑定原理解析
08-29
Vue 双向数据绑定原理解析 Vue 双向数据绑定是 Vue 框架中的一种核心机制，实现数据和视图之间的双向绑定。下面是对 Vue 双向数据绑定原理的详细解析。 基本原理 Vue 采用数据劫持结合发布者-订阅者模式的方式，...
ppt课件-第2章 Vue数据绑定 .zip
03-22
本课件“第2章 Vue数据绑定”将深入讲解Vue的核心特性之一——数据绑定，它是Vue实现声明式编程的关键。 在Vue中，数据绑定允许开发者在视图和模型之间建立直接的关联，确保当模型数据发生变化时，视图会自动更新，...
vue列表数据发生变化指令没有更新问题及解决方法
10-15
在上述案例中，使用`index`作为`key`，当数据筛选后，尽管数据内容变化，但`index`仍保持原样，因此Vue不会重新构建对应的虚拟节点，导致指令更新失效。 **解决办法：** 1. **使用唯一ID作为`:key`：** 一个更...
Vue数据绑定实例写法
12-09
来一发数据绑定吧！ 绑定是什么 在了解绑定是什么之前，先了解一下什么是指令： 在 ” vue” 中，指令是带有 v- 前缀的特殊属性，用来修饰标签的（自定义组件在这里也统一归为标签，因为其使用方式和原生标签一样）...
vue实现给div绑定keyup的enter事件
10-15
主要介绍了vue实现给div绑定keyup的enter事件，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue笔记：数据绑定
JYFZXX的博客
06-19 250
②：v-model:value 可以简写为v-model，因为v-model默认收集的就是value值。2、双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。①：双向绑定一般都应用于表单类元素上（如：input、select等）1、单向绑定(v-bind)：数据只能从data流向页面。
Vue学习笔记-Vue数据绑定
qq_69014008的博客
12-31 148
Vue数据绑定
Vue 数据绑定_基础
weixin_60664694的博客
10-17 372
vue,v-bind,v-model,尚硅谷
vue中的两种数据绑定方式
m0_73894967的博客
05-10 582
可以将data中的数据同步到view中,data中的数据改变,view中的数据也会改变;这个语法糖必须是固定的，也就是说属性必须为value，方法名必须为：input。view和model两者中的任意一方数据发生变化时,另一方都会改变。v-model本质就是value + input方法的语法糖。可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。但是view中的数据改变时,data中的数据不会改变。1.v-bind:单向数据绑定。
【vue】笔记三：Vue基础语法以及数据绑定
weixin_55846296的博客
05-29 2916
在Vue中，如果我们需要将一个变量绑定到视图中，并且在变量发生改变时自动更新视图，我们需要使用Vue提供的响应式数据特性。使用v-model指令实现，当视图中的数据变化时，模型中的数据也随之更新；指令是Vue中用来扩展HTML元素功能的特殊属性，通过指令我们可以动态地操作DOM，绑定事件、控制元素显示/隐藏等。v-model指令：实现表单输入元素的双向绑定，代表模板中表单控件的值与组件实例中的数据之间的关系。可以是一个变量，也可以是一个表达式，都可通过Vue的数据绑定机制进行双向数据绑定。
在Div中绑定数据
weixin_30906425的博客
11-10 1024
//在Div中绑定数据: $(document).ready(function(){ $("#divSs").load("Default.aspx"); }); 转载于:https://www.cnblogs.com/MySpace/archive/2009/11/10/1599809.html
vue中可编辑div实现双向绑定
treasurecp的博客
12-07 807
input="value = $event.target.innerText" 输入时同步参数。contenteditable 设置div可编辑。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

铲屎官白茶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值