从小白开始学vue学习笔记（二）——事件篇

目录

一、事件处理

1、监听事件

2、事件处理方法

3、内联处理器种的方法

4、事件修饰符

默认冒泡

5、按键修饰符

（1）按键符

（2）系统修饰符

（3）.exact修饰符

（4）鼠标按钮修饰符

6、为什么在HTML中监听事件

二、表单输入绑定

1、基础用法

2、文本

3、多行文本

4、复选框

5、单选按钮

6、选择框

7、值绑定

（1）复选框

（2）单选按钮

（3）选择框的选项

8、修饰符

（1）.lazy

（2）.number

（3）.trim

9、在组件上使用v-model

三、组件基础

1、基本示例

2、组件的复用 （1）data必须是一个函数

3、组件的组织

4、通过prop向子组件传递数据

5、单个根元素

6、监听子组件事件 vm.$emit( eventName, […args] )

7、使用事件抛出一个值 8、在组件上使用v-model

9、通过插槽分发内容

10、动态组件

11、解析DOM模板时的注意事项

一、事件处理

1、监听事件

var example1 = new Vue({el: '#example-1',data: {counter: 0}}) 结果：

2、事件处理方法

var example2 = new Vue({el: '#example-2',data: {name: 'Vue.js'},// 在 `methods` 对象中定义方法methods: {greet: function (event) {// `this` 在方法里指向当前 Vue 实例alert('Hello ' + this.name + '!')// `event` 是原生 DOM 事件if (event) {alert(event.target.tagName)}}}})// 也可以用 JavaScript 直接调用方法example2.greet() // => 'Hello Vue.js!' 直接调用example2.greet() ----->只弹出hello vue.js 不弹出 button

-->结果 button

3、内联处理器种的方法

// ...methods: {warn: function (message, event) {// 现在我们可以访问原生事件对象if (event) event.preventDefault()alert(message)}} $event是原始的DOM对象

preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。

event.preventDefault()

参数	描述
event	必需。规定阻止哪个事件的默认动作。这个 event 参数来自事件绑定函数。

4、事件修饰符

let vm = new Vue({el: "#app",data: {},methods: {catchSon() {console.log('我还小，别抓我啊...');},catchFather() {console.log('我上有老，下有小，各位官爷，手下留情啊...');},catchGrandfather() {console.log('你们这些兔崽子，敢动我这把老骨头试下!');}}}) vue提供了事件修饰符，可以修改默认的事件触发机制：

.stop 阻止冒泡

.prevent 阻止默认事件

.capture 添加事件侦听器时使用事件捕获模式

.self 只当事件在该元素本身（比如不是子元素）触发时触发回调

.once 事件只触发一次

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。 为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。 .stop.prevent.capture.self.once.passive

<!-- 阻止单击事件继续传播 --><a v-on:click.stop="doThis"></a><!-- 提交事件不再重载页面 --><form v-on:submit.prevent="onSubmit"></form><!-- 修饰符可以串联 --><a v-on:click.stop.prevent="doThat"></a><!-- 只有修饰符 --><form v-on:submit.prevent></form><!-- 添加事件监听器时使用事件捕获模式 --> 

<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 --><div v-on:click.capture="doThis">...</div><!-- 只当在 event.target 是当前元素自身时触发处理函数 --> 
<!-- 点击事件将只会触发一次 --><a v-on:click.once="doThis"></a>

不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。如果你还没有阅读关于组件的文档，现在大可不必担心。

2.3.0 新增 Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --><!-- 而不会等待 `onScroll` 完成 --><!-- 这其中包含 `event.preventDefault()` 的情况 --><div v-on:scroll.passive="onScroll">...</div> 这个 .passive 修饰符尤其能够提升移动端的性能。 不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

5、按键修饰符

<input v-on:keyup.13="submit"> 为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名： .enter

.tab.delete (捕获“删除”和“退格”键).esc.space

.up.down.left

// 可以使用 `v-on:keyup.f1`Vue.config.keyCodes.f1 = 112

（2）系统修饰符

2.1.0 新增 可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。 .ctrl

.alt

<!-- Alt + C --><input @keyup.alt.67="clear"><!-- Ctrl + Click --><div @click.ctrl="doSomething">Do something</div> 请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

（3）.exact修饰符

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 --><button @click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的时候才触发 --><button @click.ctrl.exact="onCtrlClick">A</button><!-- 没有任何系统修饰符被按下的时候才触发 --><button @click.exact="onClick">A</button>

（4）鼠标按钮修饰符

2.2.0 新增 .left.right.middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮。

6、为什么在HTML中监听事件

你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。

关注点分离原则，也叫正交原则，HTML CSS JS 分离 互不影响 分在几个文件里写用link相互关联状态转移：js不去修改css 的样式（.style.color='red'），只修改css中的状态（addClass('active')）。 但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 有几个好处：

扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。

因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。

当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。

二、表单输入绑定

1、基础用法

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。

*语法糖：计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。 它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件： text 和 textarea 元素使用 value 属性和 input 事件；checkbox 和 radio 使用 checked 属性和 change 事件；select 字段将 value 作为 prop 并将 change 作为事件。 ****prop单项数据流 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。 每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为较新的值。这意味着你不应该在一个子组件内部改变 prop。

对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。（就是拼音的时候还不会反应）

var example = new Vue({el: "#example",data: {message: ''}})

3、多行文本

<span>Multiline message is:</span><p style="white-space: pre-line;">{{ message }}</p> 

<br><textarea v-model="message" placeholder="add multiple lines"></textarea>

在文本区域插值 (<textarea>{{text}}</textarea>) 并不会生效，应用 v-model 来代替。

4、复选框

<input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label>

var example = new Vue({el: "#example",data: {checked: false} 
})

new Vue({el: '#example-3',data: {checkedNames: []}})

new Vue({el: '#example-4',data: {picked: ''}})

new Vue({el: '...',data: {selected: ''}})

如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。

new Vue({el: '#example-6',data: {selected: []}})

new Vue({el: '...',data: {selected: 'A',options: [{ text: 'One', value: 'A' },{ text: 'Two', value: 'B' },{ text: 'Three', value: 'C' }]}})

7、值绑定 <input v-model="name" type="text" />

<input :value="name" @getData="limit($event.target.value)" type="text"/> <!-- 当选中时，`picked` 为字符串 "a" --><input type="radio" v-model="picked" value="a"><!-- `toggle` 为 true 或 false --><input type="checkbox" v-model="toggle"><!-- 当选中第一个选项时，`selected` 为字符串 "abc" --><select v-model="selected"><option value="abc">ABC</option></select> 但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。 // 当选中时vm.toggle === 'yes'// 当没有选中时vm.toggle === 'no' 这里的 true-value 和 false-value 特性并不会影响输入控件的 value 特性，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(比如“yes”或“no”)，请换用单选按钮。 // 当选中时vm.pick === vm.a // 当选中时typeof vm.selected // => 'object'vm.selected.number // => 123

8、修饰符

（1）.lazy

<!-- 在“change”时而非“input”时更新 --><input v-model.lazy="msg" >

（2）.number

<input v-model.number="age" type="number"> 这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

添加.number后

（3）.trim

<input v-model.trim="msg">

9、在组件上使用v-model

如果你还不熟悉 Vue 的组件，可以暂且跳过这里。 HTML 原生的输入元素类型并不总能满足需求。幸好，Vue 的组件系统允许你创建具有完全自定义行为且可复用的输入组件。这些输入组件甚至可以和 v-model 一起使用！要了解更多，请参阅组件指南中的自定义输入组件。

三、组件基础

1、基本示例

new Vue({ el: '#components-**' }) 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。

2、组件的复用

<div id="components-**"><button-counter></button-counter><button-counter></button-counter><button-counter></button-counter></div> 注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

data: function () {return {count: 0}} 如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例：

可实际上会报错：

3、组件的组织

通常一个应用会以一棵嵌套的组件树的形式来组织：

Vue.component('my-component-name', {// ... options ...}) 全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。

到目前为止，关于组件注册你需要了解的就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把组件注册读完。

4、通过prop向子组件传递数据

Vue.component('blog-post', {props: ['title'],template: '<h3>{{ title }}</h3>'}) 一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。 <blog-postv-for="post in posts"v-bind:key="post.id"v-bind:title="post.title"></blog-post> 如上所示，你会发现我们可以使用 v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的。 到目前为止，关于 prop 你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把 prop 读完。

5、单个根元素

<div v-html="message">{{message}}</div>export default {data () {return {message: "这里可以包含html标签"}}} Vue.component('blog-post', {props: ['post'],template: `<div class="blog-post"><h3>{{ post.title }}</h3><div v-html="post.content"></div></div>`}) *****************使用是反引号不是单引号********************** ES6 模板字符串(Template String)是增强版的字符串，用反引号(`)标识，它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。 var htmlSTring = "<div>\This is a string.\</div>"; 上述的这个和一些接下来的示例使用了 JavaScript 的模板字符串来让多行的模板更易读。它们在 IE 下并没有被支持，所以如果你需要在不 (经过 Babel 或 TypeScript 之类的工具) 编译的情况下支持 IE，请使用折行转义字符取而代之。 现在，不论何时为 post 对象添加一个新的属性，它都会自动地在 <blog-post> 内可用。 6、监听子组件事件 <button v-on:click="$emit('enlarge-text')">Enlarge text</button> 有了这个 v-on:enlarge-text="postFontSize += 0.1" 监听器，父级组件就会接收该事件并更新 postFontSize 的值。 一放大每个都会放大，怎么才能让他只放大自己？ vm.$emit( eventName, […args] )

参数： {string} eventName

[...args]

触发当前实例上的事件。附加参数都会传给监听器回调。

new Vue({el: '#emit-example-**',methods: {sayHi: function () {alert('Hi!')}}})

7、使用事件抛出一个值

<blog-post...v-on:enlarge-text="postFontSize += $event"></blog-post> methods: {onEnlargeText: function (enlargeAmount) {this.postFontSize += enlargeAmount}}

8、在组件上使用v-model

<custom-inputv-bind:value="searchText"v-on:input="searchText = $event"></custom-input> <custom-input v-model="searchText"></custom-input>

到目前为止，关于组件自定义事件你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把自定义事件读完。

9、通过插槽分发内容

<alert-box>Something bad happened.</alert-box>

可能会渲染出这样的东西：

Vue.component('alert-box', {template: `<div class="**-alert-box"><strong>Error!</strong><slot></slot></div>`})

如你所见，我们只要在需要的地方加入插槽就行了——就这么简单！

到目前为止，关于插槽你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把插槽读完。 ***插槽内容****

　　一句话：插槽内可以是任意内容。

10、动态组件

<!-- 组件会在 `currentTabComponent` 改变时改变 --><component v-bind:is="currentTabComponent"></component> 在上述示例中，currentTabComponent 可以包括

已注册组件的名字，或

一个组件的选项对象

<div id="dynamic-component-**" class="**"><button v-for="tab in tabs" v-bind:key="tab" v-bind:class="['tab-button', { active: currentTab === tab }]" v-on:click="currentTab = tab">{{ tab</button><component v-bind:is="currentTabComponent" class="tab"></component></div>

Vue.component('tab-home', {template: '<div>Home component</div>' 
})Vue.component('tab-posts', {template: '<div>Posts component</div>' 
var tabs = [{name: 'Home',component: {template: '<div>Home component</div>'}},{name: 'Posts',component: {template: '<div>Posts component</div>'}},{name: 'Archive',component: {template: '<div>Archive component</div>',}}]new Vue({el: '#dynamic-component-**',data: {tabs: tabs,currentTab: tabs[0]}})

到目前为止，关于动态组件你需要了解的大概就这些了，如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把动态和异步组件读完。

11、解析DOM模板时的注意事项

<table><tr is="blog-post-row"></tr></table> 需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：

字符串 (例如：template: '...')

单文件组件 (.vue)

<script type="text/x-template">

到这里，你需要了解的解析 DOM 模板时的注意事项——实际上也是 Vue 的全部必要内容，大概就是这些了。