目錄
· 引入Vue.js
· Vue.js是什麼
· 聲明式渲染Hello World
· 條件與循環
· 處理用戶點擊
· 綜合示例
1. 引入Vue.js安裝Vue可以通過查看官方安裝教程來了解其他安裝 Vue 的選項。但對webpack Node.js等打包構建工具不瞭解的同學不推薦直接使用vue-cli搭建項目腳手架。
最簡單的方式是在本地創建的 .html 文件中通過如下方式引入 Vue:
2. Vue.js是什麼?
Vue.js(讀音 /vjuː/, 類似於 view) 是一套構建用戶界面的 漸進式框架。與其他重量級框架不同的是,Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層。不僅易於上手(對比其它框架),還便於與第三方庫或既有項目整合。另一方面,當與單文件組件和 Vue 生態系統支持的庫結合使用時,Vue 也完全能夠為複雜的單頁應用程序提供驅動。
學習Vue.js時要拋開jQuery手動操作DOM的思維,因為Vue.js是數據驅動的,你無需手動操作DOM。它通過一些特殊的HTML語法,將DOM和數據綁定起來。一旦你創建了綁定,DOM將和數據保持同步,每當變更了數據,DOM也會相應地更新。
· Vue.js是一種MVVM框架(Model-View-ViewModel),其中html是view層,js是model層,ViewModel是Vue.js的核心,
· 它是一個Vue實例。Vue實例是作用於某一個HTML元素上的。Vue.js 的目標是通過儘可能簡單的 API 實現響應的數據綁定和組合的視圖組件。
當創建了ViewModel實例後,雙向綁定的過程分為以下幾步:
1、上圖中的DOM Listeners和Data Bindings是實現雙向綁定的關鍵。
2、從View側看,ViewModel中的DOM Listeners工具會幫我們監測頁面上DOM元素的變化,如果有變化,則更改Model中的數據;
3、從Model側看,當我們更新Model中的數據時,Data Bindings工具會幫我們更新頁面中的DOM元素。
3. Hello World
Vue.js 的核心是一個允許採用簡潔的模板語法來聲明式的將數據渲染進 DOM
3.1文本插值實現數據綁定
Vue.js有多種數據綁定的語法,最基礎的形式是文本插值,使用mustache語法,在運行時{{ message }}會被數據對象的message屬性替換,所以頁面上會輸出"Hello World!"。
//這是定義視圖View
new Vue({
el: '#app', //指向view 將Vue實例掛載
data: {
message: 'Hello World!'
} //指向model
})
// 用來連接 View 與 Model
3.2 輸出純HTML
使用{{message}}的mustache語法只能將數據解釋為純文本,為了輸出HTML,可以使用v-html指令:
new Vue({
el: '#app',
data: {
text:'
hello
'}
})
關於指令:
Vue.js的指令是以v-開頭的,它們作用於HTML元素,指令提供了一些特殊的特性,
將指令綁定在元素上時,指令會為綁定的目標元素添加一些特殊的行為,我們可以將指令看作特殊的HTML特性(attribute)。
3.3雙向數據綁定
MVVM模式本身支持雙向綁定,在Vue.js中可以使用v-model指令在表單元素上創建雙向數據綁定。
{{ message }}
這樣無論是改變輸入框的內容還是通過控制檯修改message的值,另一個值都會同時被改變。
3.4 給元素的屬性綁定數據
定義在Vue實例的data接口上的數據的綁定很靈活,既可以綁定在DOM節點內部,也可以綁在屬性上
v-once指令能夠讓你執行一次性的插值,當數據改變時,插值處的內容不會更新。但請留心這會影響到該節點上所有的數據綁定。
var vm = new Vue({
el: '#app',
data:{
message: 'Google',
color: 'color:green',
url:'https://google.com'
}
})
Mustache 不能在 HTML 屬性中使用,綁定數據到節點屬性上時,需要使
用v-bind指令。利用這個指令將元素節點div的 title屬性和 Vue 實
例的 message屬性綁定到一起,從而建立數據與該屬性值的綁定。v-bind
指令可以縮寫為一個冒號,
如a標籤中的v-bind:href="url"的縮寫方式:href="url"。
v-bind指令對布爾值的屬性也有效 —— 如果條件被求值為 false 的話該屬
性會被移除。
4.條件與循環
4.1 根據條件表達式的值來執行元素的插入或者刪除行為的是v-if指令:
Num: {{ num }}
now you see me
var app = new Vue({
el: '#app',
data: {
num:12,
seen: true,
name:'WannaCry'
}
})
v-if指令可以綁定一個屬性值為布爾型的屬性,當值為真時,元素將
顯示,反之則消失。如果在控制檯設置app.seen = false,你會發現
頁面上的“now you see me ”消失了。
這個例子演示了我們不僅可以綁定 DOM 文本到數據,也可
以綁定 DOM 結構到數據。而且,Vue 也提供一個強大的過渡效果
系統,可以在 Vue 插入/更新/刪除元素時自動應用過渡效果。
4.2 v-show也是條件渲染指令,和v-if指令不同的是,使用
v-show指令的元素始終會被渲染到HTML,它只是簡單地為元素設置CSS的style屬性。
Name: {{ name }}
在控制檯打開,可以看到
Name:WannaCry
元素被設置了style="display:none"樣式。
4.3 可以用v-else指令為v-if或v-show添加一個“else塊”。
Age: {{ age }}
Name: {{ name }}
v-else元素必須立即跟在v-if,v-else-if或v-show元素的後面——否
則它不能被識別。
var vm = new Vue({
el: '#app',
data: {
age:20,
name: 'Alan Walker',
sex: 'Man'
}
})
v-else元素是否渲染在HTML中,取決於前面v-if的值true還是
false。
如果v-if的值為false,則後面v-else的內容不會渲染到HTML。
4.4 數組數據循環渲染列表使用v-for指令:
{{ todo.text }}
v-for指令基於一個數組渲染一個列表,它和JavaScript的遍歷語法相似:
v-for="todo in todos"
todos是一個數組,todo是當前被遍歷的數組元素。
var app = new Vue({
el: '.title',
data: {
//定義todos數組
todos: [
{ text: 'study hard' },
{ text: 'find a girlfriend' },
{ text: 'around the world' }
]
}
})
頁面顯示如下:
· study hard
· find a girlfriend
· around the world
控制檯裡,輸入 app.todos.push({ text: 'coding' }),你會發現列表中新添加了一項。
5. 處理用戶點擊
當用戶點擊頁面,我們可以用 v-on指令綁定一個事件監聽器,通過它調用我們在Vue 實例中定義的方法:
{{ message }}
v-on指令用於給監聽DOM事件,它的用語法和v-bind是類似的。
new Vue({
el: '.title',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
//split()用於將字符串轉化為數組
//reverse()用於顛倒數組中元素順序
//join()用於將數組轉化為字符串
}
}
})
v-on指令可以縮寫為@符號。
6. 綜合示例
Vue+Bootstrap實現todolist的小Demo
一、Html樣式
id | username | password | option |
---|---|---|---|
{{index+1}} | {{item.name}} | {{item.pwd}} |
|
delete all
| |||
暫無數據...
|
id="myModal">
二、JS部分
window.onload = function(){
new Vue({
el:"#box",
data:{
myData:[],
username:'',
password:'',
nowIndex:'',//當前用戶的索引
modalTitle:'confirm delete?'//模態框的title
},
methods:{
add:function(){
var name = this.username.trim();
var pwd = this.password.trim();
this.myData.push({
name:name,
pwd:pwd
});
this.username = '';
this.password = '';
},
remove:function(index){
if(index == 'all'){
//刪除所有
this.myData = [];
}else{
//刪除索引為index的那條信息
this.myData.splice(index,1);
}
}
}
})
};
閱讀更多 黑馬程序員成都中心 的文章