聲明式渲染

Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統：

 1 <div id="app">
 2   {{ message }}
 3 </div>
 4 
 5 var app = new Vue({
 6   el: ‘#app‘,       //element需要獲取的元素
 7   data: {
 8     message: ‘Hello Vue!‘
 9   }
10 })

除了文本插值，我們還可以像這樣來綁定元素特性：

 1 <div id="app-2">
 2
 
   <span v-bind:title="message">    //屬性綁定可以應用於好多其他標簽的屬性
 3     鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
 4   </span>
 5 </div>
 6 var app2 = new Vue({
 7   el: ‘#app-2‘,
 8   data: {
 9     message: ‘頁面加載於 ‘ + new Date().toLocaleString()
10   }
11 })

你看到的 v-bind 特性被稱為指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊特性。

在這裏，該指令的意思是：“將這個元素節點的 title 特性和 Vue 實例的 message 屬性保持一致”。

條件與循環

1 <div id="app-3">
2   <p v-if="seen">現在你看到我了</p>
3 </div>
4 var app3 = new Vue({
5   el: ‘#app-3‘,
6   data: {
7     seen: true
8   }
9 })

v-for 指令可以綁定數組的數據來渲染一個項目列表：

 1 <div 
 
id="app-4">
 2   <ol>
 3     <li v-for="todo in todos">
 4       {{ todo.text }}
 5     </li>
 6   </ol>
 7 </div>
 8 var app4 = new Vue({
 9   el: ‘#app-4‘,
10   data: {
11     todos: [
12       { text: ‘學習 JavaScript‘ },
13       { text: ‘學習 Vue‘ },
14       { text: ‘整個牛項目‘ }
15     ]
16   }
17 })

在控制臺裏，輸入 app4.todos.push({ text: ‘新項目‘ })，你會發現列表最後添加了一個新項目。

處理用戶輸入

我們可以用 v-on 指令添加一個事件監聽器，通過它調用在 Vue 實例中定義的方法：

 1 <div id="app-5">
 2   <p>{{ message }}</p>
 3   <button v-on:click="reverseMessage">逆轉消息</button>
 4 </div>
 5 var app5 = new Vue({
 6   el: ‘#app-5‘,
 7   data: {
 8     message: ‘Hello Vue.js!‘
 9   },
10   methods: {
11     reverseMessage: function () {
12       this.message = this.message.split(‘‘).reverse().join(‘‘)
13     }
14   }
15 })

Vue 還提供了 v-model 指令，它能輕松實現表單輸入和應用狀態之間的雙向綁定。

 1 <div id="app-6">
 2   <p>{{ message }}</p>
 3   <input v-model="message">
 4 </div>
 5 var app6 = new Vue({
 6   el: ‘#app-6‘,
 7   data: {
 8     message: ‘Hello Vue!‘
 9   }
10 }) 

組件化應用構建

組件系統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、獨立和通常可復用的組件構建大型應用。

在 Vue 裏，一個組件本質上是一個擁有預定義選項的一個 Vue 實例。在 Vue 中註冊組件很簡單：

 1 // 定義名為 todo-item 的新組件
 2 Vue.component(‘todo-item‘, {
 3   template: ‘<li>這是個待辦項</li>‘
 4 })
 5 
 6 //現在你可以用它構建另一個組件模板：
 7 <ol>
 8   <!-- 創建一個 todo-item 組件的實例 -->
 9   <todo-item></todo-item>
10 </ol>

但是這樣會為每個待辦項渲染同樣的文本，這看起來並不炫酷。我們應該能從父作用域將數據傳到子組件才對。

 1 Vue.component(‘todo-item‘, {
 2   // todo-item 組件現在接受一個
 3   // "prop"，類似於一個自定義特性。
 4   // 這個 prop 名為 todo。
 5   props: [‘todo‘],
 6   template: ‘<li>{{ todo.text }}</li>‘
 7 })
 8 
 9 <div id="app-7">
10   <ol>
11     <!--
12       現在我們為每個 todo-item 提供 todo 對象
13       todo 對象是變量，即其內容可以是動態的。
14       我們也需要為每個組件提供一個“key”，稍後再
15       作詳細解釋。
16     -->
17     <todo-item
18       v-for="item in groceryList"
19       v-bind:todo="item"
20       v-bind:key="item.id"
21     ></todo-item>
22   </ol>
23 </div>
24 
25 Vue.component(‘todo-item‘, {
26   props: [‘todo‘],
27   template: ‘<li>{{ todo.text }}</li>‘
28 })
29 
30 var app7 = new Vue({
31   el: ‘#app-7‘,
32   data: {
33     groceryList: [
34       { id: 0, text: ‘蔬菜‘ },
35       { id: 1, text: ‘奶酪‘ },
36       { id: 2, text: ‘隨便其它什麽人吃的東西‘ }
37     ]
38   }
39 })

子單元通過 prop 接口與父單元進行了良好的解耦。

在一個大型應用中，有必要將整個應用程序劃分為組件，以使開發更易管理。

1 <div id="app">
2   <app-nav></app-nav>
3   <app-view>
4     <app-sidebar></app-sidebar>
5     <app-content></app-content>
6   </app-view>
7 </div>

vue學習總結(簡單介紹)