vue中的scope,vue css scope
本文主要详细介绍了Vue组件学习的范围。本文中的示例代码非常详细，具有一定的参考价值。感兴趣的朋友可以参考一下，希望能帮到你。
目录
简介摘要
简介
主要介绍作用域的功能。
先弄一个案例：
main.js
//引入vue依赖
从“vue”导入Vue
//引入组件App
从导入应用程序。/App.vue
//关闭生产提示
Vue.config.productionTip=false
//创建一个vue实例
新Vue({
//这个我还没学会。要知道他的作用是把app放进容器里。
render: h=h(App)，
//为这个vue实例配置管理id为app的容器。
}).$ mount(“# app”)
App.vue:
模板
！-写作结构-
差异
学校/学校
整点
学生/学生
/div
/模板
脚本
//原简介
//从导入学校。/School.vue
//从导入学生。/Student.vue
//修改后的
//介绍学校组件和学生组件，涉及es模块化的语法。
从导入学校。/components/School.vue
从导入学生。/components/Student.vue
导出默认值{
组件：{
//注册组件
学校，
学生
}
}
/脚本
风格
/风格
学校. vue:
模板
！-写组件结构代码，也就是html代码-
！-你需要一个div把它括起来，也就是只能有一个根元素。通常，使用一个div
橙色
学校：{ {学校名称}}/div
Div地址：{ {学校地址}}/div
/div
/模板
脚本
//写交互代码的地方，需要暴露，引入其他地方。
//这个需要了解一点es6模块化的知识。通常，这里使用默认公开，因为这是一个单文件组件，只需要公开一个组件对象，
//而且引入默认公开的组件引入语法更简单。
导出默认值{
data() {
返回{
校名：“尚硅谷”，
学校：“北京”
}
},
}
/脚本
风格
/*在那里书写样式*/。橙色{
背景色：橙色；
}
/风格
学生. vue:
模板
！-写组件结构代码，也就是html代码-
！-你需要一个div把它括起来，也就是只能有一个根元素。通常，使用一个div
橙色
Div名称：{ {学生名称}}/div
Div年龄：{ {学生年龄}}/div
/div
/模板
脚本
//写交互代码的地方，需要暴露，引入其他地方。
//这个需要了解一点es6模块化的知识。通常，这里使用默认公开，因为这是一个单文件组件，只需要公开一个组件对象，
//而且引入默认公开的组件引入语法更简单。
导出默认值{
data() {
返回{
学生姓名：“张三”，
学生年龄：18岁
}
},
}
/脚本
风格
/*在那里书写样式*/。橙色{
背景色：灰色；
}
/风格
效果：
再看两个组件的样式代码，都是用同名的orange类来设置样式，只是一个把背景色设置为橙色，一个设置为灰色。父组件应用程序将最终汇总所有子组件中的样式。在这种情况下，这两个样式设置冲突，所以学校组件的背景色应该是橙色的，但它变成了灰色。
所以引入了scoped的作用：使样式在本地生效，防止冲突。
添加到样式标签中，
结果：
总结
本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。