content:++++++{{name}}------
------++++++
``` 上方代码的演示结果：  其实，第二行代码中，只要浏览器中还没有解析到`v-text="name"`的时候，会显示`------++++++`；当解析到`v-text="name"`的时候，name的值会直接替换`------++++++`。 ## v-html `v-text`是纯文本，而`v-html`会被解析成html元素。 注意：使用v-html渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本） 攻击，使用的时候请谨慎，能够使用{{}}或者v-text实现的不要使用v-html。 代码举例： ```html{{msg}}
{{name}}
```
上方代码中，我们给button按钮绑定了点击事件。注意，这个button标签要写在div区域里（否则点击事件不生效），因为下方的View module接管的是div区域。
### `v-on`的简写形式
例如：
```html
```
可以简写成：
```html
```
### v-on的常用事件
v-on 提供了click 事件，也提供了一些其他的事件。
- v-on:click
- v-on:keydown
- v-on:keyup
- v-on:mousedown
- v-on:mouseover
- v-on:submit
- ....
## 举例：文字滚动显示（跑马灯效果）
我们利用上面几段所学的内容，做个跑马灯的小例子。要实现的效果是：类似于LED屏幕上，滚动显示的文字。
**文字滚动显示的思路**：
（1）每次点击按钮后，拿到 msg 字符串，然后调用字符串的`substring`来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可。这就实现了滚动的效果。
（2）为了实现文字**自动连续滚动**的效果，需要把步骤（1）中点击按钮的操作，放到**定时器**中去。
我们先来看一下 点击事件里的代码改怎么写。
**步骤 1**：每次点击按钮，字符串就滚动一次。代码如下：
```javascript
startMethod: function () {
// 获取 msg 的第一个字符
var start = this.msg.substring(0, 1);
// 获取 后面的所有字符
var end = this.msg.substring(1);
// 重新拼接得到新的字符串，并赋值给 this.msg
this.msg = end + start;
}
```
**步骤2**：给上面的操作添加定时器。代码如下：
```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);
}
```
上面的代码中，我们发现，如果在定时器中直接使用this，这个this指向的是window。为了解决这个问题，我们是通过`_this`来解决了这个问题。
另外，我们还可以利用箭头函数来解决this指向的问题，因为箭头函数总的this指向，会继承外层函数的this指向。如下。
**步骤2的改进版**：用箭头函数来改进定时器，解决this指向的问题。代码如下：
```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);
}
```
**步骤3**：停止定时器。如下：
我们还需要加一个按钮，点击按钮后，停止文字滚动。也就是停止定时器。
提示：我们最好把定时器的id放在全局的位置（放到data里），这样的话，开启定时器的方法和停止定时器的方法，都可以同时访问到这个定时器。
代码如下：
```javascript
data: {
msg: '千古壹号，前端教程～～～',
intervalId: null
},
methods: {
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);
},
stopMethod: function () {
//停止定时器：点击按钮后，停止字符串的滚动
clearInterval(this.intervalId);
}
}
```
**【重要】步骤4**：一开始的时候，还需要判断是否已经存在定时器。如下：
步骤3中的代码，虽然做了停止定时器的操作，但是有个问题：在连续多次点击“启动定时器”按钮的情况下，此时再点击“停止定时器”的按钮，是没有反应的。因此，我们需要改进的地方是：
- **在开启定时器之前，先做一个判断**：如果定时器不为 null，就不继续往下执行了（即不再开启新的定时器），防止开启了多个定时器。
- **停止定时器的时候，虽然定时器停止了，但定时器并不为 null**。因此，最后我们还需要手动将定时器设置为null。这样，才能恢复到最初始的状态。
**完整版代码**：
针对上面的四个步骤，为了实现这个案例，完整版代码如下：
```html
{{msg}}