一. vue過濾器 //文本格式化
Vue.js 允許你自定義過濾器，可被用于一些常見的文本格式化渗勘。
過濾器可以用在兩個地方：雙花括號插值和v-bind表達式
過濾器應該被添加在 JavaScript 表達式的尾部沐绒，由“管道”符號指示：
<!-- 在雙花括號中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
<!-- 過濾器可以串聯(lián) -->
{{ message | filterA | filterB }}
你可以在一個組件的選項中定義本地的過濾器：
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
或者在創(chuàng)建 Vue 實例之前全局定義過濾器：
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
注意:過濾器的第一個參數(shù)已經(jīng)被規(guī)定死了,永遠都是 過濾器 管道符號前面的那個數(shù)據(jù)
二. 數(shù)組中的那些方法是響應式的?
我們知道,我們可以用v-for遍歷數(shù)組, 那么數(shù)組中那些方法是改變自身的?只有改變自身的方法才不用重新賦值吧
1.以下方法是響應式的
let arr =['a','b','c','d']
//1 push數(shù)組最后面添加元素
arr.push('e')
//2.pop刪除最后一個元素
arr.pop()
//3.shift刪除第一個元素
arr.shift()
//4.unshift 數(shù)組最前面添加元素
arr.unshift('e')
//5.splice 刪除/插入/替換元素
arr.splice(2,1) //從2開始刪除1個
arr.splice(2,0,'f') //從2之后插入元素
arr.splice(2,1,'f') //替換2之后的元素(從2刪除1個元素,再添加一個元素)
//6.sort排序
arr.sort()
//7. reverse()反序
arr.reverse()
2.以下方法不是響應式的
通過索引值改變數(shù)組內(nèi)容不是響應式的
this.arr[2]='f'
如何解決?
this.arr.splice(2,1,'f')
//或者
Vue.set(this.arr,2,'f') //vue方式
三. 插槽 slot
插槽的目的是提高組件的拓展性, 就像電腦的USB插槽.
解決子組件模板太過固化不靈活的問題,這時候我們給模板預備插槽
比如:
下面的例子,不同的導航欄存在區(qū)別,同時又有共性,
我們可以定義一個組件,這個組件里有三個插槽,每個插槽里都可以傳入不同的東西,這使得這個導航欄組件可以應用的更廣
這里我們的思想是: 抽取共性,保留插槽
1.插槽的基本使用
定義插槽<slot>默認值</slot>
let template=`
<div>
<p>下面讓你自由發(fā)揮,你給我啥我顯示啥</p>
<slot></slot> <--這就是個插槽,里面的內(nèi)容由調(diào)用者決定 -->
</div>
這樣子組件就有插槽了,父組件調(diào)用時可以往里面插入東西了
<子組件> 把要插入的內(nèi)容寫在這,可以是任何標簽 </子組件>
2.具名插槽
<slot name="left"></slot>
<--這個插槽名叫l(wèi)eft --> <slot name="center"></slot>
調(diào)用時: 要在插入的標簽中使用 slot="插槽名" 來插入
<子組件> <插入的標簽 slot="left"></插入的標簽> </子組件>
例:神還原上面 的京東截圖 ??
<!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>
<div id='app'>
<cpn>
<span slot="left">三</span>
<span slot="center">JD<input type="text" placeholder="??這是一個搜索框"></span>
<button slot="right">登錄</button>
</cpn>
<cpn><input slot="center" type="text" placeholder="??這是一個搜索框"></cpn>
<cpn><strong slot="center">"購物車"</strong></cpn>
<cpn>
<table slot="center" style="display: inline-block;">
<tr>
<td> ??商品 </td>
<td> 評價 </td>
<td> 詳情 </td>
<td> 推薦 </td>
</tr>
</table>
</cpn>
<cpn></cpn>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
let template = `
<div>
<slot name="left"><</slot>
<slot name="center"><span>默認顯示一個span</span></slot>
<slot name="right">...</slot>
</div>
`
const cpn = {
template,
}
const vm = new Vue({
el: '#app',
components: {
cpn
}
})
</script>
</body>
</html>
3. 作用域插槽
父組件通過作用域插槽拿到子組件數(shù)據(jù),但是按照父組件自己的方式展示
要做到這一點,我們要在子組件模板中聲明slot時 v-bind動態(tài)綁定數(shù)據(jù)源
在父組件調(diào)用時,標簽中加入slot-scope='slot' 來獲取slot標簽
然后用slot.data獲取數(shù)據(jù),用來展示
<!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>
<div id='app'>
<cpn></cpn>
<cpn>
<div slot-scope='slot'>
<span v-for="item in slot.data" >{{item}} - </span> 父組件的展示
</div>
</cpn>
</div>
<script src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js'></script>
<script>
let template = `
<div>
<slot :data='languages'> //子組件用列表來展示
<ul>
<li v-for="language in languages" :key="language">{{language}}</li>
</ul>
</slot>
</div>
`
const cpn = {
template,
data() {
return {
languages: ['c', "python", 'javascript', 'c#', 'DART', 'JAVA']
}
},
}
const vm = new Vue({
el: '#app',
components: {
cpn
}
})
</script>
</body>
</html>
4. 不要在插槽上直接設置class
<slot name="item-text" :class="{acticv:isActive}"></slot>
這種寫法不會起作用,
因為插槽是直接被替換成別的標簽了,
那個標簽替換它的時候不會關注到它里面的class
正確的寫法是:
<div :class="{acticv:isActive}">
<slot name="item-text"></slot>
</div>
