<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue.js"></script> <style> [v-cloak]{ display: none; } </style> </head> <body> <div id="app"> <!-- 使用v-cloak來解決插值表達式{{msg}}的閃爍問題（防止在取到數據以前閃爍出來的msg） --> <!-- v-cloak和v-text之間作用相似，都能表達出msg，但是也有區別 --> <p v-cloak>{{msg}}</p><!-- v-cloak會將標簽中的內容全都顯示，即使在插值表達式前后加數據也都會顯示出來 --> <h4 v-text="msg"></h4><!-- v-text只會顯示msg，標簽之間如果添加其他東西則會被msg覆蓋掉；v-text沒有閃爍問題 --> <!-- v-html是將msg2數據中的數據轉換為html的頁面 --> <div v-html="msg2"></div> <!-- v-bind是提供用於綁定屬性的指令，也就是說，如果title中的值是定值則不需要v-bind，如果是一個變量， 則需要綁定v-bind才能顯示變量；也可以變量加上一個表達式 --> <input type="button" value="按鈕" v-bind:title="mytitle +'123'"> <input type="button" value="按鈕" :title="mytitle+'123'"><!-- v-bind的簡寫形式就是: --> <!-- v-on來提供時間綁定機制（如點擊按鈕觸發彈窗，鼠標覆蓋到按鈕觸發彈窗） --> <input type="button" value="按鈕" v-on:click="show"> <input type="button" value="按鈕" @mouseover="show"><!-- v-on的簡寫形式就是@ --> </div> <script> var vm=new Vue({ el:"#app", data:{ msg:"123", msg2:"<h1>我是一個大大的標簽，我大，我驕傲</h1>", mytitle:"這是一個自定義title" }, methods:{//這個methods屬性中定義了Vue中所有可用的方法 show:function(){ alert("hello") } } }) </script> </body> </html>