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 } ~~~