vue学习Day08

1.之前的路由规则，当匹配到一个路由的时候，只能在页面的容器中，放置唯一的一个组件

那怎么解决这个问题？

命名视图

假设有header，sidebar, content,footer四个组件

const router=new VueRouter({

routes:[

{path:’/’,components:{

//组件名称：组件对象

’top’:header,

‘left’:sidebar,

‘righter’:content,

‘bottom’:footer

}}

]

})

然后在router-view里给name属性赋值上组件的名字

<router-view name=“top”></router-view>

<router-view name=“left”></router-view>

<router-view name=“right”></router-view>

<router-view name=“bottom”></router-view> 

2.watch

表示监听指定数据的改变，键值队 ’键是要监听的数据‘：数据变化时的处理函数

watch:{

 ‘firstname’:function(newval,oldval){

    This.fullname=newval+this.lastname

},

‘lastname’:function(newval,oldval){

this.fullname=thhis.firstname+newval

}

}

那这个watch相比于v-model有什么优势？可以监听虚拟的数据，比如url地址的改变

3.computed

默认只有getter的计算属性

computed:{计算属性区域

‘fullname’:function(){

  Return this.firstnam+’-’+this.lastname; 

} 

//这个fullname就是计算属性，在页面中，使用计算属性的时候，永远把它当作普通的属性来使用

也就是在文本框里写v-model=‘fullname’

//只要计算属性的function中，依赖的任何数据发生变化了，则会触发计算属性的重新求值

//计算属性的值，如果第一次计算后，没有发生过变化，则会把第一次的值缓存起来，供后续使用 ，这就能提高性能 

}

4.计算属性的get和post

Get方法表示外界要引用fullname的值

Set表示外界重新为fullname赋值

computed:{

‘fullname’:{

get(){ return this.firstname+’-’+this.lastname }

set(val){

Const parts=val.split(‘-’);

This.firstname=parts[0] || ’’;

This.lastname=parts[1] || ‘’;

}

}

}

1. computed属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
2. methods方法表示一个具体的操作，主要书写业务逻辑；
3. watch一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；可以看作是computed和methods的结合体；