template基本用法 · wml_code

## 1\. template 基本结构 ~~~ <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"></div> <template id="my-app"> <h2>{{message}}</h2> </template> </body> <script src="js/vue.js"></script> <script> const App = { template:"#my-app", data(){ return{ message:"这是信息" } } } Vue.createApp(App).mount("#app"); </script> </html> ~~~ ## [](https://gitee.com/wmlzofia/learn/blob/master/vue/vue%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95.md#2%E5%9F%BA%E6%9C%AC%E6%8C%87%E4%BB%A4)2.基本指令 ~~~ v-text 等价于 {{}} v-html 显示原标签内容 v-clock v-pre 显示原内容例如{{message}} 不会解析 v-once 只渲染一次例如当我有一个计算属性的时候加上v-once指令后我们只显示原先数据得不到计算后的数据 ~~~ ## [](https://gitee.com/wmlzofia/learn/blob/master/vue/vue%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95.md#3v-bing-v-on)3.v-bing v-on `v-bind`可以简写为`:` `v-on`可以简写为`@` ~~~ data() { return { imgUrl: "https://avatars.githubusercontent.com/u/10335230?s=60&v=4", link: "https://www.baidu.com" } }  <img v-bind:src="imgUrl" alt=""> <a v-bind:href="link">百度一下</a>  <img :src="imgUrl" alt=""> <img src="imgUrl" alt=""> 可以是对象语法或数组语法  <div :class="{'active': isActive}">呵呵呵呵</div> <button @click="toggle">切换</button>  <div :class="{active: isActive, title: true}">呵呵呵呵</div>  <div class="abc cba" :class="{active: isActive, title: true}"> 呵呵呵呵 </div>  <div class="abc cba" :class="classObj">呵呵呵呵</div>  <div class="abc cba" :class="getClassObj()">呵呵呵呵</div> <div :class="['abc', title]">哈哈哈哈</div> <div :class="['abc', title, isActive ? 'active': '']">哈哈哈哈</div> <div :class="['abc', title, {active: isActive}]">哈哈哈哈</div> style 对象语法  <div :style="{color: finalColor, 'font-size': '30px'}">哈哈哈哈</div> <div :style="{color: finalColor, fontSize: '30px'}">哈哈哈哈</div> <div :style="{color: finalColor, fontSize: finalFontSize + 'px'}">哈哈哈哈</div>  <div :style="finalStyleObj">呵呵呵呵</div>  <div :style="getFinalStyleObj()">呵呵呵呵</div> style 数组语法 <div :style="[style1Obj, style2Obj]">哈哈哈</div> <img :src="" alt=""> <a :href=""></a> <div :class></div> 动态绑定属性名称 <div :[name]="value">哈哈哈</div> 直接绑定一个对象 <div :="info">哈哈哈哈</div> info: { name: "why", age: 18, height: 1.88 } ~~~