2. Vue基本指令1/3——内容、事件绑定

一、 v-text：

• 用于输出文本
• 注：{{ }}即插值表达式是v-text的简写形式
  • 区别：v-text会覆盖元素中原本的内容，但是 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空
• 例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-A71AM3tU-1612975868115)(en-resource://database/849:1)]

二、 v-html:

• v-html用于输出html（设置元素的innerHTML属性）
• 与v-text区别：
  • v-text输出的是纯文本，浏览器不会对其再进行html解析
  • 但v-html会将其当html标签解析后输出
• 例：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KEeyWI9z-1612975868129)(en-resource://database/851:1)]

三、 v-on:

1. 作用：为元素绑定事件
2. 使用：

• 直接使用指令v-on(el: / data: / methods: 为同一级)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6IJJ48o0-1612975868132)(en-resource://database/853:1)]

• 使用简化指令@

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-imOadk63-1612975868137)(en-resource://database/855:1)]

3. 鼠标事件：

   • click：单击
   • dblclick：双击
   • mousedown：按下任一个鼠标按键时发生
   • mouseup：松开一个鼠标按键时发生
   • mouseover：把鼠标指针移入对象时发生
   • mouseout：把鼠标指针移出对象时发生
   • mousemove：在对象中移动鼠标指针时发生

4. 例（绑定事件，使得双击添加字符串）：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1uEOhR24-1612975868141)(en-resource://database/857:1)]

5. 例：（计数器）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SNMW1Pu0-1612975868143)(en-resource://database/859:1)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HcK8iqdD-1612975868147)(en-resource://database/861:1)]