vue scoped的作用

在 vue的组件化开发中，我们会给　　＜ｓｔｙｌｅ＞＜／ｓｔｙｌｅ＞　中加上一些参数，

比如：ｓｃｏｐｅｄ　　，或者　　ｌａｎｇ＝＂ｌｅｓｓ＂；

ｓｃｏｐｅｄ　的意思是下面的样式的作用域就是当前这个组件，比如ａａ．ｖｕｅ这个组件，

所有的样式只在当前这个组件中有效果，那么ｌａｎｇ＝＂ｌｅｓｓ＂的意思是，声明我是用的

是ｌｅｓｓ　还是　ｃｓｓ　还是ｓａｓｓ等等；

下面是个小例子：　主要看ｓｔｙｌｅ部分，这里我使用了ｌｅｓｓ，并且设置样式只在当前

组件中有效果

< template>

< div class= "us">

< h3 @click="info1">关于我们--2018 更新</ h3>

< p v-if="skate">{{skate}}</ P>

< h3 @click="info2">join us --2018更新</ h3>

< P v-if="skate">{{music}}</ P>

</ div>

</ template>

< script>

import axios from "axios";

import Mock from "mockjs";

Mock. mock( 'http://www.bai.com',{

'skate': '大家来自天南海北,因为轮滑开始有了交集,时光不老，我们不散!',

'music': `我们喜欢音乐,我们喜欢轮滑,我们喜欢飞的感觉,仿佛有了翅膀,这里无拘无束,

只是让你不再寂寞的一个人飞,欢迎加入我们,相关活动我们会在活动页面发布，

请注意浏览！`,

})

export default {

name: "Us",

data(){

return{

skate: "",

music: ""

}

},

methods:{

info1(){

let that = this;

axios. get( "http://www.bai.com")

. then( function( response){

// console.log(response.data.skate);

that.skate =response.data.skate;

})

. catch( function( response){

})

},

info2(){

let that = this;

axios. get( "http://www.bai.com")

. then( function( response){

that.music =response.data.music;

})

. catch( function( response){

})

}

}

}

</ script>

< style lang= "less" scoped>

@base: 32;

.us{

width: 100 %;

height: auto;

box-sizing: border-box;

h3{

box-sizing: border-box;

font-size: unit( 8 /@base,rem);

height: unit( 30 /@base,rem);

padding: unit( 3 /@base,rem);

padding-top: unit( 5 /@base,rem);

color: #0084ff;

border-bottom: 1 px solid #f5f5f5;

}

p{

padding: unit( 10 /@base,rem);

color: #333;

font-size: unit( 10 /@base,rem);

line-height: unit( 20 /@base,rem);

}

}

</ style>