Vue:渲染、指令、事件、組件、Props、Slots
如果要我用一句話描述使用 Vue 的經歷，我可能會說“它如此合乎常理”或者“它提供給我需要的工具，而且沒有妨礙我的工作”。每當學習 Vue 的時候，我都很高興，因為很有意義，而且很優雅。
以上是我對 Vue 的介紹。在我第一次學習 Vue 的時候，我就想要這樣的文章
我喜歡 Vue 的一點是它吸取了其它框架的優秀之處，並有條不紊的將它們組合在一起。
-
具有響應式組件化的虛擬 DOM 只提供視圖層，
props和 類 Redux 狀態管理與 React 類似。 -
條件渲染和服務與 Angular 類似。
-
受到 Polymer 簡潔及性能方面的啟發，Vue 提供了類似的模式，比如 HTML， 樣式以及 JavaScript 組合在一起。
Vue 相比其它框架的優勢有: 簡潔，提供更多語義化的 API ， 比 React 的表現稍好，不像 Polymer 那樣使用 polyfill，相比 Angular 有獨立的視圖。
我還能舉一些例子，但是你最好讀一下這篇綜合的、社區推動的文章對比其它框架 。這篇文章值得一讀，但是如果你想先看代碼，你也可以先跳過，以後再讀。
開始吧！
還是從 "Hello, world!" 的例子開始。運行如下示例：
HTML：
<div id="app"> {{ text }} Nice to meet Vue. </div>
CSS：
body{ font-family: ‘Bitter‘, serif; } #app { text-align: center; padding: 70px; font-size: 22px; max-width: 360px; margin: 0 auto; display: table; }
Vue.js
new Vue({ el: ‘#app‘, data: { text: ‘Hello World!‘ } })
如果你熟悉 React，你會發現兩者有很多相同之處。通過 mustache 模板以及使用一個變量，可以避免在內容中使用 JavaScript，但是不同的一點是我們直接書寫 HTML 而不是 JSX 。雖然 JSX 易於使用，但是我無需再花時間把 class
className，等等。這樣啟動及運行會更輕量。
現在嘗試一下我喜歡的 Vue 的特性: 循環以及條件渲染。
條件渲染
假如有一組元素，類似導航條，我打算重復利用。合理的做法是放在數組中動態的更新。使用普通的 JS (需要 Babel) ，我們會這樣做: 創建一個數組，然後創建一個空字符串，用來存放使用 <li> 包裹的元素，再用 <ul> 包裹所有內容，使用 innerHTML 方法添加到 DOM 中：
HTML:
<div id="app"> <ul> <li v-for="item in items"> {{item}} </li> </ul> </div>
Vue.js:
new Vue({ el:"#app", data:{ items:[ ‘thingie‘, ‘another things‘, ‘lots of stuff‘, ‘yadda yadda‘ ] } })
非常簡潔。如果你熟悉 Angular，你對此應該不陌生。我發現這種條件渲染的方式簡單明了。如果你需要更新內容，修改起來也很簡單。
另外一種好的方式是使用 v-model 進行動態綁定。試試下面的例子：
HTML：
<div id="app"> <h3>Type here:</h3> <textarea v-model="message" class="message" rows="5" maxlength="72"></textarea> <p class="booktext">{{message}}</p> </div>
Vue.js
new Vue({ el:"#app", data:{ message:"this is a good place top type" } })
在這個 Demo 中你會註意到兩點。首先，可以直接向書中打字並且動態更新文本。Vue 通過 v-model 非常方便的實現了 <textarea> 和 <p> 的數據綁定。
並不是只有簡單的輸入綁定，甚至 v-if 可以用 v-show 替換，有 v-show 的元素不是銷毀或重建組件，而是始終保持在 DOM 中，切換可見性。
Vue 提供了 很多指令 , 下面是我經常使用的一些指令。很多指令都有縮寫，所以我會一起列出來。在之後的教程中，我們主要使用指令縮寫，所以最好先熟悉一下下面的表格。
也有非常好的事件修飾符和其他 API
加快開發的方法：
@mousemove.stop和e.stopPropogation()相同@mousemove.prevent類似於e.preventDefault()@submit.prevent提交時不再重新加載頁面@click.once不要和v-once混淆，這個click事件只觸發一次v-model.lazy不會自動填充內容，它將在事件發生時綁定
事件處理
數據綁定雖然很好，但是沒有事件處理也無法發揮更大的用途，因此接下來就試一試! 這是我喜歡的一部分。我們將使用上面的綁定和監聽器來監聽 DOM 事件。
在應用程序中有幾種不同的方法來創建可用的方法。比如在普通的 JS 中，你可以選擇函數名，但是實例方法直觀地稱為 methods！
<div id="app"> <p><button @click="increment">+</button><br>{{counter}}</p> </div>
new Vue({ el:"#app", data:{ counter:0 }, methods:{ increment:function(){ this.counter++ } } })
我們創建了一個名為 increment 的方法並且你會註意到函數自動綁定了 this ，會指向實例及組件中的 data 。我喜歡這種自動綁定，不需要通過 console.log 查看 this 的指向。 我們使用縮寫 @click 綁定 click 事件。Methods 並不是創建自定義函數的唯一方式。你也可以使用 watch 。兩者的區別是 methods 適合小的、同步的計算，而 watch 對於多任務、異步或者響應數據變化時的開銷大的操作是有利的。我經常在動畫中使用 watch 。
讓我們看看如何傳遞事件並且進行動態地樣式綁定。如果你記得上面的表格，你可以使用 : 來代替 v-bind ，因此我們可以很簡單地通過 :style 以及 傳遞狀態，或者 :class 綁定樣式 (以及其他屬性)。這種綁定確實有很多用途。
<div id="app"> <p> <button @click="increment">+</button> <br> {{counter}} <br> <button @click="decrement">-</button> </p> </div>
new Vue({ el:"#app", data:{ counter:0, }, methods:{ increment:function(){ this.counter++ }, decrement:function(){ this.counter-- } } })
你應該看到我們甚至不需要傳遞 @click 事件，Vue 將它作為方法的參數(這裏顯示為 e )自動傳遞。
此外，原生方法也可以使用，比如 event.clientX，並且很容易關聯 this 實例。在元素的樣式綁定中，CSS 屬性需要使用駝峰命名。在這個例子中，你可以看到 Vue 的簡單明了。
組件和傳遞數據
如果你熟悉 React 或者 Angular2，組件思想和傳遞狀態對你並不陌生。如果不是， 讓我們先了解一些主要概念。
大小網站通常由不同的部分組成，並且抽象成更小的部分更容易布局、重用、並使得我們的代碼更清晰。為了避免在冗長的多層次的頁面中搜尋標簽，我們可以這樣構建組件：
<header></header> <aside> <sidebar-item v-for="item in items"></sidebar-item> </aside> <main> <blogpost v-for="post in posts"></blogpost> </main> <footer></footer>
這是一個簡單的例子，但是你可以看到這種組合方式在開始構建網站結構時的用途。如果你要維護這些代碼，你可以很容易的了解程序的結構並且找到每一部分。著作權歸作者所有。
Vue 有多種創建組件的方式。讓我們從易到難，而復雜的例子就是一個普通的 Vue 程序。
下面是我能做的最簡單的例子，所以非常容易理解。
記住 HTML 中的 :text 是 Vue 綁定的縮寫。我們在指令部分的最後提到過。綁定可以用於所有方面，但是在這個實例中，這樣做的好處是不需要把狀態放在 mustache 模板中, 比如 {{ message }}。
在下面的代碼中，Vue.component 是組件， new Vue 稱為實例。一個程序中可以有多個實例。通常情況下，我們會有一個實例和多個組件，因為實例是主要應用程序。
<div id="app"> <child :text="message"></child> </div>
Vue.component(‘child‘, { props: [‘text‘], template: ‘<div>{{ text }}</div>‘ }); new Vue({ el: ‘#app‘, data: { message: ‘Hello Mr. Magoo‘ } })
現在我們可以在程序中隨意使用這個組件：
HTML：
<div id="app"> <h3> <button @click="increment">+</button> Adjust the data <button @click="decrement">-</button> </h3> <h2>This is the app data: <span class="num">{{ count }}</span></h2> <h4> <child :count="count"></child> </h4> <p>This is a child counter that is using a static integer as props</p> <h4> <child :count="count"></child> </h4> <p>This is the same child counter and it is using the vue instance data as props</p> </div>
Vue.js
Vue.component(‘child‘, { props: [‘count‘], template: ‘<div class="num">{{ count }}</div>‘ }); new Vue({ el: ‘#app‘, data: { count: 0 }, methods: { increment:function(){ this.count++ }, decrement:function(){ this.count-- } } })
區別在於你是否傳遞了一個屬性並綁定它：
- 沒有使用狀態：
<child count="1"></child> - 使用狀態：
<child :count="count"></child>
<div id="app"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/vue-post-photo.jpg" alt="" class="main-photo" /> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/vue-main-profile.jpg" alt="" class="main-profile" /> <div class="main-info"> <span class="name">Julianne Delfina</span> <h3>"It‘s lovely after it rains"</h3> </div> <ul> <li is="individual-comment" v-for="comment in comments" v-bind:commentpost="comment" ></li> </ul> <input v-model="newComment" v-on:keyup.enter="addComment" placeholder="Add a comment" /> </div>
Vue.js
Vue.component(‘individual-comment‘, { template: ‘<li>{{ commentpost }}</li>‘, props: [‘commentpost‘] }); new Vue({ el: ‘#app‘, data: { newComment: ‘‘, comments: [ ‘Looks great Julianne!‘, ‘I love the sea‘, ‘Where are you at?‘ ] }, methods: { addComment: function () { this.comments.push(this.newComment); this.newComment = ‘‘ } } })
<---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
Vue系列教程
入門vue----（vue的安裝）
入門vue----（介紹）
Vue.js 基本語法
Vue深度學習（1）
Vue深度學習（2）
Vue深度學習（3）
Vue深度學習（4）-方法與事件處理器
Vue深度學習（5）-過渡效果
Vue深度學習（6）- 組件
vue-購物車
Vue:渲染、指令、事件、組件、Props、Slots