版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/enjoy_sun_moon/article/details/89000150
<router-view name='righjt'></route-view>< route-view name="left"></route-view> 命名视图 :给router-view加上name 只有name是left的组件能放在这里
用处:当默认的时候能够将几个组件同时显示出来,将一 一对应name的值和下面组件中的
<style>
.header{
background-color: orange;
height: 80px;
}
.container{
display: flex;
height: 600px;
}
.left{
background-color: lightcoral;
flex: 2;
}
.main{
background-color: lightblue;
flex: 8;
}
h1{
margin: 0;
padding: 0;
font-size: 10px;
}
html, body{
margin: 0;
padding: 0;
}
</style>
<div id="app">
<router-view></router-view>
<div class="container">
<router-view name='left'></router-view>
<router-view name='main'></router-view>
</div>
</div>
<script>
var header = {
template: '<h1 class="header">header头部区域</h1>'
}
var leftBox = {
template: '<h1 class="left">Left侧边栏</h1>'
}
var mainBox = {
template: '<h1 class="main">mainBox头部区域</h1>'
}
var router = new VueRouter({
routes: [
/*
{path: '/', component: header},
{path: '/left', component: leftBox},
{path: '/main', component:mainBox},
*/
{path:'/', components: {
'default': header, //header 对应的是上面router-view中的name一一对应填入相应组件
'left': leftBox,
'main': mainBox
}}
]
})
var vm = new Vue({
el: '#app',
data: {
},
methods: {
},
router
})
</script>
watch属性:
监听属性变化 如果变化立即执行函数
用途:watch监听路由变化 和 其他一些属性的变化比较方便
watch:{
'$route.path':function(newval,oldval){
console.log(newval)
console.log(oldval)
}
},
computed属性
computed: {
/*
在computed中可以定义一些属性,这些属性叫做计算属性, 本质就是一个方法。
只不过我们在使用这些计算属性的时候,只不过我们在使用这些计算属性的时候,
是把他们的名称直接当作属性来用的;并不会把计算属性当作方法去调用
*/
//注意1:计算属性,在引用的时候,一定不加()去调用,直接把它当作普通属性去使用就好了
//注意2:只要计算属性这个function内部所用到的任何data中的数据发生了变化,就会立即重新计算这个属性的值
//注意3:计算属性的求值结果,会被缓存起来,方便下次直接使用,如果计算属性方法中,所依赖任何数据都没有发生改变,则不会重新对计算属性求值
'fullName': function(){
console.log('fullName被计算一次')
return this.firstName + '-' + this.lastName
}
},
三者相同点 watch 和 computed都对应的是函数
三者区别 computed 一定要return数据,并且数据会被缓存。
watch : 不用return 直接用this.data修改就行 ,键是你要监听的属性或者表达式,值是对应回调函数,主要用来监听数据变化。
methods更适合写业务逻辑。