使用vue脚手架时的知识点

    xiaoxiao2022-07-02  106

    使用vue脚手架时的知识点

    样式作用域vue-router安装包

    样式作用域

    在不同的组件之中对同名标签设置不同的样式时,样式之间会覆盖,比如在 HelloWorld.vue 中设置: <template> <div class="hello"> <h1>{{ msg }}</h1> </div> </template> <style> h1 { color: red; } </style>

    而在 Test.vue 里面设置:

    <template> <h1>{{ name }}</h1> </template> <style> h1{ color: green; } </style>

    最后浏览器页面是:

    两个组件的样式彼此之间覆盖了,所以可以在 style 里面使用 scoped 属性来声明作用域: <style scoped> h1{ color: green; } </style>

    最后的结果就会和我们想的一样了:

    当然,假如使用的是 webstorm 新建的组件,会在模板中默认使用 scoped

    vue-router

    vue-router 基本使用

    安装包

    开发所需的包称为开发依赖:使用 --save-dev 的标志进行安装应用运行所需的包称为直接依赖:使用 --save 的标志进行安装
    最新回复(0)