十Vue-cli组件定义和本地样式

Posted 2021-03-19 mr-simple001

1.定义：vue中分成三个模块，template,script,style。然后在script中需要导出组件对象 export default.
代码如下：

<template>
    <div class="mypage">
        <h1>我的vue页面</h1>
        <p class="info">{{info}}</p>
    </div>
</template>

<script>
export default {
    //这个里面可以放name,data,methods,生命周期函数,computed等
    name:"MyPage",
    data:function(){
        return{
            info:"欢迎来到我的vue页面"
        }
    }
}
</script>

<style scoped>
.info{
    background-color: brown;
    color: #fff;
}
</style>

2.导入： import XXX from "xxx"
代码如下：

<script>
//es6的语法要导入MyPage.vue文件
import MyPage from "./components/MyPage"
//import MyPage中的MyPage可以随便气名字
export default {
  name: ‘app‘,
  components: {
    MyPage
  }
}
</script>

3.在XXX.vue中定义的样式默认是全可用的，可以通过在 style上添加 scoped 属性，这样只能在当前组件有效，利用这一点，我们可以在App.vue中使用全局样式的特点，去除浏览器默认的样式。
代码如下：
XXX.vue中的样式:

<style scoped>
.info{
    background-color: brown;
    color: #fff;
}
</style>

App.vue中的样式比如：

<style>
body,div,p,span,h1,h2,h3,h4,h5{
  margin:0;
  padding: 0;
  list-style: none;
}
</style>