页面分成不同的组件

 vue和webpack的配置和使用 

styles 

1.global样式

2.背景虚化的样式

3.style标签中 设定scoped只应用于指定组件内

4.组件引用

5.Vue中监听事件 ：v-on：事件名称，@事件名称--（后面可以添加修饰符）

6.class的动态写法：：class = “[]”

7.v-for 循环 使用是，需要申明唯一key 提高性能

8.required=true 表示必传参数

.vue文件 和 .jsx 文件, 最终都转化成 render() { } 方法 .

将模板部分写入 render() { } 里面.

.jsx 文件就是将 HTML 写在 JavaScript  文件里面.

在数据声明的地方使用数据，不要在底层写

1qqqq

#app{

    position absolute

    left 0

    right 0

    top 0

    bottom 0

}

#cover{

    position absolute

    left 0

    right 0

    top 0

    bottom 0

    background-color #999

    opacity .9

    z-index -1

}

Error: Cannot find module '@babel/core'

解决方法 

npm uninstall babel-loader

npm install babel-loader@7.1.5

webpack.config.js中的ruler ：/\.styl$/改为/\.styl(us)?$/

循环比较消耗资源:key用来标明下次循环有没有变动，如果key相同他会复用这个节点，不会生成新的节点删除原来的节点。这样可以提高效率

jsx语法与.vue的单文件语法各有各的好处，.vue结构更清晰组件化更强，而jsx语法则可以使用js的原生方法，更加灵活一些

动态css的数组写法

父组件的data

子组件的props

jsx的变量和样式

jsx的写法

css样式

jsx语法

jsx的export default里，

data()下的return跟的是花括号，

render()下的return跟的是圆括号。

哦，真的是要被自己蠢哭了。

filter是从props里传入的，在script部分props里需要申明filter的类型。 

props:{    
    filter:{        
        type:String,        
        required:true    
    }
}

.helper {
    font-weight 100
    display flex
    justify-content space-between
    padding 5px 0
    line-height 30px
    background-color #fff
    font-size 14px
    font-smoothing antialiased
}
.left,.clear,.tabs {
    padding 0 10px
    box-sizing border-box
}
.left,.clear {
    width 150px
}
.left {
    text-align left
}
.clear {
    text-align right
    cursor pointer
}
.tabs {
    width 200px
    display flex
    justify-content space-around
    * {
        display inline-block
        padding 0 10px
        cursor pointer
        border 1px solid rgba(175,47,47,0)
        &.active {
            border-color rgba(175,47,47,0.4)
            border-radius 5px
        }
    }
}

.todo-item {
    position relative
    background-color #fff
    font-size 24px
    border-bottom qpx solid rgba(0,0,0,0.06)
    &:hover {
        .destroy:after {
            content: 'x'
        }
    }
    label {
        white-space pre-line
        word-break break-all
        padding 15px 60px 15px 15px
        margin-left 45px
        display block
        line-height 1.2
        transition color 0.4s
    }
    &.completed {
        label {
            color #d9d9d9
            text-decoration line-through
        }
    }
    .toggle {
        text-align center
        width 40px
        height 40px
        position absolute
        top 0
        bottom 0
        margin auto 0
        border none
        appearance none
        outline none
        &:after {
            content url("../assets/images/round.svg")
        }
        &:checked:after {
            content url("../assets/images/done.svg")
        }
    }
    .destroy {
        position absolute
        top 0
        right 10px
        bottom 0
        width 40px
        height 40px
        margin auto 0
        font-size 30px
        color #cc9a9a
        margin-bottom 11px
        transition color 0.2s ease-out
        background-color transparent
        appearance none
        border-width 0
        cursor pointer
        outline none
    }
}

html,body{
  margin 0
  padding 0
  width 100%
  height 100%
}
  body{
    background-image :url("../images/bg.jpg");
    background-size: cover;
    background-position :center;
    font:14px;
    color: #4d4d4d;
    font-weight :300;
  }

没看懂 :class

如何在jsx里面写循环

<div id="footer">

     {  

        [1,2,3].map((a) => {

        return <div>{a}</div>

        })

     }

     <span>{this.author} CODEING</span>

   </div>

header.vue

"babel-helper-vue-jsx-merge-props": "^2.0.3",

"babel-plugin-syntax-jsx": "^6.18.0",

写样式时，当加上lang="stylus"时，程序就报错了，一直提示可能缺少相应的loader什么的，识别不了#app，找了半天找不到原因，看了别人的配置，发现我多了一个$,配置styl文件的loader时，正则不能写成以.styl结尾的匹配方式，即最后不能加$，这可能是因为要解析vue文件中的样式的缘故吧，不仅仅是styl格式的文件

{

test:/\.styl/,

use:[

'style-loader',

'css-loader',

{

loader: 'postcss-loader',

options: {

sourceMap: true

}

},

'stylus-loader'

]

},

编译的时候提示没有file-loader，于是就安装了，安装后自作多情的在图片的url-loader下面加上了这个，于是背景图片就出不来了，去掉file-loader的配置就出来了