初学vue 一些入门基础

初学vue 一些入门基础

v-test和v-html

**v-test:**语法 : 在标签里面 v-text=“data里面的数据”
特点 :
直接设置 会覆盖掉标签原本的文本
没办法解析标签
简写方式 {{}}
如果我们要保留标签里面原始的文本 name就必须使用简写方式

v-html:语法:在标签内部 v-html= “data中的数据”
特点 :
可以解析标签 也可以解析文本
标签内部如果说存在原始文本 name就会被覆盖
没有简写形式

两者的区别:
v-htm相对于v-text 使用的频率不高
开发中 简写方式用的很多 v-text用得比较少

v-on:

给元素绑定事件:v-on:click blur dblclick
简写形式 : @事件名=
注册的事件 后面的函数可以传参
@click @dblclick @blur @keyup @keydown
可以修改 data里面的数据
可以写行 内的表达式

v-if 和v-show

v-if:v-if 指令用于条件性地渲染一块内容,如果想切换多个元素呢?此时可以把一个template元素当做不可见的包裹元素,并在上面使用v-if。最终的渲染结果将不包含 template 元素。

v-show
v-show 另一个用于根据条件展示元素的指令。

区别
v-if 是真实的条件渲染,因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做,直到在条件第一次变为真时才开始局部编译(编译会被缓存起来)。
相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。
一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值