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>