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

最新推荐文章于 2024-09-11 15:01:40 发布

土拨鼠的忧伤丶

最新推荐文章于 2024-09-11 15:01:40 发布

阅读量276

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue.js学习笔记文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/DDDDDecade/article/details/109801856

Vue.js学习笔记专栏收录该内容

17 篇文章

订阅专栏

本文档详细介绍了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属性去除，元素便显示出来