VUE学习笔记：3.vue的插值操作及v-bind绑定属性

最新推荐文章于 2024-10-13 08:01:48 发布
最新推荐文章于 2024-10-13 08:01:48 发布
阅读量753 收藏 1
点赞数
分类专栏： vue学习笔记 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ouyicnm/article/details/117595707
版权

一.插值操作

插值操作就是讲vue实例中的数据渲染到HTML页面标签的内容中。

1.mustache语法

mustache语法是在HTML页面中，需要使用vue数据的地方使用{{key}}的方式来获取vue中的数据的值。

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

<div id="app">
    <h1>{{message}}, 张三</h1>
    <!--mustache语法中可以使用简单的表达式-->
    <h1>{{firstName+ " "+ lastName}}</h1>
    <h1>{{count*2}}</h1>
    <!--html中可以在同一位置引用多个mustache--->
    <h1>{{firstName}} {{lastName}}</h1>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            message: 'hello!',
            firstName: 'kobe',
            lastName: 'bryant',
            count: 100
        }
    })
</script>
</body>
</html>

结果如下：
在这里插入图片描述

2.v-once指令讲解

在这里插入图片描述

  • 我们知道vue是响应式的，即当我们vue中的数据渲染到HTML页面后，改变vue中的数据，HTML页面的内容也会随机更改。
  • 如果我们希望HTML页面渲染完成后，更改vue中的数据HTML页面的内容不再更改。那么我们可以使用v-once来实现。
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

<div id="app">
    <h1>{{message}}</h1>
    <h1 v-once>{{message}}</h1>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            message: 'hello!'
        }
    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述

3.v-html指令讲解

在这里插入图片描述

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

<div id="app">
    <!--以v-html的格式解析vue中的url内容-->
    <h1 v-html="url"></h1>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            url: '<a href="https://www.baidu.com">百度一下</a>'
        }
    })
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述

4.v-text指令讲解

在这里插入图片描述

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

<div id="app">
    <h1 v-text="message"></h1>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            message: 'hello'
        }
    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述
注意：我们推荐使用mustache语法而不是v-text，因为相比于v-text而言mustache更加灵活。

5.v-pre指令讲解

在这里插入图片描述

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

<div id="app">
    <h1>{{message}}</h1>
    <h1 v-pre>{{message}}</h1>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            message: 'hello'
        }
    })
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述

6.v-cloak指令讲解

我们浏览器在加载页面时，会先加载HTML然后再加载JavaScript。因此在我们的HTML加载完成到JavaScript加载完成的这段时间中，会导致浏览器页面上显示出原始的mustache语法{{}}。这会影响用户体验，我们可以使用v-cloak标签来屏蔽掉这种情况。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<style>
    [v-cloak] {
        display: none;
    }
</style>

<div id="app">
    <h1 v-cloak>{{message}}</h1>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            message: 'hello'
        }
    })
</script>
</body>
</html>

v-cloak实现屏蔽闪烁的原理：

  • 给标签加上v-cloak属性，然后在style中对属性进行设置为display: none;，即不显示标签内容。因此当我们的HTML页面加载完而JavaScript未加载完时，该内容不会显示。
  • Vue.js中对v-cloak做了特殊处理，当Vue检测到该v-cloak属性时，会自动去掉该属性。所以页面中的JavaScript加载完后，该内容又显示出来了。

二.v-bind绑定属性

1.v-bind介绍

在这里插入图片描述

2.v-bind基本使用

语法格式：v-bind:属性名称="data中的key"
简写格式：:属性名称="data中的key"

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<style>
    [v-cloak] {
        display: none;
    }
</style>

<div id="app">
    <!--vue会将imgURL的内容渲染到src属性的值中-->
    <img v-bind:src="imgURL">
    <a :href="URL">百度一下</a>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            imgURL: 'https://image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E7%8C%AB%E5%92%AA&hs=2&pn=0&spn=0&di=1320&pi=0&rn=1&tn=baiduimagedetail&is=0%2C0&ie=utf-8&oe=utf-8&cl=2&lm=-1&cs=2325464303%2C1389978966&os=3269622072%2C3899409089&simid=3406695896%2C362452050&adpicid=0&lpn=0&ln=30&fr=ala&fm=&sme=&cg=&bdtype=0&oriquery=%E7%8C%AB%E5%92%AA&objurl=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F9%2F53605fc6be05e.jpg%26refer%3Dhttp%3A%2F%2Fpic1.win4000.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1625472437%26t%3D272a34abde67013bf3d0973e76dacf9d&fromurl=ippr_z2C%24qAzdH3FAzdH3Fooo_z%26e3Botg9aaa_z%26e3Bv54AzdH3Fowssrwrj6_kt2_9mamm_m_z%26e3Bip4s&gsm=1&islist=&querylist=',
            URL: 'https://www.baidu.com'
        }
    })
