Vue的指令简介

v-html和v-text

这两个指令可以改变绑定的元素的标签内容,v-html相当于js中的innerHTML,v-text相当于js中的innerTEXT。

v-show和v-if

-相同点:二者都可以隐藏元素。
-不同点:v-show切换元素的display属性控制元素显示或隐藏,v-if是直接在页面销毁这个元素来达成隐藏效果,想要显示元素就要重新渲染。

v-if,v-else-if,v-else

这指令是根据条件是否成立来渲染元素,需要注意的是,绑定v-else-if指令的元素前面的兄弟元素必须绑定v-if指令,v-else同v-else-if。

v-for

遍历数据多次渲染元素,指令的值使用语法:
-值为数组时:(item,index) in xxx,item是数组中的每一项数据,index是每一项的下标。
-值为对象时:(val,key,index) in xxx,val和key是对象的属性值和属性名,index为对应的索引。
-还可以直接遍历一个整数,例如:v-for="n in 10"。

v-bind

属性绑定,传入相应的值可以对元素的属性进行修改。

v-model

双向绑定,通常绑定在表单元素上实现数据的响应式修改。
修饰符:使用trim在失去焦点时过滤输入的字符串前后的空白;使用number当用户在开头输入数字,如果之后有非数字会被过滤;使用lazy在失去焦点时修改数据的值。

v-on

事件指令,简写为@,用法:v-on:事件名="函数"
事件修饰符:
	stop:		阻止事件冒泡
	capture:	改变事件触发顺序
	self:		只有本身触发事件时函数才会执行
	once:		事件只会执行一次
	prevent:	阻止默认行为
	passive:	用在移动端优化性能
按键修饰符:
	enter:		回车键
	space:		空格键
	tab:		Tab键
	...
	键盘按键码也可以作为按键修饰符

v-pre,v-once,v-cloak

这三个指令都是有关于编译的
v-pre:		给谁加谁就会跳过编译
v-cloak:	在元素未被编译完成时隐藏此元素
v-once:	元素只会被编译一次,之后无论如何都不会再改变了。
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值