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