Vue.js 基礎學習
Vue.js官網： https://cn.vuejs.org/v2/guide/index.html
一、Vue.js 是什麼
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。另一方面，當與現代化的工具鏈以及各種支援類庫結合使用時，Vue 也完全能夠為複雜的單頁應用提供驅動。
二、Vue.js 目的：
- 解決資料繫結的問題
- vue框架產生的主要目的是為了開發大型單頁面應用，
- 它還支援元件化，也就是可以將頁面封裝成若干個元件，這樣使頁面複用性達到最高（支援元件化）。
三、Vue.js 特性：
MVVM模式：（資料變數（model）發生改變 檢視（view）也改變， 檢視（view）改變，資料變數（model）也發生改變）
用MVVM模式的好處：
- 低耦合。View可以獨立於Model變化和修改，一個ViewModel可以繫結到不同的View上，當View變化的時候Model可以不變，當Model變化的時候View也可以不變。
- 可重用性。可以把一些檢視的邏輯放在ViewModel裡面，讓很多View重用這段檢視邏輯。
- 獨立開發。開發人員可以專注與業務邏輯和資料的開發(ViewModel)。設計人員可以專注於介面(View)的設計。
- 可測試性。可以針對ViewModel來對介面(View)進行測試
四、開始建立Vue 應用
1、開始建立第一個 Vue 應用
宣告式渲染
Vue.js 的核心是一個允許採用簡潔的模板語法來宣告式地將資料渲染進 DOM 的系統，也就是對資料進行繫結。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title v-bind:title="message">vue-demo</title> <!-- vue.js --> <script type="text/javascript" src="dist/vue.min.js" ></script> </head> <body> <div id="app"> {{message}} </div> <script type="text/javascript"> var app = new Vue({ //建立Vue物件 el: '#app', //節點元素id data: { //資料 message: 'hello Vue!' } }); </script> </body> </html>
2、Vue.js指令
（1）v-model
作用：實現表單輸入和應用狀態之間的雙向繫結。接收使用者輸入的一些資料，直接就可以將這些資料掛載到data屬性裡面
<div id="app-2">
<p>{{ message }}</p>
<input v-model="message">
</div>var app2 = new Vue({
el: '#app-2',
data: {
message: 'Hello Vue!'
}
});（2）v-if
作用：通過判斷載入內容，若為真載入，為假時刪除元素。
<div id="app-3">
<p v-if="seen">顯示內容</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
});（3）v-show
作用：v-show 用法和v-if相同，安全性沒有v-if高，只是v-show將元素display設定成none，並不是將元素直接移除。
（4）v-else
必須緊跟在v-if或v-show元素的後面，否則它不能被識別。
（5）v-for
作用：迴圈遍歷元素
<div id="app-4">
<p> {{ title }}</p>
<p v-for="todo in todos">
{{ todo.id +'. '+ todo.name}}
</p>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
title: '前端',
todos: [
{ id: 1, name: 'JavaScript' },
{ id: 2, name: 'jquery' },
{ id: 3, name: 'Vue.js' }
]
}
});（6）v-bind
作用：v-bind 對頁面中html屬性進行繫結
<div id="app-5">
<img v-bind:src="src" v-bind:style="style"/>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
src: 'img/1.png',
style: 'width:100%;height:100%;'
}
});（7）v-on
<div id="app-6">
<p>{{message}}</p>
<input v-on:blur="blur()" id="name"></input>
<button v-on:click='save(6)'>儲存</button>
</div>var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue.js!'
},
methods:{
save: function(id){
var name = document.getElementById('name');
alert('儲存 id=' + id + ' ; name=' + name.value);
},
blur: function(){
alert('blur');
}
}
});（8）v-bind 和 v-on 縮寫
v-bind 和 v-on 縮寫很常用所以Vue.js 提供縮寫
- v-bind 縮寫為冒號（：）
- v-on 縮寫為艾特（@）
用法：對比上面的
<div id="app-5">
<img :src="src" :style="style"/>
</div>
<div id="app-6">
<p>{{message}}</p>
<input @blur="blur()" id="name"></input>
<button @click='save(6)'>儲存</button>
</div>