二、字体图标 【后续添加:个人觉得 iconfont 和 Font Awesome 都不好用,在此强烈推荐另一篇文章:vue 中使用 Remix Icon】 下面介绍两个 css 常用的字体图标库:阿里巴巴矢量图标(iconfont)和Font Awesome 1、iconfont(iconfont不能用npm安装的方式使用,只能下载文件,把文件拷贝到项目中使用) step1:打开官网http://...
Vue.js是一个基于MVVM模式的前端框架,它通过数据模型驱动视图更新。Vue.js将页面抽象为组件(Component),每个组件包含HTML(模板)、CSS(样式)和JavaScript(行为逻辑)的代码,并将它们绑定到组件的数据模型上。Vue.js通过双向数据绑定、指令和组件等功能,实现了更高效、可维护的用户界面开发。 Vue.js中的组件可以使用CSS...
首先,确保你已经安装了 Vue 3 和 Tailwind CSS。 安装Vue 3 在终端中执行npm create vue@latest命令创建一个新的 Vue 3 项目: npm create vue@latest 在输出窗口中,输入项目名称,然后一路回车即可: 执行以上命令需要设置一些初始化的选项,使用方向键选择即可。 进入初始化的目录 vue-tailwind-app,安装依赖: cd...
2)定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置,并且可以压住其他盒子。 1、定位应用场景 1)某个元素可以自由的在一个盒子内移动位置,并压住其他盒子。 2)滚动窗口的时候,盒子固定在屏幕某个位置。 特定使用:1、盒子压盒子2、页面滚动盒子不动 ...
Vue是一种流行的JavaScript框架,它通过组件化的方式让开发者能够更加高效地构建交互式的用户界面。而Vue规范化CSS则是一种基于Vue框架的CSS规范,它为你提供了一套清晰、简洁的CSS编码规则,帮助你更好地组织和管理你的样式。 Vue规范化CSS能够让你的样式表更具可读性和可维护性。通过统一的命名规则和组织结构,你可以...
Vuetify:Vuetify 是一个基于 Vue.js 的 Material Design 组件框架。它提供了大量的预定义组件和样式,可以轻松实现 Material Design 风格的界面。 Tailwind CSS:Tailwind CSS 是一个功能丰富的 utility-first CSS 框架,它提供了一组小型的、可组合的 CSS 类,可以实现快速构建各种样式。
Vue 中使用 CSS Modules优雅方法 css Modules:局部作用域 & 模块化 CSS Modules 为每一个局部类赋予全局唯一的类名,这样组件样式间就不会相互影响了。如: /* button.css */ .button { font-size: 16px; } .mini { font-size: 12px; } 它会被转换为类似这样: ...
Vue 方式 Title.nav{margin: 40px;position: relative;}.nav li{float: left;width: 100px;height: 40px;line-height: 40px;color: #fff;text-align: center;background: #09f;cursor: pointer;}.nav span{position: relative;z-index: 2;}.nav .slider{position: absolute;transition: all .5s cubic...
📚 这篇笔记详细介绍了Vue.js中的CSS功能,包括Vue 3.0的新特性。🔍 深度选择器的使用,如 :deep() 插槽选择器,全局选择器和变量绑定(v-bind)等。📖 组件作用域CSS、CSS Modules和CSS中的v-bind()等详细用法。🔗 参考链接:Vue官方文档。👩💻 #前端开发 #前端学习 #web前端学习 #web前端 #web...
当动画第一帧执行结束后(动画过程中),Vue 分析了 transition 标签、知道它是一个动画效果后,在动画运行到第二帧时会把 fade-enter 的 class 去除,同时再增加一个 fade-enter-to 的 class 名。 接着动画执行到结束时,Vue 会把 fade-enter-active 和 fade-enter-to 这两个 class 移除。 我们继续看下文的代...