vue笔记

<pre>
访问事件对象，传入参数$event,
</pre>
<pre>
事件修饰符 (修饰符可以串联使用v-on:click.stop.prevent)
.stop
阻止单击事件继续传播
<a v-on:click.stop="doThis"></a>
.prevent
提交事件不再重载页面
<form v-on:submit.prevent="onSubmit"></form>


<div v-on:click.capture="doThis">...</div>

    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <div v-on:click.self="doThat">...</div>
    <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis"></a>
     .passive 修饰符来提升移动端的性能。举个例子，在滚动的时候，浏览器会在整个事件处理完毕之后再触发滚动
    <div v-on:scroll.passive="onScroll">...</div>
    注：不要把 .passive 和 .prevent 一起使用。被动处理函数无法阻止默认的事件行为。
</pre>
<pre>
按键修饰符
<input v-on:keyup.13="submit">
点击键值为13时的按键触发
 Vue 为最常用的按键提供了别名：
 <!-- 缩写语法 -->
<input @keyup.enter="submit">
全部的按键别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
Vue.config.keyCodes.f1 = 112
</pre>
<pre>
    系统修饰键
    可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
    .ctrl
    .alt
    .shift
    .meta

    <!-- Alt + C -->
    <input @keyup.alt.67="clear">

    <!-- Ctrl + Click -->
    <div @click.ctrl="doSomething">Do something</div>
</pre>
<pre>
    .exact 修饰符
    修饰符允许你控制由精确的系统修饰符组合触发的事件。
    <!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
    <button @click.ctrl="onClick">A</button>

    <!-- 有且只有 Ctrl 被按下的时候才触发 -->
    <button @click.ctrl.exact="onCtrlClick">A</button>

    <!-- 没有任何系统修饰符被按下的时候才触发 -->
    <button @click.exact="onClick">A</button>
</pre>
<pre>
    鼠标按钮修饰符
    .left
    .right
    .middle
    这些修饰符会限制处理函数仅响应特定的鼠标按钮。
</pre>
<pre>
    使用 v-on 有几个好处：
    1.扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
    2.因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
    3.当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。
</pre>
<pre>
    复选框
    1.单个复选框，绑定到布尔值：
    2.多个复选框，绑定到同一个数组：
</pre>
<pre>
    修饰符
    .lazy
    在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步)
    <!-- 在“change”时而非“input”时更新 -->
    <input v-model.lazy="msg" >
    .number
    自动将用户的输入值转为数值类型,因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。
    .trim
    去空
</pre>
<pre>
    组件
    要注册一个全局组件，可以使用 Vue.component(tagName, options)；
    使用 Prop 传递数据
    Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。
    另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。
    对这两种情况，正确的应对方式是：
    1.定义一个局部变量，并用 prop 的值初始化它
    props: ['initialCounter'],
        data: function () {
          return { counter: this.initialCounter }
        }
    2.定义一个计算属性，处理 prop 的值并返回

    要指定验证规则，需要用对象的形式来定义 prop，而不能用字符串数组：
</pre>