04、模板语法-绑定

Vue的模板语法基于HTML的语法，可以在模板中申明式的绑定实例数据、事件方法。在Vue中，模板被编译成虚拟Dom渲染函数，先在虚拟Dom上进行操作，这样可以最优化Dom及操作次数，然后再渲染到正式的Dom中。
文本插值：**{{ data }}**，“Mustache”语法 (双大括号) （/ˈmʌstæʃ; məˈstɑːʃ/ 胡子），内容不支持html标签、不支持绑定。 :::warning 📢注意：安全第一

  • 不要用用户输入的内容作为 html插值，容易导致XSS攻击。
  • 插值中的JavaScript表达式不要用用户输入的内容。 :::
    1. <div id="app3">
    2.       <div>div1:{{html}}</div>
    3.       <div v-text="html">div2:</div>
    4.       <div v-html="html">div3:</div>
    5. </div>
    6. <script>
    7.       let vm2 = new Vue({
    8.               el: "#app3",
    9.               data: {
    10.                       html: "<span style='color:red'>red span{{mes}}</span>",
    11.                       mes:"hello world!",
    12.                       birthday:'2000-12-11',
    13.               },
    14.       });
    15. </script>
    image.png

    指令🔖

    指令格式：指令:参数.修饰符 = "值"
Vue指令 / 简写 描述 示例
v-text= 绑定 textContent，同{{文本插值}}（JS延迟时，有闪烁） <span v-text="msg"></> = <span>{{msg}}</>
v-html= 绑定 innerHTML，内容支持html标签（不支持绑定），需注意安全性。其他插值指令的值都不支持HTML标签，会被转义。 <div v-html="html"></div>
v-bind: = / : = 绑定HTML属性值，动态地绑定一个或多个 attribute，或一个组件 prop 到表达式 <img v-bind:src="img" :class="imgStyle">
v-model= 表单元素的值双向绑定，不支持表达式 <input type="date" v-model="birthday">
v-show= 值为真元素显示（切换 display），适用于频繁切换显示。 <div v-show="show ==='方案1'">方案1</div>
v-if= 值为真才渲染，否则不会创建或销毁已有元素。支持