Vue插值表达式和v-text，v-html，v-bind，v-on学习心得

最新推荐文章于 2022-07-08 11:03:45 发布
最新推荐文章于 2022-07-08 11:03:45 发布
阅读量438 收藏
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/junkaigege/article/details/103219393
版权
通过B站学习Vue.js，了解了v-cloak、v-text、v-html、{{msg}}插值表达式的应用。v-cloak用于解决数据加载时的闪烁问题；v-text会替换元素所有内容并加粗；v-html则能解析HTML代码；v-bind用于属性绑定，可简写为":属性名"；v-on或@用于事件绑定，如@click="show"。此外，还提到了el、data、methods在Vue实例中的作用。
摘要由CSDN通过智能技术生成

Vue插值表达式和v-text，v-html v-bind数据绑定指令学习心得

学习渠道、B站

看了b站的vue.js讲的蛮细的，然后自己也总结一下记录在这里，希望见证自己在前端技术的成长！

v-cloak v-text v-html { {msg}} 插值表达式的基本使用

几个代码的使用：

  1. { {msg}}，插值表达式，可以讲vue中data方法下msg的值插入其中，但是如果网速慢会闪烁出这个代码，获取到值后则显示值；
  2. v-cloak 可以解决闪烁的问题，css中样式为[v-cloak]{display:none;},html中在尖括号内，例：

  3. v-text，

    ，字体会加粗，且会覆盖掉原有内容，插值表达式则不会覆盖全部内容，只会替换该位置内容；

  4. v-html，

    可以将msg中的html代码进行识别，v-text和插值表达式都不行，只会直接输出；

  5. v-bind数据绑定指令，用来绑定属性，可以简写为“：”+要绑定的属性，v-bind中也可以写合法的js表达式
    练习代码：
    6.v-on 用来绑定事件，缩写是@符号 @click=“show”

其他:el属性用来控制页面的区域，data指定数据，methods是一个对象，可以在其中定义方法

