theluyuan/Web
1
0
Fork 1
mirror of https://github.com/qianguyihao/Web.git synced 2024-10-30 20:44:45 +08:00
Code Issues Projects Releases Wiki Activity
11b9053fb3
Web/21-Vue基础/01-01.Vue的系统指令.md

750 lines
20 KiB
Markdown
Raw Normal View History

add file：几道题目
2018-03-13 23:12:27 +08:00
update:Vue的列表功能举例
2018-04-05 11:01:33 +08:00
> 本文最初发表于[博客园]()，并在[GitHub](https://github.com/smyhvae/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我，一起入门和进阶前端。
> 以下是正文。
add file：几道题目
2018-03-13 23:12:27 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
## 本文主要内容
- 插值表达式 {{}}
- v-cloak
- v-text
- v-html
- v-bind
- v-on
add file：几道题目
2018-03-13 23:12:27 +08:00
## Vue初体验
新建一个空的项目，引入vue.js文件。写如下代码：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
<!--1、导入Vue的包-->
<script src="vue2.5.15.js"></script>
add file：几道题目
2018-03-13 23:12:27 +08:00
</head>
<body>
<!--这个div区域就是MVVM中的 View-->
<div id="div1">
{{name}}
</div>
</body>
<script>
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
// 2、创建一个Vue的实例
//new出来的对象就是MVVM中的 View Module（调度者）
add file：几道题目
2018-03-13 23:12:27 +08:00
var myVue = new Vue({
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
el: '#div1', //当前vue对象将接管上面的div1区域
add file：几道题目
2018-03-13 23:12:27 +08:00
data: {//data就是MVVM中的 module
name: 'smyhvae'
}
});
</script>
</html>
```
显示效果：
update Vue.js
2018-03-29 21:36:22 +08:00
![](http://img.smyhvae.com/20180313_0955.png)
add file：几道题目
2018-03-13 23:12:27 +08:00
add：Vue相关。
2018-04-20 23:44:34 +08:00
如果我们在控制台输入`myVue.$data.name = 'haha'`，页面会**自动更新**name的值。意思是，当我们直接修改data数据，页面会自动更新，而不用去操作DOM。
add file：几道题目
2018-03-13 23:12:27 +08:00
modify
2018-03-22 11:54:37 +08:00
下面来讲一下Vue的各种系统指令。
add file：几道题目
2018-03-13 23:12:27 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
## 插值表达式 {{}}
数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。例如：
update Vue.js
2018-03-29 21:36:22 +08:00
add file：几道题目
2018-03-13 23:12:27 +08:00
```html
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
<span>Message: {{ msg }}</span>
```
add file：几道题目
2018-03-13 23:12:27 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在data对象中）的值。
无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会**自动更新**。
add file：几道题目
2018-03-13 23:12:27 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
`{{}}`对JavaScript 表达式支持，例如：
add file：几道题目
2018-03-13 23:12:27 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
```javascript
{{ number + 1 }}
add file：几道题目
2018-03-13 23:12:27 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
{{ ok ? 'YES' : 'NO' }}
add file：几道题目
2018-03-13 23:12:27 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
{{ name == 'smyhvae' ? 'true' : 'false' }}
add file：几道题目
2018-03-13 23:12:27 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
{{ message.split('').reverse().join('') }}
add file：几道题目
2018-03-13 23:12:27 +08:00
```
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
但是有个限制就是，每个绑定都**只能包含单个表达式**，如下表达式无效：
update Vue.js
2018-03-29 21:36:22 +08:00
```html
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}
update Vue.js
2018-03-29 21:36:22 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}
update Vue.js
2018-03-29 21:36:22 +08:00
```
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
代码举例：
update Vue.js
2018-03-29 21:36:22 +08:00
```html
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
<!DOCTYPE html>
<html lang="en">
update Vue.js
2018-03-29 21:36:22 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
update Vue.js
2018-03-29 21:36:22 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
<body>
<div id="app">
<span>content:{{name}}</span>
</div>
<script src="vue2.5.16.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
name: 'smyhvae'
}
})
</script>
update Vue.js
2018-03-29 21:36:22 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
</body>
update Vue.js
2018-03-29 21:36:22 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
</html>
update Vue.js
2018-03-29 21:36:22 +08:00
```
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
运行结果：
update Vue.js
2018-03-29 21:36:22 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
20180506_2240.png
update Vue.js
2018-03-29 21:36:22 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
## v-cloak
update Vue.js
2018-03-29 21:36:22 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
`v-cloak`：保持和元素实例的关联，直到结束编译后自动消失。
update Vue.js
2018-03-29 21:36:22 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
v-cloak指令和CSS 规则一起用的时候，能够**解决差值表达式闪烁的问题**（即：可以隐藏未编译的标签直到实例准备完毕）。
update Vue.js
2018-03-29 21:36:22 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
就拿上一段代码来举例，比如说，`{{name}}`这个内容，**在网速很慢的情况下，一开始会直接显示`{{name}}`这个内容**，等网络加载完成了，才会显示`smyhvae`。那这个**闪烁的问题**该怎么解决呢？
解决办法是：通过`v-cloak`隐藏`{{name}}`这个内容，当加载完毕后，再显示出来。
update Vue.js
2018-03-29 21:36:22 +08:00
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
<style>
/*2、在样式表里设置：只要是有 v-cloak 属性的标签，我都让它隐藏。
直到 Vue实例化完毕以后，v-cloak 会自动消失，那么对应的css样式就会失去作用，最终将span中的内容呈现给用户 */
[v-cloak] {
display: none;
}
</style>
update Vue.js
2018-03-29 21:36:22 +08:00
</head>
<body>
<div id="app">
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
<!-- 1、给 span 标签添加 v-cloak 属性 -->
<span v-cloak>{{name}}</span>
update Vue.js
2018-03-29 21:36:22 +08:00
</div>
</body>
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
<script src="vue2.5.16.js"></script>
update Vue.js
2018-03-29 21:36:22 +08:00
<script>
new Vue({
el: '#app',
data: {
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
name: 'smyhvae'
update Vue.js
2018-03-29 21:36:22 +08:00
}
});
</script>
</html>
add file：几道题目
2018-03-13 23:12:27 +08:00
```
add file:变量提升
2018-03-21 21:45:10 +08:00
## v-text
add file：几道题目
2018-03-13 23:12:27 +08:00
v-text可以将一个变量的值渲染到指定的元素中。例如：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue的版本：2.5.15-->
<script src="vue.js"></script>
</head>
<body>
<div id="div1">
<span v-text="name"></span>
</div>
</body>
<script>
new Vue({
el: '#div1',
data: {
name: 'hello smyhvae'
}
});
</script>
</html>
```
结果：
update Vue.js
2018-03-29 21:36:22 +08:00
![](http://img.smyhvae.com/20180313_1645.png)
add file：几道题目
2018-03-13 23:12:27 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
### 差值表达式和 v-text 的区别
add file：几道题目
2018-03-13 23:12:27 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
```html
<!-- 差值表达式 -->
<span>content:{{name}}</span>
add file：几道题目
2018-03-13 23:12:27 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
<!-- v-text -->
<span v-text="name">/span>
```
add file：几道题目
2018-03-13 23:12:27 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
**区别1**： v-text 没有闪烁的问题，因为它是放在属性里的。
add file：几道题目
2018-03-13 23:12:27 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
**区别2** :插值表达式只会替换自己的这个占位符，并不会把整个元素的内容清空。v-text 会**覆盖**元素中原本的内容。
add file：几道题目
2018-03-13 23:12:27 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
为了解释区别2，我们来用代码举例：
```html
<!-- 差值表达式 -->
<p>content:++++++{{name}}------</p>
<!-- v-text -->
<p v-text="name">------++++++</p>
```
上方代码的演示结果：
20180506_2320.png
其实，第二行代码中，只要浏览器中还没有解析到`v-text="name"`的时候，会显示`------++++++`；当解析到`v-text="name"`的时候，name的值会直接替换`------++++++`。
add file：几道题目
2018-03-13 23:12:27 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
## v-html
`v-text`是纯文本，而`v-html`会被解析成html元素。
注意：使用v-html渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本） 攻击，使用的时候请谨慎，能够使用{{}}或者v-text实现的不要使用v-html。
add file：几道题目
2018-03-13 23:12:27 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
代码举例：
add file：几道题目
2018-03-13 23:12:27 +08:00
```html
<!DOCTYPE html>
<html lang="en">
<head>
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
add file：几道题目
2018-03-13 23:12:27 +08:00
</head>
<body>
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
<div id="app">
<p>{{msg}}</p>
<p v-text="msg"></p>
<p v-html="msg"></p>
</div>
<script src="vue2.5.16.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '<h1>我是一个大大的h1标题</h1>'
}
})
</script>
add file：几道题目
2018-03-13 23:12:27 +08:00
</body>
</html>
```
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
运行结果：
20180506_2330.png
add file：几道题目
2018-03-13 23:12:27 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
## v-bind：属性绑定机制
add file：几道题目
2018-03-13 23:12:27 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
`v-bind`：用于绑定**属性**。
add file：几道题目
2018-03-13 23:12:27 +08:00
比如说：
```html
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
<img v-bind:src="imageSrc +'smyhvaeString'">
add file：几道题目
2018-03-13 23:12:27 +08:00
<div v-bind:style="{ fontSize: size + 'px' }"></div>
```
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
上方代码中，给属性加了 v-bind 之后，属性值里的整体内容是**表达式**，属性值里的`imageSrc`和`size`是Vue实例里面的**变量**。
也就是说， v-bind的属性值里，可以写合法的 js 表达式。
add file：几道题目
2018-03-13 23:12:27 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
上面两行代码也可以简写成：
add file：几道题目
2018-03-13 23:12:27 +08:00
```html
<img :src="imageSrc">
<div :style="{ fontSize: size + 'px' }"></div>
```
**举例：**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
</style>
</head>
<body>
<div id="div1">
<!-- value里的值只是简单的字符串 -->
<input type="text" value="name">
<!-- 加上 v-bind 之后，value里的值是 Vue 里的变量 -->
<input type="text" v-bind:value="name">
<!-- 超链接后面的path是 Vue 里面的变量 -->
<a v-bind="{href:'http://www.baidu.com/'+path}">超链接</a>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el: '#div1',
data: {
name: 'smyhvae',
path: `2.html`
}
});
</script>
</html>
```
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
上面的代码中，我们给`value`这个属性绑定了值，此时这个值是一个变量。
add file：几道题目
2018-03-13 23:12:27 +08:00
效果：
update Vue.js
2018-03-29 21:36:22 +08:00
![](http://img.smyhvae.com/20180313_1745.png)
add file：几道题目
2018-03-13 23:12:27 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
## v-on：事件绑定机制
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
### `v-on:click`：点击事件
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--vue的版本：2.5.15-->
<script src="vue.js"></script>
</head>
<body>
<!--这个div区域就是MVVM中的 View-->
<div id="div1">
<!-- 给button节点绑定按钮的点击事件 -->
{{name}}
<button v-on:click="change">改变name的值</button>
</div>
</body>
<script>
//new出来的对象就是MVVM中的 View Module
var myVue = new Vue({
el: '#div1', //当前vue对象将接管上面的div区域
data: { //data就是MVVM中的 module
name: 'smyhvae'
},
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
//注意，下方这个 `methods` 是Vue中定义方法的关键字，不能改
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
//这个 methods 属性中定义了当前Vue实例所有可用的方法
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
methods: {
change: function() { //上面的button按钮的点击事件
this.name += '1';
}
}
});
</script>
</html>
```
上方代码中，我们给button按钮绑定了点击事件。注意，这个button标签要写在div区域里（否则点击事件不生效），因为下方的View module接管的是div区域。
### `v-on`的简写形式
例如：
```html
<button v-on:click="change">改变name的值</button>
```
可以简写成：
```html
<button @click="change">改变name的值</button>
```
### v-on的常用事件
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
v-on 提供了click 事件，也提供了一些其他的事件。
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
- v-on:click
- v-on:keydown
- v-on:keyup
- v-on:mousedown
- v-on:mouseover
- v-on:submit
- ....
### v-on的事件修饰符
`v-on` 提供了很多事件修饰符来辅助实现一些功能。事件修饰符有如下：
- `.stop` 阻止冒泡。本质是调用 event.stopPropagation()。
- `.prevent` 阻止默认事件。本质是调用 event.preventDefault()。
- `.capture` 添加事件监听器时，使用 capture 模式。
- `.self` 只有当事件是从侦听器绑定的元素本身触发时，才触发回调。
- ``.{keyCode | keyAlias}` 只当事件是从侦听器绑定的元素本身触发时，才触发回调。
- ``.native` 监听组件根元素的原生事件。
写法示范：
```html
<!-- click事件 -->
<button v-on:click="doThis"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 阻止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
```
**举例**：（`.prevent`的用法举例）
现在有一个form表单：
```html
<form action="http://www.baidu.com">
<input type="submit" value="表单提交">
</form>
```
我们知道，上面这个表单因为`type="submit"`，因此它是一个提交按钮，点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。这是表单的默认行为。
现在，我们可以用`.prevent`来阻止这种默认行为。修改为：点击按钮后，不提交到服务器，而是执行我们自己想要的事件（在submit方法中另行定义）。如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue2.5.16.js"></script>
</head>
<body>
<div id="app">
<!-- 阻止表单中submit的默认事件 -->
<form @submit.prevent action="http://www.baidu.com">
<!-- 执行自定义的click事件 -->
<input type="submit" @click="mySubmit" value="表单提交">
</form>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
},
methods: {
mySubmit: function() {
alert('ok');
}
}
});
</script>
</html>
```
上方代码中，我们通过`.prevent`阻止了提交按钮的默认事件，点击按钮后，执行的是`mySubmit()`方法里的内容。这个方法名是可以随便起的，我们甚至可以起名为`submit`，反正默认的submit已经失效了。
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
## 举例：文字滚动显示（跑马灯效果）
update：Vue的系统指令
2018-05-07 00:11:35 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
我们利用上面几段所学的内容，做个跑马灯的小例子。要实现的效果是：类似于LED屏幕上，滚动显示的文字。
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
**文字滚动显示的思路**：
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
（1）每次点击按钮后，拿到 msg 字符串，然后调用字符串的`substring`来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可。这就实现了滚动的效果。
（2）为了实现文字**自动连续滚动**的效果，需要把步骤（1）中点击按钮的操作，放到**定时器**中去。
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
我们先来看一下 点击事件里的代码改怎么写。
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
**步骤 1**：每次点击按钮，字符串就滚动一次。代码如下：
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
```javascript
startMethod: function () {
// 获取 msg 的第一个字符
var start = this.msg.substring(0, 1);
// 获取 后面的所有字符
var end = this.msg.substring(1);
// 重新拼接得到新的字符串，并赋值给 this.msg
this.msg = end + start;
update Vue.js
2018-03-29 21:36:22 +08:00
}
```
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
**步骤2**：给上面的操作添加定时器。代码如下：
add file:变量提升
2018-03-21 21:45:10 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
```javascript
startMethod: function () {
var _this = this;
//添加定时器：点击按钮后，让字符串连续滚动
setInterval(function () {
// 获取 msg 的第一个字符
var start = _this.msg.substring(0, 1);
// 获取 后面的所有字符
var end = _this.msg.substring(1);
// 重新拼接得到新的字符串，并赋值给 this.msg
// 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去
_this.msg = end + start;
console.log(_this.msg);
}, 400);
update Vue.js
2018-03-29 21:36:22 +08:00
}
```
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
上面的代码中，我们发现，如果在定时器中直接使用this，这个this指向的是window。为了解决这个问题，我们是通过`_this`来解决了这个问题。
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
另外，我们还可以利用箭头函数来解决this指向的问题，因为箭头函数总的this指向，会继承外层函数的this指向。如下。
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
**步骤2的改进版**：用箭头函数来改进定时器，解决this指向的问题。代码如下：
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
```javascript
startMethod: function () {
//添加定时器：点击按钮后，让字符串连续滚动
setInterval(() => {
// 获取 msg 的第一个字符
var start = this.msg.substring(0, 1);
// 获取 后面的所有字符
var end = this.msg.substring(1);
// 重新拼接得到新的字符串，并赋值给 this.msg
// 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去
this.msg = end + start;
console.log(_this.msg);
}, 400);
update Vue.js
2018-03-29 21:36:22 +08:00
}
```
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
**步骤3**：停止定时器。如下：
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
我们还需要加一个按钮，点击按钮后，停止文字滚动。也就是停止定时器。
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
提示：我们最好把定时器的id放在全局的位置（放到data里），这样的话，开启定时器的方法和停止定时器的方法，都可以同时访问到这个定时器。
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
代码如下：
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
```javascript
update Vue.js
2018-03-29 21:36:22 +08:00
data: {
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
msg: '生命壹号，永不止步～～～',
intervalId: null
update Vue.js
2018-03-29 21:36:22 +08:00
},
methods: {
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
startMethod: function () {
//添加定时器：点击按钮后，让字符串连续滚动
this.intervalId = setInterval(() => { //【注意】这个定时器的this，一定不要忘记了
// 获取 msg 的第一个字符
var start = this.msg.substring(0, 1);
// 获取 后面的所有字符
var end = this.msg.substring(1);
// 重新拼接得到新的字符串，并赋值给 this.msg
// 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去
this.msg = end + start;
console.log(_this.msg);
}, 400);
},
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
stopMethod: function () {
//停止定时器：点击按钮后，停止字符串的滚动
clearInterval(this.intervalId);
}
}
update Vue.js
2018-03-29 21:36:22 +08:00
```
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
**【重要】步骤4**：一开始的时候，还需要判断是否已经存在定时器。如下：
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
步骤3中的代码，虽然做了停止定时器的操作，但是有个问题：在连续多次点击“启动定时器”按钮的情况下，此时再点击“停止定时器”的按钮，是没有反应的。因此，我们需要改进的地方是：
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
- **在开启定时器之前，先做一个判断**：如果定时器不为 null，就不继续往下执行了（即不再开启新的定时器），防止开启了多个定时器。
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
- **停止定时器的时候，虽然定时器停止了，但定时器并不为 null**。因此，最后我们还需要手动将定时器设置为null。这样，才能恢复到最初始的状态。
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
**完整版代码**：
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
针对上面的四个步骤，为了实现这个案例，完整版代码如下：
update Vue.js
2018-03-29 21:36:22 +08:00
```html
<!DOCTYPE html>
<html lang="en">
<head>
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
update Vue.js
2018-03-29 21:36:22 +08:00
</head>
<body>
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
<div id="app">
<p>{{msg}}</p>
<input type="button" value="跑马灯走起" @click="startMethod">
<input type="button" value="跑马灯停止" @click="stopMethod">
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
</div>
<script src="vue2.5.16.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '生命壹号，永不止步～～～',
intervalId: null
},
methods: {
startMethod: function () {
//【重要】在开启定时器之前，先进行判断，避免出现多个定时器
//如果出现了多个定时器，后面的“停止定时器”操作是无效的
if (this.intervalId != null) return; //【注意】这个定时器的this，一定不要忘记了
//添加定时器：点击按钮后，让字符串连续滚动
this.intervalId = setInterval(() => {
// 获取 msg 的第一个字符
var start = this.msg.substring(0, 1);
// 获取 后面的所有字符
var end = this.msg.substring(1);
// 重新拼接得到新的字符串，并赋值给 this.msg
// 注意： VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把 最新的数据，从data 上同步到页面中去
this.msg = end + start;
console.log(this.msg);
}, 400);
},
stopMethod: function () {
//停止定时器：点击按钮后，停止字符串的滚动
clearInterval(this.intervalId);
this.intervalId = null;
}
}
})
</script>
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
</body>
update Vue.js
2018-03-29 21:36:22 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
</html>
update Vue.js
2018-03-29 21:36:22 +08:00
```
add file:变量提升
2018-03-21 21:45:10 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
**上方代码的总结**：
- 在Vue的实例中，如果想要获取data里的属性、methods里面的方法，都要通过`this`来访问。这里的**this指向的是Vue的实例对象**。
add file：几道题目
2018-03-13 23:12:27 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
- VM实例，会监听自己身上 data 中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从 data 上同步到页面中去。这样做 的好处是：**程序员只需要关心数据，不需要考虑如何重新渲染DOM页面；减少DOM操作**。
add file：几道题目
2018-03-13 23:12:27 +08:00
add：Vue的系统指令（跑马灯效果举例）
2018-05-08 14:55:07 +08:00
- 在调用定时器 id 的时候，代码是`this.intervalId`，这个`this`一定不要漏掉了。
add file：几道题目
2018-03-13 23:12:27 +08:00
update:Vue的列表功能举例
2018-04-05 11:01:33 +08:00
## 我的公众号
add file：几道题目
2018-03-13 23:12:27 +08:00
update:Vue的列表功能举例
2018-04-05 11:01:33 +08:00
想学习<font color=#0000ff>**代码之外的软技能**</font>？不妨关注我的微信公众号：**生命团队**（id：`vitateam`）。
add file：几道题目
2018-03-13 23:12:27 +08:00
update:Vue的列表功能举例
2018-04-05 11:01:33 +08:00
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
add file：几道题目
2018-03-13 23:12:27 +08:00
update:Vue的列表功能举例
2018-04-05 11:01:33 +08:00
![](http://img.smyhvae.com/2016040102.jpg)
add file：几道题目
2018-03-13 23:12:27 +08:00
add：Vue 2.0过滤器
2018-04-05 21:05:09 +08:00
Reference in New Issue Copy Permalink