VUE：模板語法（小白自學）
阿新 • • 發佈：2018-10-31
VUE：模板語法
一：何為宣告式
安裝規定的語法，去實現一些效果（不需要管流程）。
二：模板語法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 1 模板的理解：動態的html頁面，包含了一些js語法程式碼 雙大括號表示式 指令（以v-開頭的自定義標籤屬性） 2 雙大括號表示式 語法：{{exp}} 或 {{{exp}}} 功能：向頁面輸出資料 可以呼叫物件的方法 3 指令一：強制資料繫結 功能：指定變化的屬性值 完整寫法： v-bind:xxx='yyy' //yyy會作為表示式解析執行 簡潔寫法： :xxx='yyy' 4 指令二：繫結事件監聽 功能：繫結指定事件名的回撥函式 完整寫法： v-on:click='xxx' 簡潔寫法： @click='xxx'--> <div id="app"> <h2>1、雙大括號表示式</h2> <p>{{msg}}</p> <p>{{msg.toUpperCase()}}</p> <!--msg是變數，可以寫js表示式--> <p v-text="msg2"></p> <!-- 寫入文字 value textContent--><p v-html="msg2"></p> <!-- 轉換成html語句 innerHTML--> <h2>2、指令一:強制資料繫結</h2> <img v-bind:src="imgUrl" /> <img :src="imgUrl" /> <h2>3、指令二：繫結事件監聽</h2> <button v-on:click="test">點選有驚喜</button> <button @click="test2(msg)">點選還有驚喜</button> <!-- 可以傳變數--> </div> <script type="text/javascript" src="../js/vue.js" ></script> <script type="text/javascript"> new Vue({ el:'#app', data:{ msg:'taosir is studing...', msg2:'<a href="http://www.baidu.com">taosir is here!</a>', imgUrl:'https://www.baidu.com/img/baidu_jgylogo3.gif' }, methods:{ test(){ alert("意不意外！"); }, test2(m){ alert(m); } } }) </script> </body> </html>