Vue学习笔记之Vue插值的操作

最新推荐文章于 2024-02-01 17:54:39 发布
最新推荐文章于 2024-02-01 17:54:39 发布
阅读量801 收藏 1
点赞数
分类专栏： vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45525630/article/details/121799025
版权

秋招过后，意识到自己的不足，最近又重新复习了一下codewhy老师的Vue，今天跟大家分享一下Vue插值的操作

文章目录

一、Mustache语法

我们使用Vue的时候，想要将data里面定义的数据放到HTML里面来显示，这时候就会用到我们的Mastache语法，也就是双大括号{{}}的一个用法

示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <h3>{{name}}</h3>
      <h3>{{firstname + lastname}}</h3>
      <h3>{{count*10}}</h3>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          name: 'XWen',
          firstname: 'X',
          lastname: 'Wen',
          count: 0,
        },
        methods: {},
      })
    </script>
  </body>
</html>

在这里插入图片描述
可以看到Mastache语法除了我们常见的{{}}用法外，还可以写简单的表达式

二、v-once指令的用法

由于Vue是响应式的，数据改变相应的界面也会改变，但是有时候，我们在开发的过程中可能会遇到这种需求，就是我们只希望数据第一次拿出来展示，之后数据的改变不让他进行变化，那我们就可以用v-once

示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <h3>{{name}}</h3>
      <h3 v-once>{{name}}</h3>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          name: 'Xwen',
        },
        methods: {},
      })
    </script>
  </body>
</html>

在这里插入图片描述

我们在浏览器控制台中，改变name的值，按理来说，这里的值应该都会改变才对，但是此时我们发现加了v-once的h3标签内的name值没有改变，这就印证了v-once的用法

三、v-html指令的用法

有时候，服务器返回给我们的data数据很可能是html格式的，如果我们继续用Mastache的一个语法的话，就会把它当成字符串来解析，这样就不太好，我们希望它以html的格式直接解析出来，这就要用到v-html

示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <h3>{{url}}</h3>
      <h3 v-html="url"></h3>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          url: '<a href="https://www.baidu.com">百度一下</a>',
        },
        methods: {},
      })
    </script>
  </body>
</html>

在这里插入图片描述

可以看到，我们使用了v-html之后他会把data里面的数据当成html来进行解析，就可以满足我们的需求，而使用Mastache语法就是以字符串的形式解析

四、v-text指令的用法

v-text指令的话用起来跟我们直接用Mastache语法差不多，而且它还比较不灵活，比较少用了解即可

示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <h2>{{name}}是我的名字</h2>
      <h2 v-text="name">是我的名字</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          name: 'Xwen',
        },
        methods: {},
      })
    </script>
  </body>
</html>

在这里插入图片描述
可以看到就是，我们如果想要在后面跟点什么就不行了，会覆盖掉，所以有些鸡肋这个指令

五、v-pre指令的用法

有时候我们不希望Vue帮我们解析，就是展示原来的样子，这时候就可以用v-pre指令

示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <h3>{{name}}</h3>
      <h3 v-pre>{{name}}</h3>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          name: 'Xwen',
        },
        methods: {},
      })
    </script>
  </body>
</html>

在这里插入图片描述

可以看到就是下一个name没有解析出来因为这里使用了v-pre，所以它就是不让Vue去解析，展示原本的样子也就是标签里面放字符串渲染出来

六、v-cloak指令的用法

我们都知道浏览器是从上到下执行我们的html代码的，所以有时候可能我们的js代码卡住了还没来得及渲染就会有Mastache语法标签一闪而过的画面，这时我们就得通过v-cloak指令解决一下

示例:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      <h3>{{name}}</h3>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      setTimeout(function () {
        var app = new Vue({
          el: '#app',
          data: {
            name: 'Xwen',
          },
          methods: {},
        })
      }, 1000)
    </script>
  </body>
</html>

