vue快速入门学习笔记（一）v-text v-html v-on

已于 2022-07-10 17:40:28 修改
阅读量2k 收藏 1
点赞数 1
分类专栏： 前端开发 文章标签： vue.js 学习 前端 程序员
于 2022-07-09 21:42:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GBS20200720/article/details/125696309
版权

问就是工作需要！快速入门！

文章目录

v-text指令

可以看到div标签内的写法和jQuery开发差不太多
script标签内部，先用el挂载app标签，再给同名变量message赋值
在这里插入图片描述

上面是单个变量赋值，多个也可以哦~
在这里插入图片描述
注意，如果要对静态的文本进行动态替换（静态文本动态文本结合展示），需要使用双大括号的写法：
在这里插入图片描述

这三种标签的写法都可以拼接字符串哦！
在这里插入图片描述

v-html指令

在这里插入图片描述
可以看到，v-html标签和v-text标签的区别就在于 v-html可以解析出超链接（a href=‘www.cxxxx’），有一定前端开发基础的同学对

最低0.47元/天 解锁文章
怎么又有bug单
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Vue笔记 内置指令 v-text v-html v-cloak v-once v-pre
qiaoyangla的博客
03-24 2097
v-bind：单向绑定解析表达式，可简写为：xxx v-model:双向数据绑定 v-for：遍历数组/对象/字符串 v-on：绑定事件监听，可简写为@ v-if：条件渲染（动态控制节点是否存在） v-else：条件渲染（动态控制节点是否存在） v-show：条件渲染（动态控制节点是否展示） 1、v-text 向其所在的节点中渲染文本内容, 与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}不会，还是插值语法用的多 <div>{{name}}</div
vue中的自定义指令以及模拟v-text、v-html、v-on
liuyuhua666的博客
06-19 1197
注册自定义指令的方式 注册v-focus自动聚焦指令： <div id="app"> <input type="text" v-focus="msg"> </div> 1. 全局注册 Vue.directive("focus", { // Vue会对html代码进行解析 // 解析之后，会将解析后的内容重...
Vue 之 解决v-html生成的元素不能触发@click等vue事件和CSS样式不生效的方法
热门推荐
weixin_45092437的博客
09-05 1万+
通过官方文档可以得知两个重点：① 通过v-html生成的页面元素，不会被当做Vue模板进行编译，只会作为普通的html代码被插入，也就是说通过v-html插入的html@click、v-if等，则不会生效，因为他们没有被Vue编译，而浏览器并不会识别这些vue语法，所以这些语法都不生效。② 在.vue文件中如果style标签上增加了scoped属性，那么该标签内的样式就不会对v-html生成的页面元素起作用，还是因为这些元素没有被当做Vue模板进行编译，所以不生效。
vue中的v-text，v-html，v-on属性
Dreamer
01-31 1114
v-text 设置标签的文本值(textContent)，无论内容是什么，只会解析成为文本。 v-text是将数据设置给标签的文本属性，替换文本属性中原来的值，例如上图，通过程序的运行可以看出，高先生替换掉了第一个h2文本属性中的陕西这个值。在v-text属性中也可以使用字符串的拼接，例如： v-html v-html改变innerHTML值，内容中有html结构时可以被解析为HTML标签，例如： v-on v-on为元素绑定事件，绑定的方法写在methods属性中。v-on:可以简写为@。
Vue 常用指令 内容绑定/事件绑定 v-text、v-html、v-on
最新发布
小楼一夜听春雨，深巷明朝卖杏花
06-16 2714
但是使用v-html的时候那么html的各种属性都能够渲染出来。最终将v-text渲染为一个html的文本。在开发过程当中使用vue的语法，但是在实际最终会将vue的语法转化渲染为html页面。可以看到做文本的时候可以使用v-text，同时也可以看到在vue框架里面可以在HTML标签当中使用vue属性。在前端开发中，我们经常监听用户发生的事件，例如点击、拖拽、键盘事件等。在整个vue的编写过程当中，只要带v-的，那么都是常用的vue的指令。显示HTML文本的，某些情况下，从服务端请求的数据本身就是一个。
vue.js学习笔记之v-bind和v-on解析
10-18
主要介绍了vue.js学习笔记之v-bind和v-on解析，v-bind 指令用于响应地更新 HTML 特征，v-on 指令用于监听DOM事件，文中还给大家提到了v-bind,v-on的缩写，感兴趣的朋友参考下吧
vue 插值 v-once,v-text, v-html详解
08-28
"vue 插值 v-once,v-text, v-html 详解" Vue.js 中的插值是指在模板中将数据绑定到 HTML 元素的过程。插值可以分为三种类型：v-once、v-text 和 v-html，每种类型都有其特点和应用场景。 插值 插值是 Vue.js 中最...
vue中v-text / v-html使用实例代码详解
10-17
主要介绍了vue中v-text / v-html使用实例代码详解,非常不错，代码简单易懂，具有一定的参考借鉴价值，需要的朋友可以参考下
vue学习笔记之指令v-text && v-html && v-bind详解
08-30
Vue学习笔记之指令v-text && v-html && v-bind详解 Vue.js 中的指令是以v-开头的自定义属性，每个不同的属性都有各自不同的意义和功能。今天我们将学习三个重要的指令：v-text、v-html和v-bind。 v-text v-text...
vue2 v-model/v-text 中使用过滤器的方法示例
10-17
主要介绍了vue2 v-model/v-text 中使用过滤器的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
VUE之v-cloak、v-text、v-html、v-bind绑定属性、v-on事件绑定、.stop阻止冒泡.prevent阻止默认.capture捕获触发事件v-model.self、 .once
qq_46179813的博客
05-26 394
1、 VUE之v-cloak、v-text、v-html、v-bind绑定属性、v-on事件绑定机制、.stop阻止冒泡、.prevent阻止默认行为、.capture捕获触发事件、.self只有点击当前元素时候、 .once只触发一次事件处理函数 1、v-cloak能够解决 插值表达式闪烁的问题 2、v-text默认没有闪烁的问题，会覆盖元素中原有的内容，但是，插值表达式只会替换自己的这个占位符，不会把整个元素的内容清空 3、v-html会把内容中的HTML代码进行解析 4、v-bind是Vue中，提供的
vue中Component错误
weixin_30814329的博客
07-30 851
报错：Component you should use exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead. 翻译：组件应该只使用一个根元素。 如果您在多个元素上使用v-if，请使用v-else-if来链接它们。 原因：组件中<t...
自己使用Vue全家桶问题合集（很多eslint规范问题）
weixin_30414305的博客
04-04 377
遇到很多问题一一道来。 1.vue报错 Do not use built-in or reserved HTML elements as component id:header 组件，不能和html标签重复 header组件，h5新标签重复 由于在模板需要插入到 DOM 中，所以模板中的标签名必须能够被 DOM 正确地解析。主要有三种情况： 　　　　一是完全不合法的标签名，例如 <...
vue 组件以字符串插入_vue的vhtml指令使用注意事项
weixin_39520880的博客
11-22 1596
题图 By HymChu Fron Instagram今天说一下Vue开发时使用V-html时候碰到的一些问题，首先我们要明白什么时候使用v-html，当需要渲染的数据包含html片段的时候，比如下面的内容：但是这里有几点需要开发者注意：1、V-html更新的是元素的 innerHTML 。内容按普通 HTML 插入， 不会作为 Vue 模板进行编译 。但是有的时候我们需要渲染的html...
Vue基础指令入门 （v-text、v-html、v-on、v-bind、v-if、v-show、v-model、v-for）
llapton的博客
04-29 278
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对象
Vue指令相关知识点总结——v-text、v-html、v-show、v-if、v-for、v-on等
Web_Web20
03-14 248
指令 ​ 带有v-前缀的特殊属性。 v-text和v-html指令 ​ v-text渲染文本，html代码不会被解析。 ​ 和模板语法{{}}的区别：在vue没有创建时{{}}会被当成文本渲染到浏览器中。 ​ v-html，如果message中有html代码，会被解析。 <!DOCTYPE html> <html lang="en"> <head> &l...
【Vue】报错解决方法
Qxn530的博客
10-17 795
vue使用vuex中的方法报错，报unknown mutation type的错误；“placement“报错解决方案；
Vue 使用v-html后内容未能解析成html解决方法
zediwang的博客
09-06 3249
vue中如果想将HTML的内容绑定到元素里面，可以使用 v-html的属性来进行设置。设置好以后发现页面上还是显示的是HTML源代码，未能解析成HTML显示。将接口中返回的字符替换成对应的HTML标签，然后再使用v-html进行绑定，页面就显示正常了。导致问题的原因是接口返回的数据中未对html的内容做转义，导致页面输出了HTML的代码。理论上我们页面上想显示的是HTML解析后的内容，而实际上页面是将HTML代码输出了。
vue2中的组件component问题
xiaogezl的博客
03-24 2997
在学vue2的时候踩得这个坑， 一个组件，也就是一个template标签中只能有一个标签，如果你照下面这样写就会出现 [Vue warn] 也就是警告 这是一个标题 内容 官方会给你以下一个提示 - Component template should contain exactly one root element. If you ar
vue 的 v-html/v-text
04-02
v-html 和 v-text 是 Vue 的指令，用于绑定数据到 HTML 元素上。 v-html 指令用于将数据作为 HTML 解析并渲染到元素上，例如： ``` <div v-html="htmlContent"></div> ``` 在这个例子中，htmlContent 中的数据会被解析成 HTML 标记，并渲染到 div 元素中。 v-text 指令用于将数据作为纯文本渲染到元素上，例如： ``` <p v-text="message"></p> ``` 在这个例子中，message 中的数据会被渲染成纯文本，并且插入到 p 元素中。如果 message 中包含 HTML 标记，则会被转义成实体字符，而不是被解析成 HTML 标记。 需要注意的是，v-html 和 v-text 都会覆盖元素原有的内容，因此在使用它们时需要确保元素内部没有其他重要的内容。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值