【Vue】基础系列（二）模板语法 - 插值语法 - 指令语法
Vue-基础系列(二)
Vue有很多模板语法特别好用，就是在HTML中写一些Vue定义的一些模板语法，可以快速的展现数据，绑定方法等。这也就是Vue上手很快的原因之一。
模板的理解
模板就是动态html页面，这里面包含了一些js语法代码
Vue的模板语法分为两种，分别是：
【插值语法】双大括号表达式 （“Mustache”语法）【一个】
【指令语法】指令（以v-开头的自定义标签属性）【很多】
插值语法：
功能：用于解析标签体内容，向页面输出数据
写法：
{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性，可以调用对象的方法备注：里面写js表达式：有返回值的js代码，而不是js语句
指令语法：
功能：用于解析标签（包括：标签属性、标签体内容、绑定事件…..）
举例：
v-bind:href="xxx"或 简写为:href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性备注：Vue中有很多的指令，且形式都是：
v-????
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>模板语法</title>
<!– 引入Vue –>
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!– 准备好一个容器–>
<div id="root">
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<hr/>
<h1>指令语法</h1>
<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
<a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'jack',
school:{
name:'百度',
url:'https://www.baidu.com',
}
}
})
</script>
</html>
指令语法：强制数据绑定 v-bind:
功能：指定变化的属性值
完整写法
v-bind:xxx='yyy' // yyy会作为表达式解析执行
简洁写法
:xxx='yyy'
单向数据绑定
语法：v-bind:href ="xxx" 或简写为 :href ="xxx"
特点：数据只能从 data 流向页面
双向数据绑定 指令 v-model
语法：v-mode:value="xxx" 或简写为 v-model="xxx"
特点：数据不仅能从 data 流向页面，还能从页面流向 data
指令语法：绑定事件监听 v-on:
功能：绑定指定事件名的回调函数
完整写法
v-on:click='xxx'
v-on:keyup='xxx(参数)'
v-on:keyup.enter='xxx'
简洁写法
@click='xxx'
@keyup='xxx'
@keyup.enter='xxx'
v-text与v-html
在Vue.js中，v-text和v-html都是用于更新DOM元素内容的指令，但它们的用途和行为有所不同
v-text
功能：v-text指令用于将文本内容插入到DOM元素中，并且会覆盖元素中的所有现有内容。与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
安全性：v-text会自动对插入的内容进行HTML转义，防止XSS攻击。
示例代码
<!DOCTYPE html>
<html>
<head>
<title>Vue v-text Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-text="message"></p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<strong>Hello Vue!</strong>'
}
});
</script>
</body>
</html>
解释：v-text="message"将message的数据绑定到<p>元素中，并以纯文本形式显示内容，即使message包含HTML标签也会被转义为文本。
渲染结果：
<p><strong>Hello Vue!</strong></p>
v-html
功能：v-html指令用于将HTML内容插入到DOM元素中，并且会覆盖元素中的所有现有内容。
安全性：v-html不会对插入的内容进行HTML转义，因此它会直接渲染HTML标签。这意味着，如果插入的内容来自不受信任的源，可能会引发XSS攻击风险。因此，在使用v-html时要非常小心，确保插入的HTML内容是安全的。
示例代码
<!DOCTYPE html>
<html>
<head>
<title>Vue v-html Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-html="message"></p>
</div>
<script>
new Vue({
el: '#app',
data: {
message: '<strong>Hello Vue!</strong>'
}
});
</script>
</body>
</html>
解释：v-html="message"将message的数据绑定到<p>元素中，并将其作为HTML内容渲染。HTML标签在内容中会被正常解析并显示为HTML。
<p><strong>Hello Vue!</strong></p>
区别总结
v-text：用于插入纯文本内容，自动进行HTML转义，安全性较高。v-html：用于插入HTML内容，不进行转义，直接渲染HTML标签，需注意潜在的安全风险。
在选择使用v-text或v-html时，考虑到安全性，通常建议尽可能使用v-text，只有在确实需要动态插入和渲染HTML内容时才使用v-html，并确保插入的内容是安全的。
条件渲染指令
在Vue.js中，条件渲染指令用于根据表达式的结果动态地控制DOM元素的显示或隐藏。主要的条件渲染指令有 v-if、v-else-if、v-else 和 v-show。
v-if 指令
功能：v-if 指令用于根据表达式的布尔值决定是否在DOM中渲染元素。如果表达式为 true，则渲染该元素；否则移除该元素及其子元素。
性能：v-if 是“真正的”条件渲染，因为在条件为 false 时，Vue 不会渲染元素和子元素，因此在性能上比 v-show 更节省资源，尤其是在切换频率较低的场景中。
示例代码
<!DOCTYPE html>
<html>
<head>
<title>Vue v-if Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="isVisible">This text is conditionally rendered.</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
});
</script>
</body>
</html>
解释：当 isVisible 为 true 时，<p> 元素会被渲染；当 isVisible 为 false 时，该元素会从DOM中移除。
v-else-if 指令
功能：v-else-if 是 v-if 的延伸，用于添加多个条件。如果前面的 v-if 或 v-else-if 条件不满足，而当前条件满足时，该元素会被渲染。
示例代码
<!DOCTYPE html>
<html>
<head>
<title>Vue v-else-if Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="type === 'A'">Type A</p>
<p v-else-if="type === 'B'">Type B</p>
<p v-else-if="type === 'C'">Type C</p>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'B'
}
});
</script>
</body>
</html>
解释：当 type 为 ‘B’ 时，<p> 元素显示 “Type B”；若 type 为 ‘A’ 或 ‘C’，则显示对应内容。
v-else 指令
功能：v-else 指令用于在前面的 v-if 和 v-else-if 条件都不满足时渲染元素。
示例代码
<!DOCTYPE html>
<html>
<head>
<title>Vue v-else Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="type === 'A'">Type A</p>
<p v-else-if="type === 'B'">Type B</p>
<p v-else>Type C</p>
</div>
<script>
new Vue({
el: '#app',
data: {
type: 'C'
}
});
</script>
</body>
</html>
解释：当 type 既不是 ‘A’ 也不是 ‘B’ 时，<p> 元素显示 “Type C”。
v-show 指令
功能：v-show 指令也用于条件渲染，但与 v-if 不同的是，v-show 仅控制元素的 display CSS 属性（显示或隐藏），不会从DOM中移除元素。
示例代码
<!DOCTYPE html>
<html>
<head>
<title>Vue v-show Example</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p v-show="isVisible">This text is conditionally shown.</p>
</div>
<script>
new Vue({
el: '#app',
data: {
isVisible: true
}
});
</script>
</body>
</html>
解释：当 isVisible 为 true 时，<p> 元素显示；当 isVisible 为 false 时，<p> 元素隐藏（display: none;），但仍然保留在DOM中。
v-if vs v-show
v-if：适合在需要条件切换频率较低的场景中使用，因为它会在条件为 false 时移除元素，节省性能。
v-show：适合在需要频繁切换显示的场景中使用，因为它仅切换 display 属性，不涉及DOM元素的移除和重建，切换速度较快。
使用v-if的时候，元素可能无法获取到，而使用v-show一定可以获取到
总结
v-text: 更新元素的 textContentv-html: 更新元素的 innerHTMLv-if: 如果为true, 当前标签才会输出到页面v-else: 如果为false, 当前标签才会输出到页面v-show: 通过控制display样式来控制显示/隐藏v-for: 遍历数组/对象v-on: 绑定事件监听, 一般简写为@v-bind: 强制绑定解析表达式, 可以省略v-bindv-model: 双向数据绑定ref: 为某个元素注册一个唯一标识, vue对象通过$refs属性访问这个元素对象v-cloak: 使用它防止闪现表达式, 与css配合: [v-cloak] { display: none }
事件修饰符
.stop：阻止事件冒泡。例如，@click.stop会阻止点击事件继续向上冒泡到父元素。
.prevent：阻止默认事件。例如，@submit.prevent会阻止表单的提交行为。
.capture：使用事件捕获模式而不是冒泡模式。默认情况下，事件是在冒泡阶段触发的，使用.capture修饰符可以改变为捕获阶段触发。
.self：只有当事件的目标是当前元素本身时才触发事件处理程序。如果事件冒泡到了目标元素的子元素，事件处理程序将不会被触发。
.once：事件只会触发一次，即使在同一个元素上多次触发该事件。
.passive：指示浏览器不应该阻止事件的默认行为。这对于滚动事件等性能敏感的事件非常有用。
