1-1 基础

一、插槽

1-1 定义插槽

Header.vue
<template>
        <div>
            <p>hello world</p>
            <slot name="header"></slot>
        </div>
</template>

1-2 使用插槽

<Header>
        <template v-slot:header>
          <h1>header</h1>
        </template>
</Header>

二、computed计算属性

//当参数计算的值改变的时候,结果改变
<template>
    <div id="msg">{{total}}</div>
</template>
<script>
export default {
    data(){
        return {
            xing:"cheng",
            name:"chao"
        }
    },
    computed:{
        total(){
            return this.xing+this.name
        }
    }
}
</script>

三、事件

//1.@keyup.enter 敲击键盘的enter时触发
<input type="text" @keyup.enter="addTodo"/>

四、添加多个class

    <div :class="['todo-item',todo.completed?'complete':'']">