</script>
</body>
</html>

3.v-bind动态绑定class属性（对象语法）

在这里插入图片描述
在这里插入图片描述
案例：通过动态的切换class属性，来完成标签字体颜色的改变

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

<style>
    .red{
        color: red;
    }

</style>

<div id="app">
    <!--class后面跟的对象中，如果哪个字段的值为true，则会使用该字段作为属性值-->
    <!--class如果为red，则显示为红色字体，如果为black，则为默认的黑色字体-->
    <h2 :class="{'red': isred, 'black': isblack}">HELLO</h2>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            isred: false,
            isblack: true
        }
    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.v-bind动态绑定class属性（数组语法）

在这里插入图片描述
注意：数组这种方式并不常用，因为使用这种方式和我们直接在代码中写死class="active,line"效果一样。

但是如果我们的class属性值是通过服务器动态的传递过来，那么使用数组语法则是不错的选择。

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

<style>
    .red{
        color: red;
    }

</style>

<div id="app">

    <h2 :class="[active,line]">HELLO</h2>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            active: "asgffsdg",
            line: "oifdsg"
        }
    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述

5.v-bind动态绑定style属性（对象语法）

在这里插入图片描述

在这里插入图片描述

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


<div id="app">

    <h2 :style="{fontSize: finalsize + 'px',color: finalcolor}">HELLO</h2>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            finalsize: '100',
            finalcolor: "red"
        }
    })
</script>
</body>
</html>

效果如下：
在这里插入图片描述
注意：使用对象语法来绑定style属性时，对象的key必须是css中的属性名称，不能像class中那样随便定义。

6.v-bind动态绑定style属性（数组语法）

在这里插入图片描述
v-bind动态绑定style属性其本质还是对象，主要用来解决当我们的标签需要使用多个style对象时，可以讲它们放在数组里。

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


<div id="app">

    <h2 :style="[style1,style2]">HELLO</h2>
</div>



<!--引入本地的vue.js文件-->
<script src="../vue.js"></script>

<script>
    // ES6中使用let定义变量，使用const定义常量
    let app = new Vue({
        el: '#app', // 讲这个vue实例与id为app的标签关联起来
        data: {
            style1: {fontSize: '100px'},
            style2: {color: 'yellow'}
        }
    })
</script>
</body>
</html>

运行效果如下：
在这里插入图片描述

