自定義指令
- 通過vue來封裝指令（directive），從而去擴展標簽原本的功能。
語法：
- 全局指令
- 語法：
Vue.directive(指令名稱,指令的配置對象) - 指令名稱：定義的時候不需要
v-，但是使用的時候加上v- - 指令的配置對象：{inserted(el){}} 等使用該指令的元素渲染完畢后（dom生成后）執(zhí)行
- 在dom生成后才可為該dom擴展功能
- el 就是使用指令的dom對象
- 語法：
- 局部指令
- 語法：
new Vue({directives:{指令名稱:指令的配置對象,...}}) - 指令名稱：定義的時候不需要
v-，但是使用的時候加上v- - 指令的配置對象：{inserted(el){}} 等使用該指令的元素渲染完畢后（dom生成后）執(zhí)行
- 在dom生成后才可為該dom擴展功能
- el 就是使用指令的dom對象
- 語法：
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<div id="app">
<!-- 需求：v-focus指令來為該input標簽實現(xiàn)自動獲取焦點功能 -->
<input type="text" v-focus="{h:100,w:100}">
</div>
<script src="./vue.js"></script>
<script>
// 全局指令
// Vue.directive('focus',{
// // inserted 函數(shù)使用該指令的元素渲染完畢后執(zhí)行
// inserted (el) {
// // el 使用該指令的DOM
// // 獲取焦點
// // 對dom擴展任意功能
// el.style.height = '200px'
// el.focus()
// }
// })
const vm = new Vue({
el: '#app',
data: {},
methods: {},
// 局部 定義自定義指令
directives: {
// 屬性名：指令的名稱
// 屬性值：指令配置對象
focus: {
inserted (el, binding) {
// binding 指令的信息對象
// 其中有一個 value 就是指令的值
el.style.width = binding.value.w + 'px'
el.style.height = binding.value.h + 'px'
el.focus()
}
}
}
})
</script>
</body>
</html>
補充：
- 指令的參數(shù)怎么接收
inserted(el,binding){}binding就是指令信息
計算屬性
作用：
- 根據(jù)data當中的數(shù)據(jù)，經(jīng)過一定的邏輯處理，得到一項新數(shù)據(jù)（計算屬性）。
- 當data中的數(shù)據(jù)發(fā)生變化的時候，計算屬性也會更新。
- 計算屬性也是響應式數(shù)據(jù)，改變的時候也會驅動視圖的更新。
- 當多次獲取計算屬性的時候，處理邏輯不會重新執(zhí)行，因為有緩存。
定義：
- 語法：
new Vue({computed:{ 書寫計算屬性 }}) - 書寫計算屬性：
myMsg () { // 處理邏輯 return ‘處理后的數(shù)據(jù)’ }
- 使用：和data中的數(shù)據(jù)一致
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
<!-- 邏輯復雜，可讀性差，違背初心（使用簡單的js表達式） -->
<h1>{{ message.split('').reverse().join('') }}</h1>
<!-- 通過計算屬性來優(yōu)化 -->
<hr>
<h1>{{reverseMsg}}</h1>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
// 數(shù)據(jù)
data: {
message: 'hi vue'
},
methods: {},
// vue的配置選項：computed
// 計算屬性
computed: {
// 屬性名 計算屬性的名稱
// 屬性值 計算屬性的處理函數(shù)
// reverseMsg : function () {
reverseMsg () {
// 依賴data中的數(shù)據(jù)，進行一定的邏輯處理，得到一個新數(shù)據(jù)
const newMsg = this.message.split('').reverse().join('')
// 必須將新數(shù)據(jù)返回出去
return newMsg
}
// reverseMsg 就是數(shù)據(jù)名稱，在模板中使用data中數(shù)據(jù)一致
}
})
</script>
</body>
</html>
總結：
- 使用場景：當你依賴data里面的數(shù)據(jù)，經(jīng)過較為復雜的邏輯處理，得到一個新的數(shù)據(jù)，此時可以使用計算屬性來實現(xiàn)。
computed和methods區(qū)別
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<div id="app">
<h1>{{reverseFn()}}</h1>
<h1>{{reverseFn()}}</h1>
<h1>{{reverseFn()}}</h1>
<h1>{{reverseMsg}}</h1>
<h1>{{reverseMsg}}</h1>
<h1>{{reverseMsg}}</h1>
</div>
<script src="./vue.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
message: 'hi vue'
},
methods: {
// 反轉字符的函數(shù) 模板中使用{{reverseFn()}}
reverseFn () {
console.log('reverseFn')
return this.message.split('').reverse().join('')
}
// 每使用一次，會調(diào)用一次函數(shù)，重新執(zhí)行內(nèi)部邏輯，得到數(shù)據(jù)
},
computed: {
// 反轉字符計算屬性 模板中使用{{reverseMsg}}
reverseMsg () {
console.log('reverseMsg')
return this.message.split('').reverse().join('')
}
// 當多次調(diào)用的時候，之后執(zhí)行一次邏輯，或走緩存
}
})
</script>
</body>
</html>
總結：
- 函數(shù)也可以實現(xiàn)數(shù)據(jù)邏輯處理得到新數(shù)據(jù)，但是多沒使用一次執(zhí)行一次邏輯，性能不優(yōu)。
- 計算屬性，在多次使用的時候，會走緩存，性能更好。
- 將來對數(shù)據(jù)進行（較為復雜）邏輯處理，建議使用計算屬性。
接口規(guī)則-Resetful
目標：了解一種接口定義規(guī)范resetful
接口規(guī)范：如何定義接口地址，請求方式，傳參方式，對應不同的請求操作行為。
具體規(guī)則：
| 接口地址 | 請求方式 | 操作行為 |
|---|---|---|
| /brands | GET | 查詢所有列表 |
| /brands/:id | GET | 查詢單個詳情 /brands/1
|
| /brands | POST | 添加，提交的參數(shù)在請求體 |
| /brands/:id | DELETE | 刪除 /brands/1
|
| /brands/:id | PUT | 修改 /brands/1 + 請求體{name,cTime} 全部修改 |
| /brands/:id | PATCH | 修改 /brands/1 + 請求體{name} 個別修改 |
這個表格可以作為接口調(diào)用的參考。
09-插件-axios
axios是什么：
- 是一個js插件，專注于網(wǎng)絡通信（前端的xhr）。
- 它可以在前端瀏覽器使用，也可以在后臺nodejs環(huán)境中使用。
- 如果在前端使用它是基于：xhr + promise 實現(xiàn)的
axios的下載：
axios的使用：
查詢所有
查詢單個
添加操作
刪除操作
修改操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./axios.min.js"></script>
<script>
// - 查詢所有
// axios.get('http://localhost:3000/brands').then(res=>{
// // res 響應報文對象（響應狀態(tài)行+響應頭+響應主體）
// // res.data 就是響應主體（返回的數(shù)據(jù)）
// console.log(res.data)
// }).catch(err=>{
// // 錯誤對象
// console.log(err)
// })
// - 查詢單個
// axios.get('http://localhost:3000/brands/2').then(res=>{
// console.log(res.data)
// }).catch(err=>{
// console.log(err)
// })
// - 添加操作
// 第二個參數(shù)：請求體傳參對象
// axios.post('http://localhost:3000/brands',{
// name: '奧拓',
// cTime: new Date()
// }).then(res=>{
// console.log('添加成功')
// })
// - 刪除操作
// axios.delete('http://localhost:3000/brands/4').then(res=>{
// console.log('刪除成功')
// })
// - 修改操作
// 第二個參數(shù)：請求體傳參對象
// axios.patch('http://localhost:3000/brands/3',{
// name: '奧拓'
// }).then(res=>{
// console.log('修改成功')
// })
// axios.put('http://localhost:3000/brands/3',{
// name: '奧迪',
// cTime: new Date()
// }).then(res=>{
// console.log('修改成功')
// })
// - 帶查詢參數(shù)
// 1. 自己手動在地址欄拼接?后的鍵值對 ?id=2&name=寶馬
// 2. 可以傳對象提交多個篩選條件
// 3. get()中第二個參數(shù)可以用來提交參數(shù)對象 {params:{更多篩選條件}}
// json-server提供模糊查詢 字段_like
axios.get('http://localhost:3000/brands',{
params:{
name_like: '奧'
}
}).then(res=>{
console.log(res.data)
}).catch(err=>{
console.log(err)
})
</script>
</body>
</html>
