Vue基础知识零散整理:全局组件、filter、watch、computed、slot
系列文章只是对基本内容的整理和记录,不具备深度。
vue 全局组件
语法:Vue.component('组件名', 组件对象)
代码示例:
<script>
Vue.component('Button', {
template: `<button>Button-Component</button>`
});
const Header = {
template: `<div>
<h1>Header Component</h1>
<Button />
</div>`
}
const App = {
components:{Header},
template: `<div><Header/><Button/></div>`
};
new Vue({
el: '#app',
components:{App},
template: `<App/>`
})
</script>
效果:
过滤器 filter|filters
全局过滤器:
过滤器定义格式:Vue.filter('过滤器名', 过滤器处理方法)
过滤器使用格式:{{数据变量 | 过滤器名 }}
代码示例 实现并使用一个字符串翻转过滤器:
Vue.filter('reverseString', (str) => {
return str.split('').reverse().join('');
});
new Vue({
el: '#app',
template: `<div>
<input v-model="str" />
<p>Reverse: {{str | reverseString}}</p>
</div>`,
data(){
return {
str: ''
}
}
})
效果:
组价内过滤器:
过滤器定义格式 filters:{ 过滤器名: function(param) { } }
过滤器使用格式:{{数据变量 | 过滤器名 }}
代码示例:组件内的字符反转过滤器
new Vue({
el: '#app',
template: `<div>
<input v-model="str" />
<p>Reverse: {{str | reverseString}}</p>
</div>`,
data(){
return {
str: ''
}
},
filters: {
reverseString(str){
return str.split('').reverse().join('')
}
}
})
效果同上面是一样的。
过滤器使用额外参数
如果过滤器需要通过额外的参数进行不同的操作,可以在函数声明的第一个参数之后,增加需要的参数,比如:
reverseString(data, arg1,arg2,....){
return data;
}
其中,data 是传入过滤器需要处理的值,而后面的 arg1 ... 则是额外的参数,而在模板中使用的时候,可以直接擦传入其他额外的参数值。比如:
{{ str | reverString('type1', 'arg2') }}
watch 单属性变化监听
注意 watch 里面不能更新 watch 的data,否则会可能造成死循环,vue 在 development 版本会发警告。
使用方式:
watch: {
// key 为在 data 中的属性键名
// 参数 newValue 和 oldValue 分别是新旧值
key(newValue, oldValue){
}
}
watch 普通常量状态
代码示例:
new Vue({
el: '#app',
template: `<div>
<input v-model="str" />
<p>str: {{str}}</p>
<p>watchStr: {{watchStr}}</p>
</div>`,
data(){
return {
str: '',
watchStr: ''
}
},
watch: {
str() {
if(this.str === 'abc') this.watchStr = Date.now();
}
}
})
效果:
watch 对象或数组
因为对象和数组使用的是引用,不能直接监听整个对象或者数组,需要在 watch
中将对象或者数组名声明成一个对象,然后将 deep
属性置为 true
,在 handler(newV,oldV)
中处理 watch 操作。
watch 对象代码示例(数组一样):
new Vue({
el: '#app',
template: `<div>
<input v-model="obj.name" />
<p>obj.name: {{obj.name}}</p>
</div>`,
data(){
return {
obj: {
name: '',
newName:''
},
}
},
watch: {
obj:{
deep: true,
handler(newV, oldV) {
console.log(newV.name,oldV.name);
}
}
}
})
效果:
computed
定义方式:computed:{newKey(){return newValue}}
使用方式:{{ newKey }}
框架优化:如果 computed 中值未发生任何变化,是不会调用方法重新计算值。
代码示例:
new Vue({
el: '#app',
template: `<div>
<input v-model="val1" />
<input v-model="val2" />
<p>newV:{{newV}}</p>
</div>`,
data(){
return {
val1: '',
val2: ''
}
},
computed:{
newV(){return this.val1 + this.val2}
}
})
效果:
slot
匿名 slot
slot
是 Vue 的内置组件,主要是为了父组件能够非常方便的向子组件传递DOM或者其他的组件内容,而不仅仅是传值。
slot
本质和 React this.props.children
其实是一样的,但因为不是 JSX,因此在不使用 JSX 开发 vue 的时候,slot
更加实用方便。
代码示例:
const Header = {
template: `<div><slot></slot></div>`
}
const TitleComponent = {
template: `<s>deleted Title Component</s>`
}
const App = {
components: {Header, TitleComponent},
template:`<div>
<Header> <h1> H1 title </h1> </Header>
<Header> <h2> H2 title </h2> </Header>
<Header> <h3> <TitleComponent /> </h3> </Header>
</div>`
}
new Vue({
components:{App},
el: '#app',
template: `<div><App /></div>`,
data(){return {}},
})
上述代码中,声明了一个 Header
组件,其中由一个 slot,然后在 App 中调用了三次 Header 组件,并且每次传入的内容都不一样,两次是 HTML DOM,而第三次是 HTML + Vue Component,效果如下:
具名 slot
具名 slot 主要应用场景是组件内部需要多个 slot 的情况,将插入 DOM 插入到指定的位置
具名 slot 声明方式:<slot name="slotName"> </slot>
通过 name
声明 slot 的name
具名 slot 使用方式:<h1 slot="slotName"> </h1 >
在 DOM 中,通过 slot=
关联声明的 slot
代码示例:
const Header = {
template: `<div>
<p> first slot </p>
<slot name="first"></slot>
<p> second slot </p>
<slot name="second"></slot>
</div>`
}
const TitleComponent = {
template: `<s>deleted Title Component</s>`
}
const App = {
components: {Header, TitleComponent},
template:`<div>
<Header>
<h1 slot="first"> Fist slot DOM</h1>
<TitleComponent slot="second"> second slot DOM </TitleComponent>
</Header>
</div>`
}
new Vue({
components:{App},
el: '#app',
template: `<div><App /></div>`,
data(){return {}},
})
效果:
文章版权:Postbird-There I am , in the world more exciting!
本文链接:http://www.ptbird.cn/vue-base-filter-watch-computed-etc.html
转载请注明文章原始出处 !