【‘# V指令(本地应用)
指令的本质就是自定义属性,只是有固定的格式
内容绑定,事件绑定
v-text
设置标签是文本值(textContent),效果跟差值表达式{{}}差不多
v-html
设置标签的innerHTML
v-on
为元素绑定事件
:click 鼠标点击时间
:monseenter 鼠标移入事件
:dblclick 鼠标双击事件
v-on: 可写成@
比如:@click
传递自定义参数
事件修饰符
@keyup 键盘事件
.enter 遇到回车键触发事件
显示切换,属性绑定
v-show
根据表达式的真(显示)假(隐藏),切换元素的显示和隐藏
原理是修改元素的display,指令后面的值最终会解析成布尔值
v-if
根据表达式的真(显示)假(隐藏),切换元素的显示和隐藏(操作dom元素)
v-bind
设置元素的属性
v-bind:属性可以直接写 :属性,省略v-bind
列表循环,表单元素绑定
v-for
根据数据生成列表结构,语法是(item,index)in 数据(结合数组使用)
in是关键字,不可更改
v-model
获取和设置表单元素的值(双向数据绑定),同步更新
v-clock
- 解决差值表达式存在的“闪动”问题
- 解决原理:
- 提供样式
[v-clock]{ display:none; }
- 先通过样式隐藏内容,然后在内存中进行值的替换,替换好值后再显示最终的值