當我們在頁面當中引入vue.js的時候，這時候我們就可以調用vue的構造函數，來創建一個vue的實例，vue使用的基本代碼結構如下：
<!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.min.js"></script> </head> <body> <!-- view視圖 --> <div id="id"> <p>{{msg}}</p> </div> <script> // 當引入vue.js，頁面就有一個vue的構造函數 // view-model var vm=new Vue({ el:'#id', // m模塊，存儲數據 data:{ msg:'哈哈哈' } }) // vue不建議我們直接操作dom元素，而是交給vue實例 </script> </body> </html>
Vue的實例就是view-model部分，而其中的data就屬於model部分，被vue實例綁定的html區域，則是view部分
上面例子當中，{{}}這個是插值表達式，我們可以將data中定義的數據插入當中，這樣頁面就會在對應的位置，渲染出變量的值，在變量前后，我們可以添加任意的字符串，或是表達式
而常見的vue指令有v-text，v-bind，v-html，v-on
他們的使用語法都是在綁定范圍內的標簽中用於綁定標簽屬性或定義標簽內的內容,例如
<p v-text='msg'></p> <p v-html='h'></p> <input type="button" v-bind:value="value" v-bind:title="title" v-on:click="show">
其中，v-text和v-html都是會將所賦值的變量的內容渲染到對應的標簽中去，並且會覆蓋掉標簽中所寫有的內容，但是v-html能寫入html代碼並解析渲染
v-cloak指令可以用來解決閃爍問題，閃爍問題就是指在網速很慢的情況下，vue相關文件未完全加載，此時html的內容就已經被渲染出來，這是插值表達式{{}}中的變量名就會直接顯示出來，等到文件加載完畢，插值表達式才會顯示本應正確顯示的內容
給具有插值表達式的標簽添加v-cloak指令，然后在style中使用屬性選擇器，加上display ：none就可以解決問題
事件修飾符：
.prevent ,.stop,.captrue,.once,.self
.prevent就是用來阻止默認事件的，比如a標簽的跳轉
.stop就是用來阻止事件冒泡
.self則是表示元素的事件無法通過冒泡或者捕獲觸發
.once表示元素的修飾符只能觸發一次
.captrue則將元素的事件冒泡改為事件捕獲
v-if和v-show用於判斷某個標簽是否應該被渲染或者是否應該被顯示
v-if是決定這個元素是否被渲染，因此對於可能不會出現在用戶面前的標簽，建議使用v-if
v-show是決定這個元素是否被顯示，因此對於頻繁切換顯示狀態的元素，建議使用v-show
v-model指令，v-model和上面的所有指令不同，它是雙向數據綁定的指令，常和表單元素結合使用