Vue内置指令

最新推荐文章于 2024-09-17 15:40:27 发布

sutneucoder

最新推荐文章于 2024-09-17 15:40:27 发布

阅读量241

点赞数

分类专栏： Web开发文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44417441/article/details/126027226

版权

Web开发专栏收录该内容

20 篇文章 1 订阅

订阅专栏

Vue支持内置指令（v-on、v-bind等）和自定义指令，本文主写内置指令。

内置指令

部分内置指令	作用
v-bind	单向绑定解析表达式，可简写为 :xxx
v-model	双向数据绑定
v-for	遍历数组、对象、字符串
v-on	绑定事件监听，可简写为@
v-if	条件渲染（动态控制节点是否存在）
v-else	条件渲染（动态控制节点是否存在）
v-show	条件渲染（动态控制节点是否展示）

v-text

作用：向其所在的标签插入文本

插值语法与 v-text 对比

在这里插入图片描述

区别：使用插值语法可以在变迁内进行拼接。使用v-text，会进行标签内的内容的整体替换。更多时候使用插值语法，因为插值语法更加灵活。

v-text不能解析标签，把所有字符串当成字符串进行解析。比较安全，避免xss。

总结：

v-text指令：

作用：向其所在的节点中给渲染文本内容。
与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

v-html

v-html支持结构解析，v-text不支持结构解析。

在这里插入图片描述

v-html的安全性问题：

双击写两个cookie,然后刷新。浏览器会将cookie存在硬盘中。

在这里插入图片描述

js获取cookie

在这里插入图片描述

js代码str2能被v-html解析

在这里插入图片描述

js恶意代码str2能被v-html解析，把当前网站全部cookie带走，带到恶意网站
在这里插入图片描述

在这里插入图片描述

cookie被带到了另一个网站了。如果你的cookie里边的账号信息被带到了恶意网站，你的账号就很容易被别人登录了。

浏览器为了避免这种危险，做出了校验。HttpOnly被选中时，document.cookie显示不出对应的key-value信息。当所有的HttpOnly被选中时，document.cookie是一个空字符串。

在这里插入图片描述

选中HttpOnly的cookie只能被http连接带走。

在这里插入图片描述

总结：
v-html指令：

作用：向指定节点中渲染半酣html结构的内容。
与插值语法的区别：
1. v-html会替换掉节点中所有的内容，{{xx}}不会
2. v-html可以识别html结构
严重注意：v-html有个安全问题！！！
1. 在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。
2. 一定要在可信内容上使用v-html,永远不要用在用户提交的内容。

v-cloak

js阻塞

head标签里写引入js文件

数字是执行顺序，如果网速慢，以这种结构写的html代码，当引入js文件需要5s时，那么这5s在页面上什么也看不到。

在这里插入图片描述

另一种方式引入js

在body最下方引入js

此处图片中代码不对，js代码应该在body最下方位置。先执行绿色，然后红色（等5秒），然后粉色。【用户会看到未经解析的模板】

在这里插入图片描述

v-cloak会在Vue接管容器的一瞬间将v-cloak删掉。所以开始加载时，利用v-cloak的css属性设置，能够启到加载时，v-vloak指令绑定的元素不显示的作用，当Vue接管，v-cloak被删除，此时数据也得到解析，页面能正常显示。所以，v-cloak配合css能够防止网页闪现。
在这里插入图片描述

总结：
v-cloak指令（没有值）：

本质是一个特殊属性，Vue容器创建完毕并接管容器后，会删掉v-cloak属性。
使用css配合v-cloak可以解决网速慢时页面展示出{{xx}}的问题。

v-once

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-once</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h1 v-once>初始的n是{{n}}</h1>
        <h1>当前的n是{{n}}</h1>
        <button @click="n++">点我n+1</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false
    new Vue({
        el:"#root",
        data:{
            n:1,
        },
    })
</script>
</html>

总结：

v-once指令：

v-once所在节点在初次动态渲染后，就视为静态内容了。
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

v-pre指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-once</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2 v-pre>Vue其实很简单</h2>
        <h2>当前的n是{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>
</body>
<script>
    Vue.config.productionTip = false
    new Vue({
        el:"#root",
        data:{
            n:1,
        },
    })
</script>
</html>