new nm个对象
关注
专栏目录
vue2学习笔记4 - 深入学习模板语法：插值语法和指令语法
l_q_l的专栏
07-15 890
1、插值语法：功能：用于解析标签体内容。写法：{{xxxx}}，其中xxxx是js表达式，且可以直接读取到data中的所有属性。2、指令语法：功能：用于解析标签（包括：标签属性、标签体内容、绑定事件......）示例：v-bind:href="xxx"或简写为 :href="xxx"，xxx同样要写js表达式。且可以直接读取到data中的所有属性。备注：Vue中有很多的指令，且形式都是：v-????。
vue学习笔记（超详细）
jiey0407的博客
03-09 5850
文章目录 一. Vue基础 认识Vue.js Vue安装方式 Vue的MVVM 二. Vue基础语法 生命周期 模板语法 创建Vue, options可以放什么 语法 综合 v-on v-for遍历数组 v-model表单绑定 v-model结合radio类型使用 v-model结合checkbox类型使用 v-model结合select类型使用 值绑定 修饰符 检测数组更新 计算属性 computed 计算属性setter和getter computed / meth
Vue插值的操作和动态绑定属性v-bind
LvBing的博客
06-20 507
模板语法 1.插值的操作 1.Mustache <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>
Vue3 CSS 中的 v-bind()
m0_73311728的博客
05-06 1751
实际的值会被编译成哈希化的 CSS 自定义属性，因此 CSS 本身仍然是静态的。自定义属性会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式地更新。这个语法同样也适用于。
vue3常用的指令之v-bind
最新发布
g470641382的博客
10-13 390
百度
vue3 v-bind
seimeii的博客
08-02 1225
vue3 v-bind
Vue3新属性 — css中使用v-bind（v-bind in css）
charlatans的博客
08-11 3万+
v-bind() in css并没有进行劫持或者其他操作，他主要完成的任务是将v-bind()中的内容通过自定义属性的方式进行了重新定义，在编译后代码中可以看到
vue3中的v-bind
qq_51976882的博客
02-08 1296
v-bind是 Vue.js 中的一个核心指令，用于在 Vue 组件或 DOM 元素上绑定数据属性。它允许你将 Vue 实例中的数据或计算属性绑定到 DOM 元素的属性上。当数据发生变化时，v-bind会自动更新 DOM 元素的属性。v-bind的简写形式是冒号。例如，v-bind:src可以简写为:src。以下是v-bind
Vue学习.pdf（Vue学习个人笔记资料-菜鸟入门）
11-20
Vue的语法主要包括插值表达式、指令（如v-if、v-show、v-for、v-bind、v-on等）、计算属性和事件处理。插值表达式用于在模板中展示和操作数据，而指令则提供了一种声明式地操作DOM的方式。计算属性是基于响应式数据...
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
vue 3.0学习笔记(从入门到精通)
10-07
`v-bind`指令用于动态地绑定元素的属性，可以使用语法糖`:attr`替代。例如： ```html <iframe v-bind:src="url"> ``` 可以简化为： ```html <iframe :src="url"> ``` 这会将`url`数据属性的值绑定到`iframe`的`src`...
Vue3 中的 v-bind 指令：你不知道的那些工作原理
qq_36348403的博客
06-24 1074
本文将通过debug源码的方式带你搞清楚，v-bind指令是如何实现简写、同名简写等多种方式将变量绑定到html的attributes属性上。
Vue3中的模板指令——属性绑定指令v-bind
传播有益的技术文章，力求精准、专业、专心、专享
06-06 544
该属性绑定指令主要应用在两类场景下：一类是绑定attrs标签属性，如class、id、style等属性；另外一类是绑定props组件实例自定义属性，即用于动态地绑定一个或多个基本类型属性或者绑定一个对象类型的属性到组件上。props 是组件间通信的一种方式，允许父组件向子组件传递数据。在 Vue 中的灵活性和强大功能，无论是用于 DOM 属性还是组件 props 的动态绑定。是组件的数据属性，它们的变化将实时反映到 DOM 上。还可以接受一个对象，这样就可以批量绑定多个属性。
vue3在css中使用js中变量（v-bind() in CSS）
qq_35703552的博客
06-08 4663
vue3 js 控制css变量
vue3之v-bind
06-03 280
【代码】vue3.2之style: v-bind。
VUE：插值与绑定
weixin_41350225的博客
04-07 876
Vue框架数据模型层M与视图层V双向绑定，自动刷新 {{ }} ：插入与绑定文本(类似与innerText的作用) ①{{ 变量名 }}插入与绑定文本 实例代码 <body> <!-- 相当于视图V层 --> <div id="app"> <h1>{{message}}</h1> &...
Vue3 v-bind & v-on & v-model
xiangxiongfly
02-22 1077
v-bind 属性绑定 v-on 事件绑定 v-model 双向绑定
vue基础语法:插值,绑定属性：（v-bind）
xi_aot的博客
12-12 1397
vue基础语法:插值,绑定属性：（v-bind）
Vue（1）之 插值绑定与内置指令
热门推荐
惟忆
01-27 4万+
1、Vue-插值绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .profile { display: inline-block; width: 200px; } </
Vue.js初学者教程：数据双向绑定与常用指令解析
"Vue.js的学习，特别是数据的双向绑定和常用指令是初学者入门的关键部分。本文将探讨这两个核心概念，并通过实例代码展示其工作原理。" 在Vue.js中，数据的双向绑定是一个强大的特性，它使得视图和模型之间保持同步...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值