v-bind是响应式的更新事件,
这个时候我们来理解下响应式编程的定义:"响应式编程是一种面向数据流和变化传播的编程范式。这意味着可以在编程语言中很方便地表达静态或动态的数据流,而相关的计算模型会自动将变化的值通过数据流进行传播。 例如,在MVC软件架构中,响应式编程允许将相关模型的变化自动反映到视图上,反之亦然。
也就是说响应式是能动态的将数据的变化在视图上相应的变化。自我理解。
v-on监听DOM事件这个并不难理解。
父级组件可以像处理 native DOM 事件一样通过 v-on
监听子组件实例的任意事件:<blog-post ... v-on:enlarge-text="postFontSize += 0.1" ></blog-post> 同时子组件可以通过调用内建的 $emit
方法 并传入事件名称来触发一个事件:
<button v-on:click="$emit('enlarge-text')"> Enlarge text </button> 有了这个事件名称enlarge-textv-on:enlarge-text="postFontSize += 0.1"
监听器,父级组件就会接收该事件并更新postFontSize
的值。
方便理解后面的使用事件抛出一个值可以使用 $emit
的第二个参数来提供这个值:
<button v-on:click="$emit('enlarge-text', 0.1)">
Enlarge text
</button>
然后当在父级组件监听这个事件的时候,我们可以通过 $event
访问到被抛出的这个值:
<blog-post
...
v-on:enlarge-text="postFontSize += $event"
></blog-post>