簡單應用
Vue.js 的核心是一個容許採用簡潔的模板語法來聲明式的將數據渲染進 DOM 的系統：數組
<div id="app"> {{ message }} </div> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
帶有指令的例子在控制檯輸入 app.message="11" 數據就會發生變化瀏覽器
<div id = "demo2"> <span v-bind:title="message"> 鼠標懸停幾秒就會看到信息 </span> </div> <script> var demo2 = new Vue({ el:"#demo2", data:{ message:"頁面加載於"+new Date().toLocaleString() } }) </script>
這裏咱們遇到點新東西。你看到的 v-bind 屬性被稱爲指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊屬性。可能你已經猜到了，它們會在渲染的 DOM 上應用特殊的響應式行爲。簡言之，這裏該指令的做用是：「將這個元素節點的title 屬性和 Vue 實例的 message 屬性保持一致」。 app
再次打開瀏覽器的 JavaScript 控制檯輸入 app2.message = '新消息'，就會再一次看到這個綁定了 title 屬性的 HTML 已經進行了更新。函數
條件與循環組件化
<div id="app-3"> <p v-if="seen">如今你看到我了</p> </div> var app3 = new Vue({ el: '#app-3', data: { seen: true } })
綁定數組來渲染項目 post
使用v-for 指令能夠綁定數組的數據來渲染一個項目列表：this
在控制檯裏，輸入demo4.todos.push({text:'new demasd'})，你會發現列表中添加了一個新項。 url
處理用戶的輸入spa
<div id = "demo5"> <p>{{message}}</p> <button v-on:click="reverseMessage">逆轉消息</button> </div> <script> var demo5 = new Vue({ el:"#demo5", data: { message: "Hello Vue.js" }, methods: { reverseMessage:function(){ this.message=this.message.split('').reverse().join('') } } }) </script>
##和表單的雙向綁定注意在 reverseMessage 方法中，咱們更新了應用的狀態，但沒有觸碰 DOM——全部的 DOM 操做都由 Vue 來處理，你編寫的代碼不須要關注底層邏輯。雙向綁定
Vue 還提供了 v-model 指令，它能輕鬆實現表單輸入和應用狀態之間的雙向綁定。
<div id="app-6"> <p>{{ message }}</p> <input v-model="message"> </div> var app6 = new Vue({ el: '#app-6', data: { message: 'Hello Vue!' } })
組件化構建應用
- 組件注測
- 在 Vue 裏，一個組件本質上是一個擁有預約義選項的一個 Vue 實例，在 Vue 中註冊組件很簡單
// 定義名爲 todo-item 的新組件
Vue.component(‘todo-item’, { template: ‘ 這是個待辦項 ‘ })
- 組件的定義
-
Vue.component('todo-item', { // todo-item 組件如今接受一個 // "prop"，相似於一個自定義屬性 // 這個屬性名爲 todo。 props: ['todo'], template: '<li>{{ todo.text }}</li>' })
Vue實例
全部的 Vue 組件都是 Vue 實例，而且接受相同的選項對象便可 (一些根實例特有的選項除外)。
模板語法
Vue.js 使用了基於 HTML 的模板語法，容許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。全部 Vue.js 的模板都是合法的 HTML ，因此能被遵循規範的瀏覽器和 HTML 解析器解析。
在底層的實現上，Vue 將模板編譯成虛擬 DOM 渲染函數。結合響應系統，在應用狀態改變時，Vue 可以智能地計算出從新渲染組件的最小代價並應用到 DOM 操做上。
若是你熟悉虛擬 DOM 而且偏心 JavaScript 的原始力量，你也能夠不用模板，直接寫渲染 (render) 函數，使用可選的 JSX 語法。
插值
- 文本
數據綁定最多見的形式就是使用「Mustache」語法 (雙大括號) 的文本插值：<span>Message: </span> v-once標籤 值不能再改變
指令
指令的職責是，當表達式的值改變時，將其產生的連帶影響，響應式地做用於 DOM
全部帶v-開頭的標籤都是
縮寫
v- 前綴做爲一種視覺提示，用來識別模板中 Vue 特定的特性。當你在使用 Vue.js 爲現有標籤添加動態行爲 (dynamic behavior) 時，v- 前綴頗有幫助，然而，對於一些頻繁用到的指令來講，就會感到使用繁瑣。同時，在構建由 Vue.js 管理全部模板的單頁面應用程序 (SPA - single page application) 時，v- 前綴也變得沒那麼重要了。所以，Vue.js 爲 v-bind 和 v-on 這兩個最經常使用的指令，提供了特定簡寫：
v-bind 縮寫 <a v-bind:href="url">...</a> <a :href="url">...</a> v-on 縮寫 <a v-on:click="doSomething">...</a> <a @click="doSomething">...</a>