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来实现父组件子组件数据的同步更改

*