Vue 学习

Vue中的v-model

Vue中的v-model是实现表单输入和应用状态之间的双向绑定。
关键是表单输入。
https://cn.vuejs.org/v2/guide/forms.html
里面说明了v-model指令实现表单控件元素上创建双向数据绑定。它会根据控件自动选取正确的方法来更新元素。就是这样神奇,因为神奇所以有点难以理解。v-model不过是语法糖，负责监听用户的输入事件以更新数据，并特别处理一些极端的例子。

注意
v-model会忽略所有表单元素的value、checked、selected特性的初始值。因为它会选择Vue实例数据来作为具体的值。你应该通过JavaScript在组件的data选项中声明初始值。
对于单选按钮，勾选框以及选择列表选项，v-model绑定的value通常是静态字符串（对于勾选框是逻辑值）

v-model是以下示例的语法糖：

<input
  v-bind:value="something"
  v-on:input="something = $event.target.value">

Vue中的v-bind

插值 的方式有四种，文本（使用{{}}来绑定）、纯html（使用v-html来绑定）、属性（使用v-bind来绑定）和JavaScript表达式绑定。
v-bind就是属性绑定的一种，用来绑定属性的。

过滤器

过滤器通过|的方式用在v-bind和{{}}中，定义为filters：{}；是用来做简单的文本转换，如果是复杂的文本转换，使用caputed更好。Vue中会自动将一个属性放到过滤器的第一个参数中。

Vue的生命周期图

当实例创建以后，能够更新数据的就是update了，不知道是不是和push方法有关系？mounted是第一开始加载数据。这里的update也用的观察者模式？

自定义事件

父组件使用props传递数据给子组件，如果子组件将数据传递回去，就使用自定义事件。

父组件传递数据给子组件

*静态的prop

静态prop就是通过设置属性的方式来传递数据
下面是子组件的全局注册：

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样，prop 可以用在模板内
  // 同样也可以在 vm 实例中像“this.message”这样使用
  template: '<span>{{ message }}</span>'
})

这样在使用的时候可以直接使用message，就可以传递静态的prop数据了。

<child message="hello!"></child>

*动态prop

动态prop简单说就是，在设置下子组件的属性时，可以动态更新下属性值。那么理所当然，需要使用v-bind，因为v-bind天生就是绑定属性的。
其实真正牛的是v-model属性，因为这个才是真正实现双向数据绑定的，只不过限定的地方是表单选项。

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

结果

*单向数据流

1、使用prop的方式，是一种单向数据流，只能由父组件传递到子组件。
2、不应该在子组件中改动prop传递进来的值，如果有以下两种冲动：prop传递进来数据，希望当做局部数据来使用；prop传递初始值以后，有子组件处理成其他数据输出。可以采用一下两种方法：第一种方法是通过声明本地变量，进行值传递；第二种方法是在computed方法中进行值传递。

props: ['initialCounter'],
data: function () {
  return { counter: this.initialCounter }
}

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

*子组件传递父组件（自定义事件）

每个Vue实例都实现了事件接口，也即：
使用$on(eventName)监听事件；但是得使用v-on来监听事件，在控件中
使用$emit(eventName)触发事件。

<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

可以使用.sync来实现父组件子组件数据的同步更改

*