在这里插入图片描述
这里我们采用setTimeout来模拟js代码卡住的场景

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      [v-cloak] {
        display: none;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <h3 v-cloak>{{name}}</h3>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      setTimeout(function () {
        var app = new Vue({
          el: '#app',
          data: {
            name: 'Xwen',
          },
          methods: {},
        })
      }, 1000)
    </script>
  </body>
</html>

在这里插入图片描述
使用了v-cloak之后我们发现，即便是js代码有时候卡住了，也是慢一点显示出来，Mastache标签不会显示出来，v-cloak的原理就是Vue解析之前，元素会有v-cloak这个属性，解析后会消失，所以巧妙解决了这个一闪而过的问题

总结

以上就是今天要跟大家分享的Vue插值的操作

vegetable-WEN
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue学习之插值的五种方式
weixin_42565757的博客
10-26 1008
插值 文本 数据绑定最常见的方式就是使用{{...}}进行文本插值： <body> <div id = "app"> {{name}}{{age}} </div> <script> var app = new Vue({ el:'#app', data:{ name:'lisi',
Vue的基础知识之插值操作
Chil_G的博客
09-08 1642
1、Vue是一个渐进式框架
vue的插值操作
韩旭不会敲代码吧的博客
07-19 2256
插值操作：将vue实例中data里面的某个值，插到页面DOM元素上进行显示。 并改变data值可以动态改变显示。 1、Mustache 1.Mustache (胡子/胡须) 可以通过Mustache语法(也就是双大括号{{}})来进行插值操作； 数据绑定最常见的形式就是使用“Mustache”语法的文本插值 2.Mustache语法，不仅仅可以直接写变量，也可以写简单的表达式 <div id="app"> <h2>{{message}}</h2&g.
Vue.js插值
laok_的博客
02-06 644
vue.js在插入数值的时候有三种方式1、插入纯文本插入纯文本是最简单的方式，使用双大括号就能插入想要的值。<span>{{ msg }}</span> mustache也可以在属性中使用<div id="item-{{ id }}"></div> 就能显示所需要显示的文本信息了。但是有时候，我们想要插入的html文本，这时候要怎么办呢？在插入html的时候有两种方式，一种是用三个大括号的形式，这种
Vue学习（一）插值操作
zyugat的博客
11-06 362
Vue学习——插值的操作 Day1 文章目录Vue学习——插值的操作前言一、Vue的实例二、插值的操作1.v-if2.v-bind3.v-on4.v-model5.v-for6.v-html8.v-pre9.v-cloak10.v-text总结 前言 此文章根据官方文档及些网络资料编写，仅供个人使用。 提示：以下是本篇文章正文内容，下面案例可供参考 一、Vue的实例 Vue实例的简单实现， <div id="app"> <h2>{{message}}</h
JavaWeb03-Vue学习笔记
08-22
Vue学习笔记 Vue是一个渐进式的JavaScript框架，用于构建用户界面。Vue的核心思想是将组件化的思想应用于前端开发，通过组件的方式来构建应用程序。 一、Vue简介 Vue是一个基于MVVM（Model-View-ViewModel）模式...
vue学习笔记
11-22
本学习笔记将涵盖Vue的基础概念、核心特性以及常见应用场景，帮助初学者建立起对Vue的全面理解。 一、Vue.js简介 Vue.js的核心理念是通过声明式的模板语法来简化DOM元素的更新，实现数据驱动视图。它采用MVVM...
Vue学习笔记
04-29
Vue的学习笔记通常会包含以下核心知识点： 1. **基础概念**：Vue的核心特性包括数据绑定、指令系统、组件化、生命周期、虚拟DOM等。数据绑定允许开发者用双大括号`{{ }}`在HTML中直接展示Vue实例中的数据。指令系统...
vue学习笔记1
08-03
在Vue中，`v-`前缀是Vue自定义指令的标志，它们提供了一种声明式的方式去操作DOM。 在开始学习Vue时，我们首先会遇到`<div v-cloak>{{msg}}</div>`这样的代码。`v-cloak`是一个特殊的指令，用于解决页面加载时，Vue...
VUE学习笔记
07-17
Vue的学习笔记将涵盖其核心概念、基本用法以及实际应用。 一、Vue的核心概念 1. 双向数据绑定：Vue采用MVVM（Model-View-ViewModel）模式，通过`v-model`指令实现了视图与数据模型之间的双向绑定，使得数据变化时...
Vue插值表达式及常用指令
最新发布
qq_44741577的博客
02-01 1782
插值表达式是vue框架提供的一种在html模板中绑定数据的方式，使用。
Vue学习笔记（一）插值语法和指令
weixin_46015333的博客
12-31 2660
文章目录一、Vue是什么？二、知识点2.1.基础结构2.2.模板语法2.2.1.插值语法{{}}2.2.指令v-htmlv-oncev-bindv-if 、v-else-if、v-elsev-showv-on:clickv-for总结 一、Vue是什么？ Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各
Vue基础语法-插值操作
好记性不如烂键盘
08-28 645
插值操作 插值运算符 语法： {{数据}} 插值运算符可以显示也可以对数据进行计算 代码： <div id="app"> <h2>{{firstName}} {{lastName}}</h2> <h2>年龄：{{count*2}}</h2> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ fi
Vue中的插值操作
qq_61541602的博客
04-19 1511
1.Mustache(英文:胡子)语法 Mustache也就是我们常使用的双大括号 作用: 将data中的文本数据，插入HTML中(响应式)，在其中不仅可以直接写变量，也可以写简单的表达式。 例: <div id="app"> <h2>{{message}}</h2> </div> //所下载的Vue <script src="../vue.js"></script> <script> con
Vue插值操作
helongzhi的博客
07-27 217
​这里通过延时1秒模拟加载卡住的状态，结果一开始不显示message的值，div元素中有v-cloak的属性，1秒后显示message变量的值，div中的v-cloak元素被移除。这样的字符串，而输出被html自己转化的超链接。这个标签，在vue解析完成之后，v-cloak标签被移除。到message变量“你好啊”的变化，这样闪动的变化，会造成用户体验不好。v-text会覆盖dom元素中的数据，相当于js的innerText方法。有时候因为加载延时问题，例如卡掉了，数据没有及时刷新，就造成了页面显示从。..
【vue笔记1】-插值、表达式、分隔符、指令
小小喵的博客
08-08 4505
最近打算重温一遍VUE的知识，正好总结一份笔记。 插值 基本用法 &amp;amp;amp;lt;span&amp;amp;amp;gt;Text:{{text}}&amp;amp;amp;lt;/span&amp;amp;amp;gt; &amp;amp;amp;lt;span v-text=&amp;amp;quot;text&amp;amp;quot;&amp;amp;amp;gt;&amp;amp;amp;lt;/s
Vue基础语法(插值、指令、过滤器、 计算属性和监听属性)
byg
08-01 694
Vue基础语法 插值.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> <title>指令</ti...
vue之插值
honey_seve7n的博客
09-06 711
插值 文本 数据绑定最常见的形式就是使用mustache语法{{}}的文本插值 如 &lt;p&gt;Message:{{Msg}}&lt;/p&gt;   Mustache标签上中会被替换上数据对象上msg属性的值，无论何时，绑定的数据上对象的msg发生变化，插值部分的内容也会发生变化 一次性插值，数据改变不会跟随改变，使用v-once指令 &lt;span v-once&gt;...
vue学习笔记 学习笔记
05-07
Vue学习笔记 目录 1. 父子组件通信 1.1 props 和 $emit 1.2 $parent/$children 1.3 $ref Vue.js是一款流行的JavaScript框架，用于构建可复用的组件化应用程序。在Vue中，组件通信是一个非常重要的概念，它允许...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值