1、

　　通過new的方式來得到了Vue的實例，在new通過一個對象來對Vue的實例配置（el，data）；
接觸了雙花括號(mustache/interpolation)的語法:可以讀取變量的值 顯示在調用的元素的innerHTML中。

2、雙花括號

　　語法： <any>{{表達式}}</any>
　　作用：執行表達式，將表達式的結果 輸出到當前調用元素的innerHTML中

3、指令

　　循環、選擇判斷、顯示隱藏。。。

　　循環指令
　　語法1：
　　<any v-for=" tmp in 集合"></any>根據in關鍵詞後的集合，去循環創建多個標簽，

　　語法2：
　　<any v-for="(value,key) in 集合"></any>

　　選擇指令
　　<any v-if="表達式"></any>

　　v-if指令 ： 根據表達式執行的結果的真假 來選擇是否要掛載到DOM
　　v-else-if
　　v-else

3、Vue事件綁定

　　<any v-on:eventName="處理函數名字"></any>
　　通過v-on去給指定的事件綁定一個處理函數

註意事項：
方法在定義時，要放在Vue實例的methods屬性
new Vue({
　　methods:{
　　　　handleClick:function(){
　　　　　　//做一些操作
　　　　}
　　　}
})

事件綁定支持支持一種簡寫形式：
<button v-on:click="handleClick">clickme</button>
　　//通過@後邊跟上事件的名字，和v-on:是一樣的效果
<button @click="handleClick">clickme</button>

　　Vue.js 為 v-on 提供了 事件修飾符。通過由點(.)表示的指令後綴來調用修飾符。
　　v-on:submit.prevent="handleSubmit"4、Vue其它常用指令

v-bind
　　將變量中的值 通過 v-bind 綁定到元素指定的屬性
img v-bind:src="myImage"
　　a v-bind:href="myLink"
v-bind:style=‘{backgroundColor:myBGColor}‘
v-bind:class=‘{myRed:isRed}‘
v-bind:disabled="!isValid"
v-bind也支持簡寫：a v-bind:href="myLink" ===》 a :href="myLink"

v-show
　　v-show="表達式" 根據表達式執行的結果的真假 來切換display顯示還是隱藏
v-text
　　v-text=‘變量‘ 根據變量更新對應的文本內容
v-html
　　v-html="變量" 根據變量更新對應的innerHTML
...

5、Vue中的v-model

雙向數據綁定：
方向1：data --> view
　　之前所接觸的循環、判斷、顯示隱藏等指令，主要的功能是將數據 綁定到視圖；
方式：①雙花括號 ②常見的指令

方向2：view --》 data
　　將表單控件中 用戶操作的 結果 綁定到 數據
方式：v-model

v-model指令本身就是一個雙向數據綁定的指令：既可以將數據綁定到視圖，又可以將視圖中的結果綁定到數據。

修飾符：
.lazy - 取代 input 監聽 change 事件（在輸入完之後，失去焦點 再去更新）
.number - 輸入字符串轉為數字
.trim - 輸入首尾空格過濾

vue的基礎使用