关于Vue的学习笔记（九）

komish

于 2021-08-07 17:58:11 发布

阅读量63

点赞数

本文链接：https://blog.csdn.net/komish/article/details/119489601

版权

关于Vue的一些基本参数、方法及其应用规则

v-cloak

在某些情况下，我们的浏览器可能会直接显示出未编译的mustache标签。如进行以下异步操作时，浏览器显示的并不是我们预设好的：Hello world，而是将整个mustache标签以字符串的形式输出：

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

<script src = "../JS/vue.js"></script>
<script>
  setTimeout( () => {
    let app = new Vue({
      el: "#app",
      data:{
        message: "Hello world"
      },
    })
  },10000)

尽管过了10s页面依然将Hello world完整输出，但这极大影响了用户体验。

v-cloak可避免出现这种情况，只需将v-cloak插入到h2标签中，并为v-cloak设置好隐藏时样式，即可实现目标。

<style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
<div id = "app">
  <h2 v-cloak>{{message}}</h2>
</div>

该段代码表现效果为：在vue解析之前，div中存在一个属性v-cloak，此时div在页面不进行展示；解析之后，v-cloak效果消失，div内容完全展示，并解析message

v-html

在某些情况下，我们在服务器请求到的数据本身是一段html代码，如果我们直接通过mustache语法进行解析，会将html代码一起解析出来，但是我们可能希望的是仅仅解析出这段代码对应的内容。

如果我们希望解析出html展示，可以使用v-html指令：该指令后面往往跟一个string类型，并将string的html解析进行渲染。代码如下：

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

<script src = "../JS/vue.js"></script>
<script>
  let app = new Vue({
    el: "#app",
    data:{
      message: "Hello world",
      url: '<a href = "http://www.baidu.com">百度一下</a>'
    },
  })
</script>

（注：若a标签中没有跳转文字信息运行后尽管页面信息存在，但标签块大小为0，故无法跳转）

v-once

在某些情况下，我们可能不希望页面因为请求次数的增加而改变，或因数据代码的更新随意改变，这时我们可以使用v-once：该指令后面不需要跟任何表达式，且在该指令下渲染的元素和组件只会渲染一次，不会随着数据的更新而改变。代码如下：

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

<script src = "../JS/vue.js"></script>
<script>
  let app = new Vue({
    el: "#app",
    data:{
      message: "Hello world",
      url: '<a href = "http://www.baidu.com"></a>'
    },
  })

v-pre

该指令用于跳过该元素与对应子元素的编译过程，用于显示原本的mustache标签，如下所示：

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

<script src = "../JS/vue.js"></script>
<script>
  let app = new Vue({
    el: "#app",
    data:{
      message: "Hello world",
      url: '<a href = "http://www.baidu.com"></a>'
    },
  })

v-text

v-text与mustache用法相似，都是将数据渲染到页面中。v-text通常情况是接受一个string类型，且将渲染的数据全部转换为string形式，v-text无法解析图片。

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

<script src = "../JS/vue.js"></script>
<script>
  let app = new Vue({
    el: "#app",
    data:{
      message: "Hello world",
      url: '<a href = "http://www.baidu.com"></a>'
    },
  })

komish

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于Vue的学习笔记（九）

关于Vue的一些基本参数、方法及其应用规则v-cloak在某些情况下，我们的浏览器可能会直接显示出未编译的mustache标签。如进行以下异步操作时，浏览器显示的并不是我们预设好的：Hello world，而是将整个mustache标签以字符串的形式输出：<div id = "app"> <h2>{{message}}</h2></div><script src = "../JS/vue.js"></script&gt
复制链接

扫一扫