三、Vue数据绑定及指令

最新推荐文章于 2023-08-15 15:45:43 发布
最新推荐文章于 2023-08-15 15:45:43 发布
阅读量1.2k 收藏 2
点赞数
分类专栏： Vue 前端 文章标签： java vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lvruoyu/article/details/124306805
版权

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>

在这里插入图片描述

铲屎官白茶
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue表单控件数据绑定方法详解
01-19
基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。v-model本质上不过是语法糖，它负责监听用户的输入事件以更新数据 [注意]v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它会选择Vue实例数据来作为具体的值。应该通过JS组件的data选项中声明初始值 type:text <div id=example> <input v-model=message placeholder=edit me> <p>Message is: {{ message }}</p>
在Div中绑定数据
weixin_30906425的博客
11-10 1002
//在Div中绑定数据: $(document).ready(function(){ $("#divSs").load("Default.aspx"); }); 转载于:https://www.cnblogs.com/MySpace/archive/2009/11/10/1599809.html
vue列表数据发生变化指令没有更新问题及解决方法
10-15
主要介绍了vue中使用指令，列表数据发生变化指令没有更新问题，本文给出了解决办法,需要的朋友可以参考下
Vue数据绑定实例写法
12-09
为什么绑定 简单的数据渲染，包括表达式、函数在内。其实都只是在标签中渲染，如果遇到以下情况怎么办呢： 需要在标签内部进行某种 “骚操作” 。 需要控制流来控制不同数据下的不同渲染效果。 需要渲染一个数组。 这时候简单渲染就不能很好的解决问题了，怎么办 ？ 来一发数据绑定吧！ 绑定是什么 在了解绑定是什么之前，先了解一下什么是指令： 在 ” vue” 中，指令是带有 v- 前缀的特殊属性，用来修饰标签的（自定义组件在这里也统一归为标签，因为其使用方式和原生标签一样），其值的约束和模板语法一样，支持表达式、变量。 指令会监测其值的变化，并将其的变化反应给所处的DOM 我们来看一下上一章最后的例子：
Vue 数据绑定_基础
weixin_60664694的博客
10-17 340
vue,v-bind,v-model,尚硅谷
Vue.js框架学习，数据绑定
数据发现者
09-29 523
Vue.js框架学习，数据绑定
【vue】笔记三：Vue基础语法以及数据绑定
weixin_55846296的博客
05-29 2177
在Vue中，如果我们需要将一个变量绑定到视图中，并且在变量发生改变时自动更新视图，我们需要使用Vue提供的响应式数据特性。使用v-model指令实现，当视图中的数据变化时，模型中的数据也随之更新；指令是Vue中用来扩展HTML元素功能的特殊属性，通过指令我们可以动态地操作DOM，绑定事件、控制元素显示/隐藏等。v-model指令：实现表单输入元素的双向绑定，代表模板中表单控件的值与组件实例中的数据之间的关系。可以是一个变量，也可以是一个表达式，都可通过Vue的数据绑定机制进行双向数据绑定。
vue中的两种数据绑定方式
m0_73894967的博客
05-10 496
可以将data中的数据同步到view中,data中的数据改变,view中的数据也会改变;这个语法糖必须是固定的，也就是说属性必须为value，方法名必须为：input。view和model两者中的任意一方数据发生变化时,另一方都会改变。v-model本质就是value + input方法的语法糖。可以通过model属性的prop和event属性来进行自定义。原生的v-model，会根据标签的不同生成不同的事件和属性。但是view中的数据改变时,data中的数据不会改变。1.v-bind:单向数据绑定。
vue学习——数据绑定
petrel_zhu的博客
10-20 377
这一章主要讲解vue里面数据绑定的几种方式。 所谓的数据绑定，就是vue里面当数据发生变化时响应更新HTML。 {{}} ——mustache标签 v-html——更新新元素的innerHTML v-bind 1.{{}} 这种是在刚才是接触vue的时候，最早的数据绑定。主要有以下几种功能 1.1插值 <div>{{text}}</div> 这样就能将da...
15、简单了解Vue
clear-ninghongkang的博客
12-02 1662
适合后端开发人员快速了解vue
详解Vue双向数据绑定原理解析
12-07
2.实现一个解析器Compile，对每个子元素节点的指令进行扫描和解析，根据模板指令替换数据，初始化视图以及绑定相应的回调函数； 3.实现一个Watcher，作为Observer和Compile的桥梁，能够订阅属性变动的通知，执行指令...
双向数据绑定
weixin_52629158的博客
05-20 451
所谓双向数据绑定也就是:当数据发生变化的时候，视图也就发生变化当视图发生变化的时候，数据也会跟着同步变化最能体现双向数据绑定的指令就是v-model是一个指令，限制在中使用,通过绑定后，视图输入内容的变化会改变指令绑定的数据，数据发生变化也会直接作用到视图上，所以这个指令在提交表单数据时应用最多，无需在进行DOM查询获取表单的数据。
Vue学习第三章-动态绑定属性
codekiang的博客
02-22 403
动态绑定属性 很多时候，数据是会改变的，而我们也经常需要根据数据的改变来改变，这时候就可以通过动态绑定标签的属性，来动态决定标签的在页面中呈现出来的样子。 动态绑定的语法：v-bind: 语法糖：: tips:语法糖即语法的缩写，后期基本都使用语法糖 v-bind动态绑定class <!DOCTYPE html> <html lang="en"> <head>...
vue中有contenteditable属性的div如何数据双向绑定
蘑菇炸了
04-01 4675
昨天的工作中遇到了这样一个问题.场景是这样的:与一个第三方合作,对方将页面以及数据处理写好了给我们,但是技术栈不一样,对方是直接使用bootstrap+jquery+layer.js 来构建了两个页面.其中一个地方有大致如下代码: var num = $("#div1").text() 这里是通过jQuery来获取div中的内容,但这里的div是有 contenteditable 这个属性的...
ajax给div绑定数据,将数据集绑定到使用jQuery AJAX的ASP.Net Div标记AJAX
weixin_39913472的博客
08-05 305
Iam绑定现在iam使用数据集从db中获取数据。数据库，我想要避免。所以我决定使用Jquery ajax来绑定数据集。我的问题是我们如何绑定div标签内的数据集。将数据集绑定到使用jQuery AJAX的ASP.Net Div标记AJAX我的代码是： ​​代码背后：[WebMethod]public static string GetMessages(){string query = "GetMe...
富文本编辑器(双向绑定)
最新发布
wendy_qx的博客
08-15 392
1.安装Quill依赖。
vue-数据绑定
爪哇人的博客
09-22 6393
1 单向绑定(v-bind)：数据只能从data流向页面。2 双向绑定（v-modle）：数据不仅能从data流向页面，还能从页面流向data1双向绑定一般都应用在表单项元素上（如：input、select）2.v-modle: value可以简写v-modle，因为v-modle默认收集的就是value值。
初学必懂—vue绑定class的几种方式+绑定内联样式总结
Xmumu_的博客
03-17 3244
文章目录对象语法数组语法 对象语法 最常见的就是给v-bind:class设置一个对象，可以动态切换class： <div id="app"> <div :class = "{'active': isActive}">active生效</div> </div> <script> var app = new Vue({ el: '#app', data: { isActive:true
vue笔记：数据绑定
JYFZXX的博客
06-19 216
②：v-model:value 可以简写为v-model，因为v-model默认收集的就是value值。2、双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data。①：双向绑定一般都应用于表单类元素上（如：input、select等）1、单向绑定(v-bind)：数据只能从data流向页面。
vue2 自定义指令怎么绑定动态数据
05-30
要在 Vue2 中绑定动态数据到自定义指令中，可以使用 `bind` 和 `update` 钩子函数。在 `bind` 钩子函数中可以获取到指令绑定的元素和指令的参数，而在 `update` 钩子函数中可以获取到指令绑定的值的变化。 下面是一...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

铲屎官白茶

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

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

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

打赏作者

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

抵扣说明：

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

余额充值