vue学习笔记(2)：substring，跑马灯，计时器，阻止冒

msg:"1234567"

intervalId:null

1.substring:

字符串截取

例子：var start = this.msg.substring(0,1),这里的0代表截取的起始位置，1代表截取几个字符

2.在VM实例中，如果想要获取data上的数据，或者想要调用methods中的方法，必须通过this.数据属性名或this.方法名来进行访问，这里的this，就表示我们new出来的vm实例对象

3.跑马灯

获取头一个字符

var start = this.msg.substring(0,1);

获取到后面所有的字符

var end = this.msg.substring(1);

拼接

this.msg = eng + strat;

注意：VM实例，会监听自己身上data中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data上同步到页面中去，好处是程序员只需要关心数据，不需要重新考虑如何渲染dom页面。

4.setInterval:

计时器

例子：

(1) lang(){

var _this = this

setInterval(function(){

var start = _this.msg.substring(0,1);

var end = _this.msg.substring(1);

_this.msg = eng + strat;

},400);

}

(2)lang(){

setInterval(() => {

var start = this.msg.substring(0,1);

var end = this.msg.substring(1);

this.msg = eng + strat;

})

}

5.function () {} es6写法 () => {}

箭头函数内部的this永远与外部的this保持一致

6.便于别的模块调用，定时器名称最好定义在data中

lang(){

this.intervalId = setInterval(() => {

var start = this.msg.substring(0,1);

var end = this.msg.substring(1);

this.msg = eng + strat;

})

}

7.停止定时器

stop(){

clearInterval(this.intervalId);

}

8.

lang(){

if(intervalId != null) return;解决无限加快问题

this.intervalId = setInterval(() => {

var start = this.msg.substring(0,1);

var end = this.msg.substring(1);

this.msg = eng + strat;

})

}

stop(){

clearInterval(this.intervalId);

每当清除了定时器，就要把intervalId重新赋值为null，因为清除定时器没有把intervalId也清空

this.intervalId = null;

}

9..stop

阻止事件冒泡的修饰符

例子：<p @click.stop = "maopao"></p>

10..prevent

阻止默认行为的修饰符，比如a标签是跳转，用这个修饰符可以让他不执行跳转事件

例子：只执行点击事件，不跳转到百度页面

11.冒泡事件从内到外触发事件，先触发里面的在触发外面的

12.捕获是先触发外面的在触发里面的

13..capture

添加事件监听时使用事件捕获模式的标识符

例子：

<div @click.capture = "wai">

<button @click = "nei"></button>

</div>

14..self

指当事件在该元素本身(比如不是子元素)触发时触发回调，捕获冒泡全不执行

例子：

<div @click.self = "wai">

<button @click = "nei"></button>

</div>

15..once

事件只出发一次修饰符

例子：

事件只触发一次。默认行为也只触发一次

16..self只阻止当前元素的冒泡行为，.stop阻止了所有的冒泡行为