在進入Vue之前我們還是先了解一下使用Vue的面向對象的三種創建方式吧
類和對象是 面向編程中最重要的兩個概念，一定要理清
類 : 是一個抽象概念(不是實際存在),(屬性,行為)
對象 : 是實際存在的，是對象的實例化，看過幾個例子你就會明白。
在ES6之前：1、內置的構造函數；2、自定義的構造函數；3、字面量 。
1.內置的構造函數；
2.自定義的構造函數；
3、字面量 。
創建Vue實例
首先要確保你的項目引入了Vue.js，需要用他的框架就必須要引用！
創建一個vue實例非常簡單
data相當於一個儲存器，儲存了我們的數據之后然后以{{ }}的方式把結果渲染都頁面，儲存之前我們首先要綁定你相對應的HTML，el ：“”的形式綁定
我們來看下一個例子
結果是
{{ }}是可以進行一些簡單的表達式的 。
{{ }}內可以用來綁定屬性、綁定JS的表達式，那能不能綁定標簽呢，那我們來試一下
<div id = "pp">{{name}}<div>
結果是 
連標簽一同渲染出來，這顯然不是我們想要的結果。那怎么樣能夠去掉這些標簽的，所以！接下來：
Vue主要是由2大塊組成：指令、組件
1、v-html 如上面這個例子
我們只需要在div里加入v-html或者v-text 把剛才{{name}}寫在這個div里就可以了，大家可以試一下。v-html用來綁定帶有標簽的可以，v-text,綁定文本
結果：
2、v-model 一般用在表達輸入，很輕松的實現表單控件和數據的雙向綁定。
結果：
3、v-show.聽着名字就可以猜出他跟元素的顯示和隱藏有關系,v-show指令取值為true/false，分別對應着顯示/隱藏，
當see的值為false的時候是看不見p標簽里的內容的，控制台里p標簽默認添加了樣式為display ： none。給隱藏掉了，當我們把false改為true的時候，就可以看見了。
4、v-if ：下面看例子
這里用了三個指令，v-if,v-else,v-on:click和一個methods方法。
v-if ：會發現當我把f2改為false的時候，看不見內容了，再看控制台，第二個p標簽被注釋掉了，
回想一下v-show這個例子，當時控制台顯示的是display這就是這兩個指令的區別。
記住一點：如果需要頻繁切換顯示/隱藏的，就用v-show，如果運行后不太可能切換的就用v-if。.
v-if指令
5.v-else指令，在編程語言里if 和else一般都是成對出現的,vue也不例外，v-else沒有絕對的值，但是要求前面一個兄弟節點必須要使用v-if指令，記住，沒有if就沒有else。
6.v-on : click 可以簡寫為@click,@綁定一個事件。如果事件觸發了，就可以指定事件的處理函數。
7.v-once，由於p標簽有了初始值，第一次渲染時Input 和p都有內容，我們給p加了v-once之后，我們再更新mg的值時，p標簽不會發生改變
在上面的栗子里加了個 v-once 。結果：p 里面的內容不會根據輸入框輸入的而改變
once顧名思義，一次，也可以加給點擊事件，默認只能點擊一次
8.v-bind: 可以直接簡寫為 ： 這樣的方式然后綁定動態屬性比較常見的有a標簽的href,img標簽的src。
9.v-for 有時候我們data里存放的數據不只是簡單的數字或者字符串，而是數組類型或者對象，這個時候我們就要把數組的值展現到視圖上，來看栗子
（1）數組寫法：是不是覺得和for循環挺像的，沒錯，原本js也一個for循環需要很多代碼，這樣是不是特別簡單明了，原本一個li現在變成了三個
（2）對象寫法 ： 我這樣寫是為了說明v-for不僅只可以獲取值還可以獲取下標，屬性，
對象要用JSON色寫法。v-if和v-for一起使用時v-for具有更高的優先級
完 。（感謝前輩們的總結！）