Vue.js框架學習筆記之二
Vue.js中的樣式繫結
class和style是HTML元素的屬性，用於設定元素的樣式，我們可以通過v-bind來設定樣式屬性,可繫結一個數據屬性或者物件。
v-bind:class="..."
v-bind:style="..."
class例項：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style> .active { width: 100px; height: 100px; background: green; } .text-danger { background: red; } </style> </head> <body> <div id="app"> <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> <!--為v-bind:class設定了一個物件，即<div class="active text-danger"></div> --> </div> </div> <script> new Vue({ el: '#app', data: { isActive: true, hasError: true } }) </script> </body> </html>
style例項：
<div id="app">
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">hello-vue</div>
</div>
<script>
var app=new Vue({
el: '#app',
data: {
activeColor: 'green',
fontSize: 30
}
})
</script>
v-bind:style物件雖然看上去非常像CSS，但其實是一個JS物件，需要在Vue例項中定義，或者可以直接繫結到一個樣式物件裡。
<div v-bind:style="styleObject"></div>
...
data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}
樣式繫結中的陣列語法
示例程式碼來自RUNOOB.COM
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 測試例項 - 菜鳥教程(runoob.com)</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> <style> .text-danger { width: 100px; height: 100px; background: red; } .active { width: 100px; height: 100px; background: green; } </style> </head> <body> <div id="app"> <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div> </div> <script> new Vue({ el: '#app', data: { isActive: true, activeClass: 'active', errorClass: 'text-danger' } }) </script> </body> </html>
對於v-bind:class和v-bind:style，都可以使用陣列語法，將多個樣式物件應用到同一元素上。
<div v-bind:class="[activeClass, errorClass]"></div>
<div v-bind:style="[baseStyles, overridingStyles]"></div>
還可以使用三元表示式來切換列表中的class
<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
條件語句 v-if
<p v-if="seen">條件語句</p>
var vue = new Vue({
el:'#vue',
data:{
seen:true
}
})
v-if 指令將根據表示式 seen 的值(true 或 false )來決定是否插入 p 元素。這表明我們不僅可以把資料繫結到 DOM 文字或特性，還可以繫結到 DOM 結構。
同樣的，也可以v-else指令和v-else-if給v-if新增一個else塊，可以多次使用。
<p v-else>條件語句</p>
元素顯示 v-show
v-show指令用法與v-if指令大致一樣。
<h1 v-show="ok">Hello!</h1>
不同的是，帶有v-show的元素始終會被渲染並保留在DOM中，只是簡單地切換元素的CSS屬性display。
v-ifVSv-show
v-if會確保在切換過程中條件塊內的事件監聽器和子元件適當的被銷燬和重建。有更高的切換開銷。
v-show只是簡單的基於CSS進行切換，有更高的初始渲染開銷。
綜上，如果一個元素需要非常頻繁的切換，則使用v-show較好；如果在執行時條件很少改變，則使用v-if較好
迴圈語句 v-for
<div id='vue'>
<ol>
<li v-for='item in items'>
{ {item.message} }
</li>
</ol>
</div>
或使用模板輸出
<div id="vue">
<ul>
<template v-for="item in items">
<li>{ { item.message } }</li>
<li>--------------</li>
</template>
</ul>
v-for指令使用item in items的語法，其中items是原資料陣列，item是陣列元素迭代的別名。
迴圈迭代的引數可以不止一個，可以使物件中的各個元素(物件迭代)。
<li v-for="(value, key, index) in object">
{ { index } }. { { key } } : { { value } }
事件處理器 v-on:(event)
v-on指令監聽 DOM 事件，並在觸發時執行一些 JavaScript 程式碼。
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id='app'>
<h1>時間處理器</h1>
<input id='txtname' v-on:keyup='txtKeyUp($event)'>
<button id='btnOk' v-on:click='btnClick($event)'>OK</button>
<!--需要在內聯語句處理器中訪問原始的 DOM 事件。可以用特殊變數 $event 把它傳入-->
</div>
</body>
<script>
var app = new Vue({
el:'#app',
data:{},
methods:{
txtKeyUp:function(event){
this.debugLog(event);
},
btnClick:function(event){
this.debugLog(event);
},
debugLog:function(event){
console.log(
event.srcElement.tagName,//輸出元素的標籤名
event.srcElement.id,//輸出元素id
event.srcElement.innerHTML,//輸出元素內嵌內容
event.key?event.key:''//輸出鍵盤鍵入的內容
);
},
},
});
</script>
</html>
輸出結果
其中：
- INPUT和BUTTON為元素的標籤名
- txtName和btnOk為元素id
- 在input元件中沒有內嵌內容，所以只輸出空格，key為每次鍵盤鍵入的內容
- 在button元件中內嵌內容為Ok，沒有key元素
v-on指令可以使我們
- 掃一眼 HTML 模板便能輕鬆定位在 JavaScript 程式碼裡對應的方法。
- 因為無須在 JavaScript 裡手動繫結事件，你的 ViewModel 程式碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易於測試。
- 當一個 ViewModel 被銷燬時，所有的事件處理器都會自動被刪除。你無須擔心如何自己清理它們。