第九章 監控系統-zabbix深入應用監控
阿新 • • 發佈：2021-12-21
Vue的基本使用
Vue的指令與過濾器
指令的概念
指令（Directives）是vue為開發者提供的模板語法，用於輔助開發者渲染頁面的基本結構。
指令的分類
vue中的指令按照不同的用途可以分為6大類：
- 內容渲染指令
- 屬性繫結指定
- 事件繫結指令
- 雙向繫結指令
- 條件渲染指令
- 列表渲染指令
指令是vue開發中最基礎、最常用、最簡單的知識點
內容渲染指令
內容渲染指令用來輔助開發者渲染DOM元素的文字內容。
常用的內容渲染指令有如下3個：
- v-text
- {{}}
- v-html
v-text
會覆蓋標籤中原有的內容
插值表示式
也就是{{}}
專門又來解決v-text會覆蓋預設文字的問題
v-html
如果要把包含html標籤的字串渲染為頁面的HTML元素，則需要用到v-html這個指令。
在 vue 提供的模板渲染語法中，除了支援繫結簡單的資料值之外，還支援JavaScript表示式的運算。
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div :id="'list-'+ id"></div>
屬性繫結指令
插值表達是隻能用在內容節點而不能用在屬性節點。
如果需要為元素的屬性動態繫結屬性值，則需要用到v-bind屬性繫結指令。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-bind:placeholder="tips"> <br> <hr> <!-- v-bind 可以簡寫為 : --> <img :src="photo" alt="" style="width: 100px; height: 100px;"> </div> <!-- 開發環境版本，包含了有幫助的命令列警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { tips: "Please input username", photo: "https://cn.vuejs.org/images/logo.svg" } }) </script> </body> </html>
v-bind 可以簡寫為 :
繫結的內容如果需要拼接，則字串的外面應該包裹單引號
v-bind會作為js表示式被解析
事件繫結指令
vue 提供了 v-on事件繫結指令，用來輔助程式設計師為 DOM 元素繫結事件監聽。
在methods中定義事件處理函式，格式如下：
methods: {
add: funtion() {
}
}
其簡寫形式：
methods: {
add() {}
}
在methods方法中，可以使用建立的例項物件（vm或this）來訪問資料來源。
在繫結事件處理函式的時候，可以使用()傳遞引數
v-on:可以簡寫為@
事件物件$event
事件修飾符
在事件處理函式中呼叫event.preventDefault()或event.stopPropagation()是非常常見的需求。因此，vue提供了時間修飾符的概念，來輔助程式設計師更方便地對事件的出發進行控制。
| 事件修飾符 | 說明 |
|---|---|
| .prevent | 阻止預設行為 |
| .stop | 阻止事件冒泡 |
| .capture | 以捕獲模式出發當前的事件處理函式 |
| .once | 繫結的事件只觸發一次 |
| .self | 只有在event.target是當前元素自身是出發事件處理函式 |
按鍵修飾符
在監聽鍵盤事件時，我們經常需要判斷詳細的按鍵。此時，可以為鍵盤相關的事件新增按鍵修飾符。
雙向資料繫結指令
vue提供了v-model雙向資料繫結指令，用來輔助開發者不操作DOM的前提下，快速獲取表單的資料。
v-model只能和一些表單元素使用才有意義
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>事件繫結指令</title>
</head>
<body>
<div id="app">
<input type="text" v-model="username">
<p>使用者名稱：{{username}}</p>
</div>
<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
username: 'zihoo'
},
// 定義事件處理函式
methods: {
}
})
</script>
</body>
</html>
指令修飾符
為了方便對使用者輸入的內容進行處理，vue為v-model指令提供了3個修飾符，分別是：
| 修飾符 | 作用 | 示例 |
|---|---|---|
| .number | 自動將使用者的輸入值轉為數值型別 | |
| .trim | 自動過濾使用者輸入的首尾空白字元 | |
| .lazy | 在”change“時而非”input“時更新 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model的修飾符</title>
</head>
<body>
<div id="app">
<div>
<h4>.number</h4>
<input type="text" v-model.number="num1"> + <input type="text" v-model.number="num2"> = {{num1 + num2}}
</div>
<div>
<h4>.trim</h4>
<input type="text" v-model.trim="username">
<button @click="showName">獲取使用者名稱</button>
</div>
<div>
<h4>.lazy</h4>
<p>data不會實時改變，當輸入框失去焦點時，資料同步</p>
<input type="text" v-model.lazy="username">
</div>
</div>
<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
num1: 0,
num2: 0,
username: ''
},
// 定義事件處理函式
methods: {
showName() {
alert("username ==>" + this.username)
}
}
})
</script>
</body>
</html>
條件渲染指令
v-if 會動態新增或刪除元素
v-show 使用display: none來隱藏元素
v-if的配套指令
- v-else-if
- v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model的修飾符</title>
</head>
<body>
<div id="app">
<div>
<h4>v-if和v-show的區別</h4>
<p v-if="flag">v-if 的條件渲染</p>
<p v-show="flag">v-show 的條件渲染</p>
</div>
<div>
<h4>v-if的配套語法</h4>
<div v-if="type === 'A'">優秀</div>
<div v-else-if="type === 'B'">良好</div>
<div v-else-if="type === 'C'">一般</div>
<div v-else>差</div>
</div>
</div>
<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
flag: true,
type: 'A'
},
// 定義事件處理函式
methods: {
}
})
</script>
</body>
</html>
列表渲染指令
vue提供了v-for列表渲染指令，用來輔助開發者基於一個數組來迴圈渲染一個列表結構。
v-for指令需要使用item in items形式的特殊語法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model的修飾符</title>
</head>
<body>
<div id="app">
<table>
<thead>
<tr>
<th>序號</th>
<th>id</th>
<th>姓名</th>
</tr>
</thead>
<tbody>
<tr v-for="item, index in list">
<td>{{index + 1}}</td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
</tr>
</tbody>
</table>
</div>
<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
list: [
{id: 1, name: 'lisi'},
{id: 2, name: 'zhangsan'},
{id: 3, name: 'wangwu'}
]
}
})
</script>
</body>
</html>
官方簡易：只要用到了v-for指令，那麼一定要繫結一個:key屬性。而且，儘量把id作為key的值。官方對key的值型別也是有要求的，只能是字串或者數字型別。
過濾器
過濾器(Filters)是Vue為開發者提供的功能，常用於文字的格式化。過濾器可以用在兩個地方：插值表示式和v-bind屬性繫結
過濾器應該在JavaScript表示式的尾部，由“管道符”進行呼叫
私有過濾器
一般定義的，在filters節點下定義的過濾器都為私有過濾器
公有過濾器
獨立於每個vm例項之外
Vue.filter()方法接收兩個引數：
- 全域性過濾器的名字
- 全域性過濾器的處理函式
如果全域性過濾器和私有過濾器名字重複，則按照就近原則，優先使用私有過濾器
連續呼叫多個過濾器
過濾器可以連續呼叫多個
過濾器傳參
<p>
{{message | filterA(arg1, arg2)}}
</p>
Vue.filter('filterA', (msg, arg1, arg2) => {
// 過濾器程式碼邏輯
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model的修飾符</title>
</head>
<body>
<div id="app">
<h4>過濾器</h4>
<p>原字串：{{message}}</p>
<p>過濾後的字串：{{message | capitalize}}</p>
</div>
<div id="app2">
<h4>公有過濾器</h4>
<p>原字串：{{ message }}</p>
<p>過濾後的字串：{{message | capitalize}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
Vue.filter('capitalize', str => {
return str.toUpperCase() + "~~~"
})
const vm = new Vue({
el: '#app',
data: {
message: "hello vue.js"
},
// 定義過濾器函式
filters: {
// 形參值是管道符前面的值
capitalize(val) {
// 過濾器中一定要有一個返回值
return val.toUpperCase()
}
}
})
const vm2 = new Vue({
el: '#app2',
data: {
message: 'hello vue.js'
}
})
</script>
</body>
</html>