今天完成的事情：

1.继续学习vue官方文档

明天计划的事情：

1.试试能不能上手做任务

遇到的问题和收获：

1.

·按键修饰符

<button @keyup.enter="set()">add</button>

methods: {
    set: function () {
              alert("1")
    }
}

只有在 `key` 是 `Enter` 时调用set（）

·系统修饰键

<button @click.ctrl="set()">add</button>

仅在按下相应按键时才触发鼠标或键盘事件的监听器

此处需要按住ctrl键才能触发鼠标点击事件。

·.exact 修饰符

<button @click.ctrl.exact="set()">add</button>

exact修饰符允许你控制由精确的系统修饰符组合触发的事件

此处，仅当ctrl被按下才能触发函数。如果没有exact，同时按下其它键和ctrl也会被触发。

·表单输入绑定

单行文字

<label>
    <input v-model="msg" placeholder="this" type="text">
</label>
<p>here:{{msg}}</p>

var vm = new Vue({
    el: '#app-4',
    data: {
             msg: ""
    }

使用v-model进行双向绑定

多行文字

<label>
    <textarea v-model="msg2" placeholder="name"></textarea>
</label>
<p>here:{{msg2}}</p>

复选框

    <input type="checkbox" id="jack" value="AAA" v-model="checkName">
    <label for="jack">AAA</label>
    <input type="checkbox" id="rose" value="BBB" v-model="checkName">
    <label for="rose">BBB</label>
    <input type="checkbox" id="mike" value="CCC" v-model="checkName">
    <label for="mike">CCC</label>
    <br>
<span>this chose:{{checkName}}</span>
</div>

var vm = new Vue({
    el: '#app-4',
    data: {
               msg: "",
        msg2: "",
        checked: true,
        checkName: []
    }

单选按钮

<label for="game">one</label><input type="radio" id="game" v-model="start" value="one">
<br>
<label for="game2">two</label><input type="radio" id="game2" v-model="start" value="two">
<br>
<span>which:{{start}}</span>

·修饰符

.lazy，在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步

也就是并不是实时更新，并不是输入一个字更新一个字

<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >

·组件

组件是可以复用的vue实例，在开发过程中可以把经常重复的功能封装为组件，达到快捷开发的目的

使用Vue.component函数创建一个组件，

第一个参数是组件的名称，

第二个参数以对象的形式描述一个组件，data并不是直接提供一个对象，而必须是一个函数，这是为了让每一个实例都可以维护一份被返回对象的独立的拷贝。

template模板内容为一个按钮。

Vue.component("button-counter", {
    data: function () {
        return {
        count: 0
        }
    },
    template: "<button @click='clickFun'>click here + {{count}}</button>",
    methods:{
    clickFun:function () {
        this.count++
    }
    }
});

<button-counter class="name"></button-counter>

可直接调用，名称即为组件名称

目前是Vue.component全局注册的

全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

prop 是父组件用来传递数据的一个自定义属性。

Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。

动态prop

类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件

这在你一开始不清楚要渲染的具体内容， 是非常有用的。

现在的话看了一些例子，写了一下，还没有具体完全上手。争取尽快进入任务