vue学习路(一)：常用指令v-text，v-html，v-bind，v-if，v-on

最新推荐文章于 2022-10-12 14:35:54 发布
最新推荐文章于 2022-10-12 14:35:54 发布
阅读量477 收藏 1
点赞数 1
分类专栏： vue学习 文章标签： vue.js html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44860114/article/details/121405502
版权

小白有话说：

作为前端小白，希望和大家一起分享学习的过程，每次学习到的新内容都会在这里分享，希望对大家有帮助，做的不好的地方的也希望大家提出，我会及时改正，如果代码有错误的话希望大家能够提醒我，嘻嘻嘻~~~

什么是vue

vue是一款渐进式JavaScript框架，渐进式是指由浅到深，由简单到复杂的使用vue框架。

vue的优点

  1. 体积更小：压缩后的vue.js的体积只有33k。
  2. 运行效率更高：vue.js基于虚拟DOM操作，大幅度提高了DOM的操作渲染效率。
  3. 双向数据绑定：开发者不需要再进行DOM操作，只需要操作数据包。
  4. 生态丰富，学习成本低。

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>
    <!-- 1. 导入vue.js文件 -->
    <script src="../vue.js"></script>
</head>
<body>
    <!-- 2. 准备容器 -->
    <div id="app">
        <!-- 4. 在容器内渲染数据 -->
        <!-- {
   {变量}}：与data中的数据进行数据绑定 -->
        <h1>{
  {msg}}</h1>
    </div>

    <!-- 3. 初始化，通过vue.js提供的构造函数创建实例化对象-->
    <script>
        new Vue({
     
            // 标识控制区域/容器
            el:'#app',
            // 数据包，需要传递的数据
            data:{
     
                msg:'hello word'
            }
        })
