Vue.js学习笔记——1.基本插值操作指令

本文档详细介绍了Vue.js的基本插值操作指令,包括mustache语法、v-once、v-html、v-text、v-pre和v-cloak。通过实例展示了每个指令的功能和用法,帮助理解它们在不同场景下的应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

基本插值操作指令(一)

1.mustache语法

{{message}}
即双大括号,插值表达式。作用:将data中文本数据插入到HTML中
举例:

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

<div id="app">
  <h2>{{message}}</h2>
  <h2>{{message}},qbj</h2>
  <h2>{{firstname+' '+lastname}}</h2>
  <h2>{{firstname}} {{lastname}}</h2>
  <h2>{{counter * 2}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊",
      firstname:"kobe",
      lastname:"bryant",
      counter:100
    }
  })
</script>

</body>
</html>

执行结果:mustache执行结果

mustache语法中不仅可以写变量,也可以写简单的表达式

2.v-once

该指令表示元素和组件只渲染一次,不会随着数据的改变而改变
该指令后面不需要跟任何表达式(如v-for="")
语法:

<element v-once></element>

举例:

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

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

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊",
    }
  })
</script>

</body>
</html>

执行结果:v-once执行结果
在控制台更改message的值
改变message的值
使用v-once指令的元素并没有响应式地改变

message显示

3.v-html

会将{{}}里的字符串按照HTML格式进行解析,并显示对应的内容。
语法:

<element v-html="url"></element>

举例:

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

<div id="app">
  <h2>{{url}}</h2>
  <h2 v-html="url"></h2>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊",
      url:"<a href=\"https://www.bilibili.com/\">bilibili干杯</a>"
    }
  })
</script>

</body>
</html>

执行结果:v-html执行结果
直接使用{{}}会将字符串直接显示出来,使用v-html指令则会解析成a标签

4.v-text

作用和mustache相似:都是用于将数据显示在界面中
v-text通常情况下,接受一个string类型
语法:

<element v-text="message"></element>

举例:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="app">
  <h2>{{message}},我不好</h2>
  <h2 v-text="message">,我不好</h2>

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊"
    }
  })
</script>

</body>
</html>

执行结果:
v-text执行结果

拥有v-text属性的元素会直接将元素内的内容覆盖,并不是很灵活。
实际开发过程中使用mustache语法较多。

5.v-pre

用于跳过这个元素和它子元素的编译过程,用于显示原本的mustache语法
语法:

<element v-pre>{{message}}</element>

举例:

<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

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

</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊"
    }
  })
</script>

</body>
</html>

执行结果:v-pre执行结果
不希望vue解析元素时,使用v-pre就能将元素内容原封不动地展示出来

6.v-cloak

cloak:斗篷
某些情况下,浏览器可能回直接显示出未编译的mustache标签,为了良好的用户体验,可以使用v-cloak指令,在元素被vue解析后,v-cloak属性会被删除,我们就可以利用此特性进行一些操作
语法:

<element v-cloak>{{message}}</element>

举例:

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

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

</div>

<script src="../js/vue.js"></script>
<script>
//利用setTimeout延时执行1s模拟卡顿
  setTimeout(function () {
    const app = new Vue({
      el:"#app",
      data:{
        message:"你好啊"
      }
    })
  },1000)
</script>

</body>
</html>

执行结果:利用setTimeout延时执行1s模拟卡顿
这里使用了setTimeout延时执行1s来模拟卡顿,在这1s中用户就会看到一个未解析的元素,第二个元素因为使用了v-cloak指令,并在style中赋予了display:none的样式,所以没有显示出来
vue解析后
在1s后vue解析元素,并将元素中的v-cloak属性去除,元素便显示出来

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值