Vue渐进式框架

发布于:2023-01-04 ⋅ 阅读:(266) ⋅ 点赞:(0)

一、Vue:是一款前端渐进式框架,可以提高前端开发效率

特点:

        Vue通过MVVM模式,能够实现视图与模型的双向绑定


二、Vue基本语法:

1.v-for:遍历数组

        循环指定,基于一个数组或对象渲染一个列表需要配合使用


2.v-bind:显示数据(动态)

        动态地绑定一个或多个特性或一个组件prop到表达式


3.v-on:事件处理

        用于监听指定元素DOM事件


4.v-model:数据双向绑定

        实现表单输入和应用状态之间的双向绑定


5.v-text和v-HTML:显示数据

        可以避免插值闪烁


6.v-if和v-show:判断语法

        v-if:条件不满足时,元素不会存在

                根据表达式的值的真假条件渲染,在切换时元素及它的数据绑定/组件被销毁并重建  

        v-show:条件不满足时,元素不会显示(元素存在)

                根据表达式的真假值,切换元素的displayCSS属性

小知识:

v-if和v-show有什么不同,平时怎么运用它们?

  • v-if 在条件切换时,会对标签进行适当的创建和销毁,而v-show则仅在初始化时加载一次,因此v-if的开销比v-show大
  • v-show控制的是元素的display属性,无论初始条件是否成立,都会渲染标签。而v-if是惰性的,只有在条件成立时才渲染为真实的标签,条件为假,不会去渲染标签

 项目中如何使用?

  • 当初始条件为假时,v-show初始渲染开销较高,使用v-if
  • 当我们频繁切换开关是,v-if切换开销较高,使用v-show
  • 多路分支,只能选择v-if
  • 具体看开发项目的时候是否频繁操作DOM

事件修饰符:

.stop :

        阻止事件冒泡,也就是当前元素发生事件,但当前事件的父元素不发生该事件


.prevent:

        阻止默认事件的发生


.capture:

        使用事件捕获模式,主动获取子元素发生事件,把获取到的事件当自己的事件执行


.self:

        只有元素自身触发事件才行,冒泡或捕获的都不行


.once:

        只执行一次



网站公告

今日签到

点亮在社区的每一天
去签到