vue 的事件冒泡

106 阅读 0 评论 70 点赞

我是靠谱客的博主风趣滑板，这篇文章主要介绍vue 的事件冒泡，现在分享给大家，希望可以做个参考。

复制代码

一、事件冒泡

方法一、使用event.cancelBubble = true来组织冒泡

</div>

methods:{

show1:function(ev){

console.log(ev);

alert(1);

ev.cancelBubble=true;   /*阻止冒泡*/

show2:function(){

alert(2);

}

方法二：使用vue自带的方法组织冒泡

</div>

拓展：事件修饰符

参考API：http://cn.vuejs.org/v2/guide/events.html#事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

.stop

.prevent

.capture

.self

.once

二、键盘事件

show:function(){

alert(1);

}

show2:function(ev){

console.log(ev.keyCode);

if(ev.keyCode==13){

alert('按下了回车键盘');

}

show3:function(ev){

console.log(ev.keyCode);

if(ev.keyCode==13){

alert('回车键盘弹起的时候触发的事件show3');

}

拓展：按键修饰符

参考API：http://cn.vuejs.org/v2/guide/events.html#按键修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名

全部的按键别名：

.enter

.tab

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

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

********

注意：在Mac系统键盘上，meta对应命令键 (?)。在Windows系统键盘meta对应windows徽标键(?)。在Sun操作系统键盘上，meta对应实心宝石键 (◆)。在其他特定键盘上，尤其在MIT和Lisp键盘及其后续，比如Knight键盘，space-cadet键盘，meta被标记为“META”。在Symbolics键盘上，meta被标记为“META” 或者 “Meta”。

********

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 v-on:keyup.f1

Vue.config.keyCodes.f1 = 112

<div @click.ctrl="doSomething">Do something</div>

三、checkbox

注意对比angular写法，选中与不选中直接对应的是显示还是隐藏我们的box，flag在默认的data中设置为false

box

</div>

四、select

对比angular写法http://www.runoob.com/angularjs/angularjs-select.html

data: {

selected: 'C',

options: [

{ text: 'One', value: 'A' },

{ text: 'Two', value: 'B' },

{ text: 'Three', value: 'C' }

]

}

</option>

</select><br/>

选中:{{selected}}

五、radio

对比angular

使用四中的源数据

<ul>

<input type="radio" name="myRadio" :value="option.value"  v-model="selected"/>{{option.text}}

</li>

</ul><br/>

<span>选择的是: {{ selected }}</span>

六、生命周期函数

对比react生命周期函数

初始化：

getDefaultProps：作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。

getInitialState：作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state，此时可以访问this.props。

componentWillMount：在完成首次渲染之前调用，此时仍可以修改组件的state。

render

必选的方法，创建虚拟DOM，该方法具有特殊的规则：

只能通过this.props和this.state访问数据

可以返回null、false或任何React组件

只能出现一个顶级组件（不能返回数组）

不能改变组件的状态

不能修改DOM的输出

componentDidMount：真实的DOM被渲染出来后调用，在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。

运行时：

componentWillReceiveProps：组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。

componentWillReceiveProps: function(nextProps) {

if (nextProps.bool) {

this.setState({

bool: true

});

}

shouldComponentUpdate：组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。在出现应用的瓶颈时，可通过该方法进行适当的优化。

componentWillUpdate：接收到新的props或者state后，进行渲染之前调用，此时不允许更新props或state。

render

componentDidUpdate：完成渲染新的props或者state后调用，此时可以访问到新的DOM元素。

销毁：

componentWillUnmount：组件被移除之前被调用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或添加的事件监听器。

参考API：http://cn.vuejs.org/v2/guide/instance.html#实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。

beforeCreate:实例刚刚被创建1

created:实例已经创建完成2

beforeMount:模板编译之前3

mounted:模板编译完成4------********请求数据放在这个里面  必须记住*****

beforeUpdate:数据更新之前

updated:数据更新完毕

beforeDestroy:实例销毁之前

destroyed:实例销毁完成    ----this.$destroy();销毁实例

data:{

msg:'welcome vue2.0'

methods:{   /*自定义方法*/

update(){

this.msg='大家好';

destroy(){

this.$destroy();   /*销毁实例 组件*/

}

七、模拟百度搜索提示功能

1、监听文本框中的值

2、请求百度的接口

3、实现方法，watch监听文本框的输入变化，按键修饰符keyup实现

4、可以在表单的input 元素上使用v-model 指令来创建双向数据绑定。它会根据input元素的类型自动选取正确的绑定模式。

// var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+newValue;

<br/>

<ul>

</li>

</ul>

方法一watch:

引入<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>

data:{

search:'',

list:[]

}

var timer='';

vm.$watch('search',function(newValue){

console.log(newValue);

clearTimeout(timer);

var _that=this;

timer=setTimeout(function(){

//去服务器请求数据

var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+newValue;

_that.$http.jsonp(api,{

jsonp:'cb'  /*改变回调函数*/

}).then(function(data){

console.log(data.body.s);

_that.list=data.body.s;   /*改变data绑定的值*/

})

},200);

})

方法二：键盘事件  @keyup

data:{

search:'',

list:[],

timer:''

methods:{

requestData:function(){

var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.search;

var _that=this;

clearTimeout(this.timer);  /*清除定时器*/

this.timer=setTimeout(function(){

//去服务器请求数据

_that.$http.jsonp(api,{

jsonp:'cb'  /*改变回调函数*/

}).then(function(data){

console.log(data.body.s);

_that.list=data.body.s;   /*改变data绑定的值*/

})

},200)

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
一、事件冒泡

方法一、使用event.cancelBubble = true来组织冒泡

<div @click="show2()">

    <input type="button" value="按钮" @click="show1($event)">

    </div>

    methods:{

        show1:function(ev){

            console.log(ev);

            alert(1);

            ev.cancelBubble=true;   /*阻止冒泡*/

        },

        show2:function(){

            alert(2);

        }

    }

 

方法二：使用vue自带的方法组织冒泡

<div @click="show2()">

            <input type="button" value="按钮" @click.stop="show1()">

        </div>

 

           拓展：事件修饰符

参考API：http://cn.vuejs.org/v2/guide/events.html#事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

        .stop

.prevent

.capture

.self

.once

<!-- 阻止单击事件冒泡 -->

<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>

<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->

<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->

<a v-on:click.once="doThis"></a>

二、键盘事件

<input type="text" @keydown="show">

show:function(){

     alert(1);

    }

    <input type="text" @keydown="show2($event)">

    show2:function(ev){

        console.log(ev.keyCode);

        if(ev.keyCode==13){

            alert('按下了回车键盘');

        }

    },

  <input type="text" @keyup="show3($event)">

show3:function(ev){

        console.log(ev.keyCode);

        if(ev.keyCode==13){

            alert('回车键盘弹起的时候触发的事件show3');

        }

    }

 

  拓展：按键修饰符

  参考API：http://cn.vuejs.org/v2/guide/events.html#按键修饰符

  在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

  <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->

<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名

<!-- 同上 -->

<input v-on:keyup.enter="submit">

<!-- 缩写语法 -->

<input @keyup.enter="submit">

全部的按键别名：

.enter

.tab

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

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

********

注意：在Mac系统键盘上，meta对应命令键 (?)。在Windows系统键盘meta对应windows徽标键(?)。在Sun操作系统键盘上，meta对应实心宝石键 (◆)。在其他特定键盘上，尤其在MIT和Lisp键盘及其后续，比如Knight键盘，space-cadet键盘，meta被标记为“META”。在Symbolics键盘上，meta被标记为“META” 或者 “Meta”。

********

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 v-on:keyup.f1

Vue.config.keyCodes.f1 = 112

 

<!-- Alt + C -->

<input @keyup.alt.67="clear">

<!-- Ctrl + Click -->

<div @click.ctrl="doSomething">Do something</div>

三、checkbox

注意对比angular写法，选中与不选中直接对应的是显示还是隐藏我们的box，flag在默认的data中设置为false

<input type="checkbox" v-model="flag"/>

    <div class="box" v-if="flag">

        box

    </div>

 

四、select

对比angular写法http://www.runoob.com/angularjs/angularjs-select.html

data: {

        selected: 'C',

        options: [

            { text: 'One', value: 'A' },

            { text: 'Two', value: 'B' },

            { text: 'Three', value: 'C' }

        ]

    }

    <select v-model="selected">

    <option v-for="item in options" :value="item.value">

            {{item.text}}

    </option>

    </select><br/>

        选中:{{selected}}

 

五、radio

对比angular

使用四中的源数据

<ul>

        <li v-for="option in options">

<input type="radio" name="myRadio" :value="option.value"  v-model="selected"/>{{option.text}}

            </li>

        </ul><br/>

        <span>选择的是: {{ selected }}</span>

 

六、生命周期函数

对比react生命周期函数

初始化：

getDefaultProps：作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。

getInitialState：作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state，此时可以访问this.props。

componentWillMount：在完成首次渲染之前调用，此时仍可以修改组件的state。

render

必选的方法，创建虚拟DOM，该方法具有特殊的规则：

只能通过this.props和this.state访问数据

可以返回null、false或任何React组件

只能出现一个顶级组件（不能返回数组）

不能改变组件的状态

不能修改DOM的输出

componentDidMount：真实的DOM被渲染出来后调用，在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。

运行时：

componentWillReceiveProps：组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。

componentWillReceiveProps: function(nextProps) {

        if (nextProps.bool) {

            this.setState({

                bool: true

            });

        }

    }

 

shouldComponentUpdate：组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。在出现应用的瓶颈时，可通过该方法进行适当的优化。

componentWillUpdate：接收到新的props或者state后，进行渲染之前调用，此时不允许更新props或state。

render

componentDidUpdate：完成渲染新的props或者state后调用，此时可以访问到新的DOM元素。

销毁：

componentWillUnmount：组件被移除之前被调用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或添加的事件监听器。

参考API：http://cn.vuejs.org/v2/guide/instance.html#实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些 生命周期钩子 ，这就给我们提供了执行自定义逻辑的机会。

beforeCreate:实例刚刚被创建1

created:实例已经创建完成2

beforeMount:模板编译之前3

mounted:模板编译完成4------********请求数据放在这个里面  必须记住*****

beforeUpdate:数据更新之前

updated:数据更新完毕

beforeDestroy:实例销毁之前

destroyed:实例销毁完成    ----this.$destroy();销毁实例

{{msg}}

<input type="button" value="更新数据" @click="update()">

    <input type="button" value="销毁组件" @click="destroy">

  data:{

        msg:'welcome vue2.0'

    },

  methods:{   /*自定义方法*/

        update(){

            this.msg='大家好';

        },

        destroy(){

            this.$destroy();   /*销毁实例 组件*/

        }

    }

 

七、模拟百度搜索提示功能

1、监听文本框中的值

2、请求百度的接口

3、实现方法，watch监听文本框的输入变化，按键修饰符keyup实现

4、可以在表单的input 元素上使用v-model 指令来创建双向数据绑定。它会根据input元素的类型自动选取正确的绑定模式。

  // var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+newValue;

<input type="text" v-model="search"/>

    <br/>

    <ul>

        <li v-for="item in list">

 

            {{item}}

        </li>

    </ul>

 

方法一watch:

引入<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>

data:{

            search:'',

            list:[]

        }

        var timer='';

        vm.$watch('search',function(newValue){

        console.log(newValue);

        clearTimeout(timer);

 

        var _that=this;

        timer=setTimeout(function(){

            //去服务器请求数据

            var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+newValue;

            _that.$http.jsonp(api,{

                jsonp:'cb'  /*改变回调函数*/

            }).then(function(data){

                console.log(data.body.s);

                _that.list=data.body.s;   /*改变data绑定的值*/

            })

        },200);

    })

 

 方法二：键盘事件  @keyup

           

<input type="text" v-model="search" @keyup="requestData()"/>

          data:{

            search:'',

            list:[],

            timer:''

        },

        methods:{

            requestData:function(){

                var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.search;

                var _that=this;

                clearTimeout(this.timer);  /*清除定时器*/

                this.timer=setTimeout(function(){

                    //去服务器请求数据

                    _that.$http.jsonp(api,{

                        jsonp:'cb'  /*改变回调函数*/

                    }).then(function(data){

                        console.log(data.body.s);

                        _that.list=data.body.s;   /*改变data绑定的值*/

                    })


                },200)

 

            }

        }

一、事件冒泡

方法一、使用event.cancelBubble = true来组织冒泡

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div @click="show2()">

    <input type="button" value="按钮" @click="show1($event)">

    </div>

    methods:{

        show1:function(ev){

            console.log(ev);

            alert(1);

            ev.cancelBubble=true;   /*阻止冒泡*/

        },

        show2:function(){

            alert(2);

        }

    }

方法二：使用vue自带的方法组织冒泡

复制代码

1
2
3
4
5
<div @click="show2()">

            <input type="button" value="按钮" @click.stop="show1()">

        </div>

拓展：事件修饰符

参考API：http://cn.vuejs.org/v2/guide/events.html#事件修饰符

为了解决这个问题， Vue.js 为 v-on 提供了事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。

.stop

.prevent

.capture

.self

.once

二、键盘事件

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<input type="text" @keydown="show">

show:function(){

     alert(1);

    }

    <input type="text" @keydown="show2($event)">

    show2:function(ev){

        console.log(ev.keyCode);

        if(ev.keyCode==13){

            alert('按下了回车键盘');

        }

    },

  <input type="text" @keyup="show3($event)">

show3:function(ev){

        console.log(ev.keyCode);

        if(ev.keyCode==13){

            alert('回车键盘弹起的时候触发的事件show3');

        }

    }

拓展：按键修饰符

参考API：http://cn.vuejs.org/v2/guide/events.html#按键修饰符

在监听键盘事件时，我们经常需要监测常见的键值。 Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名

全部的按键别名：

.enter

.tab

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

.esc

.space

.up

.down

.left

.right

.ctrl

.alt

.shift

.meta

********

可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 v-on:keyup.f1

Vue.config.keyCodes.f1 = 112

<div @click.ctrl="doSomething">Do something</div>

三、checkbox

注意对比angular写法，选中与不选中直接对应的是显示还是隐藏我们的box，flag在默认的data中设置为false

复制代码

1
2
3
4
5
6
7
<input type="checkbox" v-model="flag"/>

    <div class="box" v-if="flag">

        box

    </div>

四、select

对比angular写法http://www.runoob.com/angularjs/angularjs-select.html

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
data: {

        selected: 'C',

        options: [

            { text: 'One', value: 'A' },

            { text: 'Two', value: 'B' },

            { text: 'Three', value: 'C' }

        ]

    }

    <select v-model="selected">

    <option v-for="item in options" :value="item.value">

            {{item.text}}

    </option>

    </select><br/>

        选中:{{selected}}

五、radio

对比angular

使用四中的源数据

复制代码

1
2
3
4
5
6
7
8
9
10
11
<ul>

        <li v-for="option in options">

<input type="radio" name="myRadio" :value="option.value"  v-model="selected"/>{{option.text}}

            </li>

        </ul><br/>

        <span>选择的是: {{ selected }}</span>

六、生命周期函数

对比react生命周期函数

初始化：

getDefaultProps：作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。

getInitialState：作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state，此时可以访问this.props。

componentWillMount：在完成首次渲染之前调用，此时仍可以修改组件的state。

render

必选的方法，创建虚拟DOM，该方法具有特殊的规则：

只能通过this.props和this.state访问数据

可以返回null、false或任何React组件

只能出现一个顶级组件（不能返回数组）

不能改变组件的状态

不能修改DOM的输出

componentDidMount：真实的DOM被渲染出来后调用，在该方法中可通过this.getDOMNode()访问到真实的DOM元素。此时已可以使用其他类库来操作这个DOM。

运行时：

componentWillReceiveProps：组件接收到新的props时调用，并将其作为参数nextProps使用，此时可以更改组件props及state。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
componentWillReceiveProps: function(nextProps) {

        if (nextProps.bool) {

            this.setState({

                bool: true

            });

        }

    }

shouldComponentUpdate：组件是否应当渲染新的props或state，返回false表示跳过后续的生命周期方法，通常不需要使用以避免出现bug。在出现应用的瓶颈时，可通过该方法进行适当的优化。

componentWillUpdate：接收到新的props或者state后，进行渲染之前调用，此时不允许更新props或state。

render

componentDidUpdate：完成渲染新的props或者state后调用，此时可以访问到新的DOM元素。

销毁：

componentWillUnmount：组件被移除之前被调用，可以用于做一些清理工作，在componentDidMount方法中添加的所有任务都需要在该方法中撤销，比如创建的定时器或添加的事件监听器。

参考API：http://cn.vuejs.org/v2/guide/instance.html#实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如，实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ，然后在数据变化时更新 DOM 。在这个过程中，实例也会调用一些生命周期钩子，这就给我们提供了执行自定义逻辑的机会。

beforeCreate:实例刚刚被创建1

created:实例已经创建完成2

beforeMount:模板编译之前3

mounted:模板编译完成4------********请求数据放在这个里面必须记住*****

beforeUpdate:数据更新之前

updated:数据更新完毕

beforeDestroy:实例销毁之前

destroyed:实例销毁完成 ----this.$destroy();销毁实例

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
{{msg}}

<input type="button" value="更新数据" @click="update()">

    <input type="button" value="销毁组件" @click="destroy">

  data:{

        msg:'welcome vue2.0'

    },

  methods:{   /*自定义方法*/

        update(){

            this.msg='大家好';

        },

        destroy(){

            this.$destroy();   /*销毁实例 组件*/

        }

    }

七、模拟百度搜索提示功能

1、监听文本框中的值

2、请求百度的接口

3、实现方法，watch监听文本框的输入变化，按键修饰符keyup实现

4、可以在表单的input 元素上使用v-model 指令来创建双向数据绑定。它会根据input元素的类型自动选取正确的绑定模式。

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+newValue;

<input type="text" v-model="search"/>

    <br/>

    <ul>

        <li v-for="item in list">

 

            {{item}}

        </li>

    </ul>

方法一watch:

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
引入<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>

data:{

            search:'',

            list:[]

        }

        var timer='';

        vm.$watch('search',function(newValue){

        console.log(newValue);

        clearTimeout(timer);

 

        var _that=this;

        timer=setTimeout(function(){

            //去服务器请求数据

            var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+newValue;

            _that.$http.jsonp(api,{

                jsonp:'cb'  /*改变回调函数*/

            }).then(function(data){

                console.log(data.body.s);

                _that.list=data.body.s;   /*改变data绑定的值*/

            })

        },200);

    })

方法二：键盘事件 @keyup

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<input type="text" v-model="search" @keyup="requestData()"/>

          data:{

            search:'',

            list:[],

            timer:''

        },

        methods:{

            requestData:function(){

                var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.search;

                var _that=this;

                clearTimeout(this.timer);  /*清除定时器*/

                this.timer=setTimeout(function(){

                    //去服务器请求数据

                    _that.$http.jsonp(api,{

                        jsonp:'cb'  /*改变回调函数*/

                    }).then(function(data){

                        console.log(data.body.s);

                        _that.list=data.body.s;   /*改变data绑定的值*/

                    })

 

                },200)

 

 

 

 

            }

        }