Vue 第二天

项目为什么data是一个函数不是一个对象?

        因为组件是可以复用的实例，如果其他页面也用到了该组件，如果不使用return包裹数据的话就会全局可见从而造成变量污染，只要其中一个页面更改数据，其他页面用到该组件的变量也会被修改，因此组件中的data必须是一个函数，使用return返回一个对象。vue根实例可以是一个对象，其他组件data必须是函数。

事件

进行事件绑定时，可以将v-on:事件名缩写为@事件名，此方式经常使用 :

事件修饰符

事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。Vue提供了更好的方式：事件处理函数只有纯粹的数据逻辑，而不是去处理 DOM 事件细节，通过事件修饰符来完成这些细节。

<button v-on:click.prevent="handler">点我点我</button>

常见修饰符如下 .stop 停止事件冒泡 .prevent 阻止事件默认行为 .capture 在事件捕获阶段执行事件处理函数 .self 只当在 event.target 是当前元素自身时触发处理函数 .once 事件处理函数执行一次后解绑 .passive 滚动事件的默认行为 (即滚动行为) 将会立即触发 ，一般与scroll连用，能够提升移动端的性能 按键修饰符 一般与keyup事件类型配合使用 .enter、.tab、.delete、.esc、.space、.up、.down、.left、.right .ctrl、.alt、.shift、.meta 鼠标修饰符mouseup事

件 .left、.right、.middle

数据双向绑定——

        修饰符：1. v-model.lazy="————指需要按回车再进行数据更新

                                2.V-model.number=''——————将字符串转为数字

                                3.v-model.trim="——————去除前后空格。