// An highlighted block
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document<
最低0.47元/天 解锁文章
junkaigege
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
v-text和v-html以及v-bind的使用
有点騒的程序员
08-28 1026
v-text： v-text是用于操作纯文本，它会替代显示对应的数据对象上的值。当绑定的数据对象上的值发生改变，插值处的内容也会随之更新。注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值。其中：v-text可以简写为{{}},并且支持逻辑运算。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title&
Vue基础指令入门 （v-text、v-html、v-on、v-bind、v-if、v-show、v-model、v-for）
llapton的博客
04-29 282
Vue指令入门1.官方vue.js导入2.创建vue对象3.v-text，v-html指令4.v-on:指令5.v-if,v-show,v-bind:指令6.v-for指令7.v-model指令 1.官方vue.js导入 导入官方vue.js，开始使用vue框架，其中vue.js适合调试，vue.min.js适合实际应用。 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 2.创建vue对象
vue3学习1：vue 的指令v-text，v-html，v-bind
weixin_43788986的博客
07-08 840
指令是vue自定义的以v-开头的自定义属性。每个不同的属性都有各自不同的意义和功能作用 ： 操作元素中的纯文本 简写： {{}} 举个栗子： 可以看出会覆盖元素中默认的文本内容。； 使用只会将值放入{{}}中，它专门用来解决 v-text 会覆盖默认文本内容的问题。这种 {{ }} 语法的专业名称是插值表达 式作用 ： 操作元素中的HTML标签， v-text会将元素当成纯文本输出，v-html会将元素当成HTML标签解析后输出 举个栗子 {{}}/v-text不能解析html元素，只会照样输出作用 ：
vue基础知识点
北枫林
11-11 379
Vue.js 什么是Vue.js Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex） Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！ Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上...
vue指令之v-bind、v-on、v-once、v-html、v-text
weixin_44374938的博客
03-06 285
v-bind绑定class、style 除了数据的动态实现，我们知道渲染的时候样式是必不可少的，接下来介绍vue中如何动态的使用v-bind绑定元素类名class,style来动态的给dom节点添加和修改删除样式。 v-bind绑定class //v-bind:class 可以简写为：class //类名需要添加单引号，变量不用 # class类名是一个对象的情况 //上面的语法表示active这个class存在与否将取决于数据属性isActive是否为true。green同理。 //此外，v-bind
vue2 v-model/v-text 中使用过滤器的方法示例
10-17
在Vue.js中，过滤器（Filters）是Vue实例的一个非常有用的特性，它允许用户对从插值表达式和v-bind表达式中输出的文本进行格式化。Vue2允许自定义过滤器，这些过滤器可以被添加到JavaScript表达式的尾部，并由“管道...
对Vue- 动态元素属性及v-bind和v-model的区别详解
10-18
在学习Vue框架的过程中，对于动态元素属性的使用以及Vue提供的指令v-bind和v-model的理解是非常关键的。这两个指令在Vue.js中用于数据绑定，但是它们的使用场景和作用有着本质的区别。接下来，我将从多个维度详细...
vue指令v-html使用过滤器filters功能实例
10-16
当使用插值表达式时，Vue可以确保数据更新时自动重新渲染。然而，v-html指令直接设置innerHTML，Vue的响应式系统无法追踪其中数据的变化，因此也就无法保证数据更新时能自动重新渲染。由于这种限制，过滤器在v-html...
关于vue v-for循环解决img标签的src动态绑定问题
10-18
这是因为Vue的v-bind绑定指令是用来动态绑定属性值的，而对于像src这样的HTML属性，我们应该直接使用“{{ }}”插值表达式来进行数据绑定。 此外，在进行动态绑定时，如果图片和Vue文件位于不同的目录结构下，路径的...
深入浅析AngularJs模版与v-bind
10-18
总的来说，`{{ }}`插值表达式适合用于简单的文本内容绑定，而`v-bind`（或`ng-bind`）则更适合于动态绑定元素属性或复杂表达式的值。在开发过程中，选择合适的绑定方式可以避免不必要的问题，提高代码的可读性和维护...
编程随笔-Vue | 02.v-text,v-bind与v-model的区别
xyx-Eshang的博客
09-28 265
文章目录1.v-text，v-bind和v-model的区别2.如何理解单向绑定和双向绑定？2.1.概述部分2.2.代码测试 1.v-text，v-bind和v-model的区别 v-text，v-bind是单向绑定 v-model是双向绑定 2.如何理解单向绑定和双向绑定？ 2.1.概述部分 v-text和v-bind对文本输入框的值赋值时，若文本输入框的值因用户的操作而变动，Vue对象中的属性并不会发生改变，除非额外使用v-on指令去修改v-text，v-bind对应的值 v-model则可
（二）Vue - 插值表达式及基本指令之v-cloak、v-text、v-html、v-bind、v-model和v-on
qq_33810743的博客
06-15 806
这里写目录标题插值表达式指令：v-cloak指令：v-text指令：v-html指令：v-bind指令：v-on 插值表达式 再Vue中，{{}} 语法 叫做 插值表达式 例如： <p>{{msg}}</p> 指令：v-cloak 单纯使用插值表达式界面渲染数据时会出现闪烁，数据显示异常的问题，使用 v-cloak 能够解决 插值表达式闪烁的问题 <p v-cloak>{{ msg }}</p> 指令：v-text 效果类同插值表达式方式绑定数据
9.VUE_插值表达式和v-bind
安小静--
11-05 568
1.如果需要直接插入文本值，则需要用{{}}括起来 <template> <div class="p1"> <p>{{name}}{{msg}}</p> </div> </template> <script> export default { name: "hel...
插值，v-bind，v-model的区别
gdtown的博客
04-30 430
v-bind {{}} v-model 三者在使用场景上的区别
Vue基础篇-基本指令 插值表达式,v-cloak,v-text,v-html和v-bind
toString的博客
02-20 1935
1.插值表达式 {{变量}} 例如： <p id="app">{{data}}</p> <script> new Vue({ el:"#app", data:{ data:"显示的数据信息" } }); </script> 2.v-cloak 用于处理网络延迟造成插值表达式渲染出现{...
Vue学习记录 (模板,差值表达式,v-text,v-html,v-bind,v-model,v-if,v-show,v-for,v-on,this关键字,按键修饰符)
Pole丶逐
04-23 136
模板示范 <div id="d1"> </div> <script> new Vue({ el:"#d1", // 作用的区域 data:{ // 参数 }, methods:{ // 函数 }, comput...
6、插值表达式和v-text指令
我不想说
07-13 568
插值表达式和v-text都是显示数据的，但是插值表达式有个问题，如果频繁刷新页面或者网速特别慢的时候，页面会先显示{{msg}} 然后才会显示它指代的hello vue vue中有个指令可以解决这个问题 v-cloak ，vue在页面传递数据时，如果插值表达式先开始没得到值，那么v-cloak会执行css样式display:none 不显示，待得到数据后移除这个样式。 那么，v-cloak要...
实习html周日志,实习日志：最后的一周
weixin_36225384的博客
06-27 1561
2017.10.23，周一凌晨。在2017年10月27日，我们将结束实习。届时，我将回归学生的身份，这是一个我喜欢的身份，有自由的身份。“纵使困顿难行，亦当砥砺奋进！”在听到三国杀sp姜维的这个台词之后，我如同被雷霆一般惊醒，我的眼前，一片漆黑。但在隐隐约约之间，似乎还有一线光明。然而这是千载难逢的机会，我不知道我能否抓住。而这个，有人称之为“逢亮”。我做事情并不是很认真，尤其是批改作业上。我喜欢...
v-model 指令：实现双向数据绑定和实现计算器的案例
junkaigege的博客
11-24 298
v-model 指令的写法 v-model只能用在表单元素中，实现表单元素中数据的双向绑定 如：input（radio text address email …） select chexbox textarea <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &l...
vue中v-bind
最新发布
07-28
v-bind指令用于在Vue中实现属性的动态绑定。它可以将一个或多个attribute，或者一个组件prop动态绑定到表达式。在Vue中，v-bind可以使用简写形式，即使用冒号(:)来代替v-bind指令。例如，可以使用v-bind或者简写形式:来绑定一个img标签的src属性，如下所示： ``` <img v-bind:src="imageSrc"> ``` 或者简写为： ``` <img :src="imageSrc"> ``` 需要注意的是，在属性值内不能直接使用插值操作，例如不能直接写入类似于`<h1 :style="font-size:50px;color:red;">this is test</h1>`的语法。如果想要在元素节点的属性上绑定Vue的data数据，需要使用v-bind指令。例如，可以使用v-bind指令将data中的tit数据绑定到h1标签的title属性上： ``` <h1 v-bind:title="tit">this is test</h1> ``` 这样，h1标签的title属性就会与data中的tit数据进行绑定，实现了属性的动态更新。 #### 引用[.reference_title] - *1* [【Vue】Vue中v-bind的使用](https://blog.csdn.net/weixin_34727238/article/details/106949433)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [Vue中的v-bind指令基本用法和介绍](https://blog.csdn.net/qq_41196217/article/details/117253289)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值