最低0.47元/天 解锁文章
·傻蛋儿·
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue基础 第三讲笔记：v-text、v-html、v-on
qq_49956121的博客
10-02 459
一、v-text指令 设置标签的内容。 特点： 1、默认写法会替换全部内容，使用插值表达式{{ }}可以替换指定内容。 2、内部支持写表达式。 注意： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> {{ message }}哈哈
text html js中增加if判断,Vue.js中的v-if和v-show等判断条件失效的原因及解决方法
weixin_30229479的博客
06-18 1359
摘要：学习Vue.js已经半个月了，慢慢的也上手了一些。Vue中的v-if,v-show以及自定义事件这些功能在简化着我们的代码，很轻松就能控制一些复杂的操作。但如果使用不当，也会失效......话说前段时间艺灵在摸索Vue.js 2.0，现在一晃半个月过去了，不能说完全没有收获，但也不能说收获有多大。总之是边踩坑边学习中......今天主要说学习过程中遇到的一个常见问题，也许看官曾经或将来会遇到...
vue --- > v-text、v-show、v-if、v-else
栗子好好吃的博客
06-15 336
v-text: <div id = "app"> <p v-text="msg"></p> </div> <script> let app = new Vue({ el:'#app', data:{ msg:'Hello Vue' } }) &...
Vue指令【v-once,v-text,v-html,v-if，v-show，v-on】
略懂一点的少年的博客
06-15 315
一，文本插值 1，{{参数}}，双大括号，这是最基本的文本插值的形式 2）v-once指令 表示只渲染一次，后续数据变化不再关心 3）v-text=“参数”指令 它可以用来替代{{参数}}这个双大括号，效果相当 4）v-html指令 解析HTML内容 注：双大括号和v-text会将值当成字符串处理，如果是HTML值，则会将<>转义为&It；&gt,如果需要解析HTML的内容，就需要使用v-html指令 二，指令 1，v-if指令 通过对数据的真假的判断，来添加或者移除某
Vue学习一（本地应用vue指令v-text,v-html,v-on,v-show,v-if,v-bind,v-for,v-model）
Wu_JingYi0829的博客
09-28 199
一、第一个Vue程序 <div id="app1"> {{message}} <h2>{{school.name}}</h2> <h3>{{school.tel}}</h3> <h4>{{campus[1]}}</h4> </div> <script> // el属性：挂载点 // data：数
Vue v-for中的 input 或 select的值发生改变时触发事件操作
10-14
在HTML中，我们可以直接使用`oninput`来绑定一个JavaScript函数，但在Vue中，我们需要将其转换为`v-on:input`，并可以使用`v-bind:`简写为`:input`。 - 示例： ```html <input type="text" id="myInput" v-on:...
Vue 通过自定义指令回顾v-内置指令(小结)
12-12
Vue.js 的各种指令（Directives）更加方便我们去数据驱动 DOM，例如 v-bind、v-on、v-model、v-if、v-for、v-once 等内置指令，这些指令的职责就是当表达式改变时将某些行为应用到 DOM 上，尽量不去操作增删改 DOM。...
vue的学习代码-vue的指令部分 如 vue-if、vue-for、vue-model、vue-bind...
05-12
vue的学习代码-vue的指令部分 vue-if | text | for | on | model | bind | pre | html 等等
小白初入前端之Vue.js的学习之路-vue学习第三弹.docx
12-27
1. **Vue指令**： - **v-text**: 用于设置元素的文本内容，它会替换元素内部的所有内容。 - **v-html**: 用于设置元素的HTML内容，允许动态插入HTML片段，但需注意安全问题，防止XSS攻击。 - **v-for**: 用于循环...
Vue指令指令大全
10-17
本文为大家介绍了VUE中内置指令包括：v-text,v-html,v-show,v-if,v-else,v-else-if,v-for,v-on,v-bind,v-model,v-pre,v-cloak,v-once
Vue 中自带指令（v-text、v-if、v-on、 v-bind等）解析（封装方法）
gebieren的博客
06-12 624
vue中自带指令分为三类，第一类是只有指令名的，如v-text、v-html、v-if等，第二类是指令名+参数的，如v-bind：class。第三类是指令名+参数+修饰符的，如v-on:click.stop。类别不同，所产生的功能就有所不一样，下面就通过自定义指令v-mytext,v-myon与v-mybind来实现v-text,v-on,v-bind的一样的功能。 v-mytext 指令 <body> <div id="app"> <h2>我是..
vue快速入门(三) 之 v-text v-html
weixin_44415928的博客
03-16 332
1.v-text 可以看出来v-text的作用就是把后边的变量message的值添加到div的文本内容部分,功能类似于在div文本处写{{message}} 我们发现v-text是吧标签里边的所有文本全都替换,而{{}}则不会,这是区别 另外这两个都支持字符串的拼接 2.v-html 注意到这次我们在message里边加上了h1标签,分别用v-text和v-html来做测试 发现v...
vue中的重点指令 v-text v-html v-for v-model v-on v-bind v-show v-if v-else和v-else-if
kjs--的博客
04-08 1028
vue中的重点指令 什么是指令，指令使用的方式 vue中的常见指令 v-text：内容渲染指令 v-html：内容渲染指令 v-for：列表渲染指令 v-model：双向绑定指令 v-on：事件绑定指令 v-bind：属性绑定指令 v-show：条件渲染指令 v-if：条件渲染指令 vue中的常见指令: v-text 介绍： v-text是内容渲染指令，用来辅助开发者渲染 DOM 元素的文本内容 作用： 设置或更新元素的内容 语法： <标签 指令='值'></标签>，如&
Vue · 拼接html,绑定点击事件
weixin_42091247的博客
11-29 3251
在vue 的html拼接在添加点击事件用原生的onclick来触发事件，将事件挂在window上
基于SpringBoot+Vue的零食零售管理系统
weixin_52721608的博客
04-05 3887
随着科学技术的飞速发展，社会的方方面面、各行各业都在努力与现代的先进技术接轨，通过科技手段来提高自身的优势，零食销售商城当然也不能排除在外。零食销售商城是以实际运用为开发背景，运用软件工程原理和开发方法，采用springboot框架构建的一个管理系统。
Vue.js 绑定样式 条件渲染 v-if判断 v-for 循环基本的列表 Vue写购物订单 Key的原理 列表的过滤 同时降序和升序 Vue.set 的使用
red_HTML的博客
10-12 212
key='index' 根据index来匹配dom从下面添加不会出现错误，如果从上面添加就会出现第一个被挤下来成为第二个。:key='a.id' 根据id来匹配dom就会根据id来进行依次匹配。
vue基础语法（vue2)
嗷嗷待哺的簸箕板
02-03 1088
vue基础语法 定义在类中的是方法 方法： name:function(){ } name(){ } {{}}:用在内容中，而不为属性 调用function一般要加（） v-once:修改一次，第一次改完，第二次后都不改变 v-tml:将tml标签解析 <div v-tml="data"></div> v-text:解析成文本 与{{data}}用法类似，而且覆盖后面的{{data}}数据 <div v-text="data"></div> v-p
Vue中v-show,v-if,v-bind,v-text,v-html指令学习自用
是千汇的博客
09-16 378
v-show 指令 v-show的作用是根据表达式的真假，切换元素的显示和隐藏 本质是改变元素中display的状态显示，false的意思是：diplay:none true则默认显示 实例: 在实现一个vue实例的情况下，1.jpg显示，2.jpg则不显示 <img src="../img/1.jpg" v-show="true" /> <img src="../img/2.jpg" v-show="false" /> 下面是一个实例，通过Vue的data中属性的判定实现图片状
Vue之表达式 v-html、{{}} 、v-pre 、v-if 、
ljljlj1993的博客
05-28 6037
v-html 如果想输出的是html不是纯文本，那么可以使用v-html <html> <head> <meta charset="utf-8" /> <title>示例5 指令</title> </head> <body> <div id="app"> <p v-if="...
v-text和v-bind的区别
最新发布
07-28
- *3* [Vue学习 v-html，v-text，v-on，v-bind，v-if，v-show](https://blog.csdn.net/qq_53847656/article/details/126167383)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

·傻蛋儿·

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

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

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

打赏作者

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

抵扣说明：

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

余额充值