：v-text、v-html、v-pre
v-html & v-text
双大括号会将数据插值为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：
<div v-html="rawHTML"></div> <div v-text="rawHTML"></div> <div>{{rawHTML}}</div>
在网站上动态渲染任意 HTML 是非常危险的，因为这非常容易造成 XSS 漏洞。请仅在内容安全可信时再使用 v-html，并且永远不要使用用户提供的 HTML 内容(script也属于HTML内容)。
v-pre
元素内具有 v-pre，所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。
<div v-pre>{{ rawHTML }}</div>
完整案例: 02_template/02_text.html
<!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>v-html v-text v-pre</title> </head> <body> <div id="app"> <div v-html="str"></div> <div v-text="str"></div> <div>{{str}}</div> <!-- 内部的代码不要vue的解析器解析 --> <div v-pre>{{str}}</div> </div> </body> <script src="../lib/vue.global.js"></script> <script> Vue.createApp({ data () { return { str: '<h1>hello</h1>' } } }).mount('#app') </script> </html>
属性绑定
学习：v-bind 以及简写形式
双大括号不能在 HTML attributes 中使用。想要响应式地绑定一个 attribute，应该使用 v-bind 指令：
<div v-bind:id="myId"></div>
如果绑定的值是 null 或者 undefined，那么该 attribute 将会从渲染的元素上移除。
因为 v-bind 非常常用，提供了特定的简写语法：
<div :id="myId"></div>
开头为 : 的 attribute 可能和一般的 HTML attribute 看起来不太一样，但它的确是合法的 attribute 名称字符，并且所有支持 Vue 的浏览器都能正确解析它。
布尔型 attribute 依据 true / false 值来决定 attribute 是否应该存在于该元素上。disabled 就是最常见的例子之一。
<button :disabled="flag">Button</button>
当 flag 为真值或一个空字符串 (即 <button disabled="">) 时，元素会包含这个 disabled attribute。而当其为其他假值时 attribute 将被忽略。
如果你有像这样的一个包含多个 attribute 的 JavaScript 对象：
data () { return { obj: { a: 1, b: 2 } } }
<div v-bind="obj"></div>
完整案例: 02_template/03_attribute.html
<!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>绑定属性</title> </head> <body> <div id="app"> <!-- 如果属性的值是一个变量、 number类型、boolean类型、 对象、数组、null、undefined、正则 那么需要使用绑定属性 --> <!-- <div str="str"></div> --> <div v-bind:str="str"></div> <div :num="100"></div> <div :flag="true"></div> <div :obj="{ a: 1, b: 2 }"></div> <div :arr="['aaa', 'bbb', 'ccc']"></div> <div class="null"></div> <div :class="null"></div> <div class="undefined"></div> <div :class="undefined"></div> <div reg="/^[A-Za-z0-9]+$/"></div> <div :reg="/^[A-Za-z0-9]+$/"></div> </div> </body> <script src="../lib/vue.global.js"></script> <script> Vue.createApp({ data () { return { str: "字符串" } } }).mount('#app') </script> </html>
如果属性的值是变量或者包含变量，number类型的数据，boolean类型数据，对象，数组，
null，undefined，正则，需要使用绑定属性
