一、 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:
- 作用:为元素绑定事件
- 使用:
- 直接使用指令v-on(el: / data: / methods: 为同一级)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6IJJ48o0-1612975868132)(en-resource://database/853:1)]
- 使用简化指令@
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-imOadk63-1612975868137)(en-resource://database/855:1)]
-
鼠标事件:
- click:单击
- dblclick:双击
- mousedown:按下任一个鼠标按键时发生
- mouseup:松开一个鼠标按键时发生
- mouseover:把鼠标指针移入对象时发生
- mouseout:把鼠标指针移出对象时发生
- mousemove:在对象中移动鼠标指针时发生
-
例(绑定事件,使得双击添加字符串):
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1uEOhR24-1612975868141)(en-resource://database/857:1)]
- 例:(计数器)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SNMW1Pu0-1612975868143)(en-resource://database/859:1)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HcK8iqdD-1612975868147)(en-resource://database/861:1)]