一. vue过滤器 //文本格式化
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。
过滤器可以用在两个地方：双花括号插值和v-bind表达式
过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：
<!-- 在双花括号中 -->
{{ message | capitalize }}
<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>
<!-- 过滤器可以串联 -->
{{ message | filterA | filterB }}
你可以在一个组件的选项中定义本地的过滤器：
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
或者在创建 Vue 实例之前全局定义过滤器：
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})
new Vue({
// ...
})
注意:过滤器的第一个参数已经被规定死了,永远都是 过滤器 管道符号前面的那个数据
二. 数组中的那些方法是响应式的?
我们知道,我们可以用v-for遍历数组, 那么数组中那些方法是改变自身的?只有改变自身的方法才不用重新赋值吧
1.以下方法是响应式的
let arr =['a','b','c','d']
//1 push数组最后面添加元素
arr.push('e')
//2.pop删除最后一个元素
arr.pop()
//3.shift删除第一个元素
arr.shift()
//4.unshift 数组最前面添加元素
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.以下方法不是响应式的
通过索引值改变数组内容不是响应式的
this.arr[2]='f'
如何解决?
this.arr.splice(2,1,'f')
//或者
Vue.set(this.arr,2,'f') //vue方式
三. 插槽 slot
插槽的目的是提高组件的拓展性, 就像电脑的USB插槽.
解决子组件模板太过固化不灵活的问题,这时候我们给模板预备插槽
比如:
下面的例子,不同的导航栏存在区别,同时又有共性,
我们可以定义一个组件,这个组件里有三个插槽,每个插槽里都可以传入不同的东西,这使得这个导航栏组件可以应用的更广
这里我们的思想是: 抽取共性,保留插槽
1.插槽的基本使用
定义插槽<slot>默认值</slot>
let template=`
<div>
<p>下面让你自由发挥,你给我啥我显示啥</p>
<slot></slot> <--这就是个插槽,里面的内容由调用者决定 -->
</div>
这样子组件就有插槽了,父组件调用时可以往里面插入东西了
<子组件> 把要插入的内容写在这,可以是任何标签 </子组件>
2.具名插槽
<slot name="left"></slot>
<--这个插槽名叫left --> <slot name="center"></slot>
调用时: 要在插入的标签中使用 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. 作用域插槽
父组件通过作用域插槽拿到子组件数据,但是按照父组件自己的方式展示
要做到这一点,我们要在子组件模板中声明slot时 v-bind动态绑定数据源
在父组件调用时,标签中加入slot-scope='slot' 来获取slot标签
然后用slot.data获取数据,用来展示
<!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>
网友评论