昨天開始學(xué)習(xí)vue框架，至于昨天為什么沒寫。原因有很多，其中之一就是，沒聽懂。。
然后痛定思痛，在擺了一晚上以后，開始認真學(xué)習(xí)：
首先什么是vue，在官網(wǎng)的定義中，是一種漸進式的js框架，至于什么是漸進式啥的，這些專業(yè)用詞其實dark不必理解，我們就只用清楚，vue是一個庫，可以跟jQuery類比，但他的功能要遠超jQuery。
vue，是一種結(jié)合了視圖（html）進行的編程，它不再局限于僅僅在<script>中編寫腳本代碼，而是結(jié)合了html語言，來使得編程更加高效，便捷。
（開始寫這個之前，簡易初學(xué)者不要直接使用，而是搞明白vue對象的基礎(chǔ)模板，以及vue的基本運作）
vue基礎(chǔ)指令
我認為自己不算學(xué)的非常拔尖的，但也肯定不算是差，我會用自己的理解來寫如何使用理解所有指令，所以有寫的不對的，望指教。
視圖輸出指令? v-text和v-html
該指令可以直接代替dom中的innerHtml和innerText，用來輸出數(shù)據(jù)，并替換標簽內(nèi)容。
視圖代碼：
<div v-text="name">---------------</div>
<div v-html="name">---------------</div>
vue代碼：
var vm = new Vue({
? ? ? ? ? ? el:'#app',
? ? ? ? ? ? data:{
? ? ? ? ? ? ? ? msg:'歡迎vue.js學(xué)習(xí)',
? ? ? ? ? ? ? ? name:"<h3>這個是小明<h3>"
? ? ? ? ? ? }
? ? ? ? })
這里說一下還有個v-pre，顯示默認視圖，不掛載，大家可以試試，猜猜對標的是什么dom功能
視圖屬性操作指令? v-bind
這里是一個對使用dom操作至今的我一個大考驗，我估計也是不少人接觸vue的第一個不習(xí)慣的地方。
v-bind 學(xué)過jq的應(yīng)該有印象bind方法，這里可以想一下，是對屬性進行vue功能的綁定（感覺寫的有點抽象，不理解的直接跳過）。這里上代碼展示一下這是什么：
視圖代碼：
<input type="button" value="按鈕" v-bind:title="msg">
? ? ? ? <input type="button" value="按鈕2" v-bind:title="1+1">
? ? ? ? <input type="button" value="按鈕3" v-bind:title="msg + '6666'">
? ? ? ? <input type="button" value="按鈕4" v-bind:title="msg + title">
vue代碼：
var vm = new Vue({
? ? ? ? ? ? el:'#app',
? ? ? ? ? ? data:{
? ? ? ? ? ? ? ? msg:'歡迎vue.js學(xué)習(xí)',
? ? ? ? ? ? ? ? title:"8888"
? ? ? ? ? ? }
? ? ? ? })
v-bind可以直接縮寫為：? 沒錯這里不是少寫了，就是可以直接縮寫為一個【：】
這里應(yīng)該就能初步感覺到vue所謂的視圖結(jié)合到底是什么感覺了，這里可以直接在html中進行計算，字符串拼接等。
視圖方法綁定指令? v-on
在傳統(tǒng)的dom操作中，為某個元素綁定方法，需要獲取元素，然后進行編寫調(diào)用。vue提供了更加便捷的方法。
指令代碼：
<button type="button" v-on:click="num++" >按鈕 +1</button>
? ? ? ? <button type="button" @click="num++" >按鈕 +1</button>
這里同樣v-on可以縮寫為@
視圖數(shù)據(jù)雙向綁定指令? v-model
該指令用于為視圖綁定vue數(shù)據(jù)，通過視圖操作可以反向修改vue中的數(shù)據(jù)（這里可以理解為value屬性的升級版）
?<input type="text" v-model="value">
<select v-model="selectname" >
? ? ? ? ? ? <option value="第一個值">2</option>
? ? ? ? ? ? <option value="第二個值">1</option>
? ? ? ? </select>
? ? ? ? <h2>{{selectname}}</h2>
視圖渲染指令? v-for
該指令是通過基于vue數(shù)據(jù)而進行的視圖渲染指令，也是通過遍歷的方法，對綁定元素內(nèi)的節(jié)點進行循環(huán)渲染，直到vue數(shù)據(jù)的length
<p v-for="(item,index) in lists">值：{{item}} --- 下標：{{index}}</p>
這里要注意一個問題：不在根元素上使用v-for。不然會出現(xiàn)報錯
視圖元素顯示指令? v-show和v-if
該指令應(yīng)該是相當易懂且便捷吧，通過是否滿足條件來確定是否顯示該元素，這兩者的區(qū)別，就在v-show是通過對元素添加display:none來隱藏元素；而v-if是通過增刪元素來確定元素的顯示或隱藏。
v-if 指令 每次觸發(fā)重新刪除與添加元素，消耗性能。頻繁切換效果不推薦使用
v-show 指令 通過樣式display控制顯示與隱藏，初始化消耗性能。如果隱藏標簽永遠不顯示不推薦使用
<h1 v-if="flag">這個是v-if指令</h1>
<h1 v-show="flag">這個是v-show指令</h1>
v-if相關(guān)指令? v-if v-else-if v-else
這里就是if語法的使用嘛，在同一級中會遵從if語法的機制來判斷是否顯示元素
<div v-if="flag == 'a'">
? ? ? ? ? ? A --------------------
? ? ? ? </div>
? ? ? ? <div v-else-if="flag == 'b'">
? ? ? ? ? ? B --------------------
? ? ? ? </div>
? ? ? ? <div v-else-if="flag == 'c'">
? ? ? ? ? ? C --------------------
? ? ? ? </div>
? ? ? ? <div v-else>
? ? ? ? ? ? not A/B/C --------------------
? ? ? ? </div>
視圖預(yù)顯示指令? v-clock
在元素vue內(nèi)容加載完成前，會展示v-clock設(shè)置的樣式
css代碼：
[v-clock]{
? ? ? ? ? ? display: none;
? ? ? ? }
視圖代碼：
<h1 v-clock>{{ msg }}</h1>
視圖限制渲染指令? v-once
這里相當容易理解，就是綁定的元素只允許渲染一次，之后無論觸發(fā)什么事件，都無法更改已經(jīng)渲染的內(nèi)容
<h1 v-once>{{ msg }}</h1>
? ? ? ? <button @click="msg='修改數(shù)據(jù)'">修改按鈕</button>
這里還剩一個指令：v-slot，但這個好像跟vue后面的內(nèi)容有關(guān)，這里先不寫，日后補上。。然后指令的內(nèi)容就寫完了，寫完之后呢。。自我感覺是真的寫的敷衍，不過要說操作的話，與其看我這個，不如看官方的使用文檔。過兩天應(yīng)該會開個新文章專門寫一下vue操作于dom操作的區(qū)別，這里暫且就這樣吧。
