zoukankan      html  css  js  c++  java
  • 十、Vue-cli组件定义和本地样式

    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>
  • 相关阅读:
    Windows7与Window2008 64位IIS7上面DCOM配置Excel、Word
    C#连接SQLite的...方法
    VS2010版快捷键
    ajax 安装包下载
    Type InvokeMember()用法简介
    Lambda表达式
    多源最短路径算法
    单源点有权图的最短路径算法
    单源无权图的最短路径算法
    Tree Traversals Again
  • 原文地址:https://www.cnblogs.com/Mr-Simple001/p/12108692.html
Copyright © 2011-2022 走看看