今天完成的事情：

1.继续学习vue

明天计划的事情：

1.推进任务推进任务。

遇到的问题和收获：

1.命名细节，组件命名可以用驼峰命名法，但在html标签时，要这样变成横杠

2.template定义出id后，将其在外面写出再调用。这样的好处是能提示代码

data定义为一个function可以理解为变量私有化，组件复用时，不会互相影响。

  <button-counter title="title-1"></button-counter>


</div>

<template id="btn1">
    <button  @click='clickFun'>{{title}}+click here + {{count}}</button>
</template>

<script>
    //创立一个按钮组件
    Vue.component("buttonCounter", {
        props: ['title'],
        data: function () {
            return {
                count: 0
            }
        },
        template: "#btn1",

利用component实现组件切换，is后面指定要展示的组件的名称

<div id="app-4">
    <a href="#" @click="name='login'">登录</a>
    <a href="#" @click="name='register'">注册</a>
    <component :is="name"></component>
    </div>

    <template id="btn2">
    <div>登录</div>
    </template>

    <template id="btn4">
    <div>注册</div>
    </template>

Vue.component("login",
    {
        template: "#btn2"
    }
);
Vue.component("register",
    {
        template: "#btn4"
    }
);
//vm实例
var vm = new Vue({
    el: '#app-4',
    data: {
        name: "login",//component里:is绑定的组件名称
        flag: true

实现一个点击按钮增加字体大小的功能

<div :style="{fontSize:postFontSize+'rem'}">
    <transition>
        <component :is="name" @enlarge-text="postFontSize += 0.1"></component>
    </transition>
</div>

<template id="btn2">
    <div>登录</div>
</template>

<template id="btn4">
        <button @click="$emit('enlarge-text')">点击增加字号</button>
</template>

var vm = new Vue({
    el: '#app-4',
    data: {
        postFontSize: 1,

$emit

参数：

{string} eventName

[...args]

触发当前实例上的事件。附加参数都会传给监听器回调。

此处是触发了

enlarge-text

使用事件抛出一个值，使用$emit的第二个参数提供需要放大多少，父级组件监听到这个事件的时候，可以通过$event访问到被抛出的这个值。

<!--    <transition>-->
        <component :is="name" @enlarge-text="postFontSize += $event"></component>
<!--    </transition>-->

<template id="btn4">
    <div>
        <div>注册</div>
        <button @click="$emit('enlarge-text',1)">点击增加字号</button>
    </div>

</template>

学习vue这几天觉得这个东西用起来感觉我上手不快。说好的进度一直没有推进。