Vuetify

Vuetify component: < v-text-field :rules ="[ sellerId ]" ></ v-text-field > JS： data: function () { return { disabled: false } }, methods: { sellerId (value) { if (value.length === 0 ) { this .disabled = true ; return "What are you trying to do here?" ; } else { return true ; } } } 来源： oschina 链接： https://my.oschina.net/u/4358285/blog/3535406

本文中我们以Vuetify中的v-text-field组件为例总结Vuetify内置的表单校验规则支持。 要点 要向字段添加验证，我们必须做两件事： 将字段设为必填字段 为字段创建验证规则 参考下面的例子： required是HTML5新引入的一个属性，required 属性规定必需在表单提交之前填写输入字段。 如果使用该属性，则字段是必填（或必选）的。 【注释】required 属性适用于以下 <input> 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。 解析 Vuetify官方仅仅简单地给出v-text-field组件中属性(Prop) rules的基本介绍，如下图，并没有给出详细的使用举例： 结合网络上已有使用经验，可以得出的结论是：对于少量基本的表单组件的规则校验可以使用上面的required属性及这里的Vuetify组件中专有的rules属性实现支持。事实上，第一个图中已经给出了使用格式。 上面使用的校验规则如下： 基础型举例 对于上面例子的更复杂实用一点的版本如下： 然后，在data中定义如下规则： v-form校验与提交操作 v-form组件提供了三个功能与校验操作相关，我们可以通过在组件上设置ref来访问它们。例如，<v

Vue.js 作为现在的前端主流框架之一，在国内有着广泛的应用，也是面试几乎都会问到的内容 ，经常会问到： Vue的新特性都有什么？ Vue的性能如何优化？ 如果能够看懂它的源码，熟悉它的各种使用技巧，对你的 入职大厂，升职加薪 有极大的助益！ 今天来分享9个非常不错的开源项目，可以帮助我们理解Vue框架。 使用Vue的好处 该框架非常小。 约为18–21KB； Vue 支持用基于组件的方法来构建 Web 应用 ； 详细的文档 。这对于初学者来说很容易上手； 易于理解。 由于其结构简单，你可以轻松地把 Vue.js 添加到自己的 Web 项目里。它凭借定义良好的体系结构来保存你的数据。生命周期方法和自定义方法是分开的； 轻松的集成。 你可以通过 CDN 来轻松添加 Vue.js，不依赖 Node.js 和 npm 环境就可以用。完全可以把它当成替代 jQuery 的绝佳选择； 出色的工具。 通过 Vue CLI ，你可以使用内置的路由、状态存储、Lint、单元测试、CSS预处理器、Typescript、PWA 等来启动新项目。此外，Vue CLI 还提供了用于管理项目的UI。 Vue开源项目 下面汇总了一些非常流行的工具和库，并包括在 Vue 生态系统中所涉及到的其他库和插件。 是根据其有用性、有效性、文档、思想和贡献指南进行选择的。 UI组件 Vuetify 网站： https:

大家好，我是为前端娱乐圈操碎了心的小迷妹，正宗前端开发一枚，每天推荐一个小工具/源码，装满你的收藏夹，每天分享一个小技巧，让你轻松节省开发效率，实现不加班不熬夜不掉头发，是我的目标。 1: Nuxt.js Github stars: 28.9k 网站： https://nuxtjs.org/ Github： https://github.com/nuxt/nuxt.js Nuxt 是一个简单而直接的框架，用于构建通用程序，例如：服务器端渲染的应用，单页应用，渐进式 Web 应用，或只是把它用作静态站点生成器。它也是模块化的，所以你只需使用程序所需的那些模块即可。Nuxt 使你不必纠结于构建和优化程序的工作。Nuxt.js 具有模块化架构，有50多个模块可供选择。 2：Quasar 网站： https://quasar.dev/ Github： https://github.com/quasarframework/quasar Github stars: 15.8k Quasar-Framework 是一款基于vue.js开发的开源的前端框架, 只写一次代码的情况下发布到多个平台 website, PWA ,Mobile App 和 Electron App ，用起来表示十分满意。 3：Bootstrap Vue 网站： https://bootstrap-vue.org/

如今，黑暗模式是Web，桌面和移动应用程序中经常需要使用的功能。 通过增加可定制的界面来提高开发者对UI库的使用体验是非常重要的，可以带动很多开发者使用特定的UI库。 以下是一些支持暗模式的已知UI库。 Material UI React JS的Material Design UI框架在GitHub上拥有超过57,000个星标，具有简单，面向开发人员和可扩展的主题功能。它基于著名的CSS-in-JS，使开发人员可以在与同一基本概念相关的三种不同样式API之间进行选择。 任何熟悉Material UI的开发人员都可以证明其主题和调色板管理功能是生态系统中最好的。 根据主题化文档，我们可以很容易地在基本material UI应用程序上添加暗色主题。 此外，当我们访问文档时，我们可以切换明/暗模式和切换调色板，以帮助可视化所有提供的素材组件与不同的主题。 Vuetify Vuetify在GitHub上拥有25k颗星，是Vue中非常流行的UI框架。 它非常有名，因为它充分利用了Vue API。在Vuetify上，主题系统构建得非常好。给你的web应用一个黑暗主题是非常容易的。 Vuetify支持Material Design规范的浅色和深色版本。 这种指定从根程序组件 v-app 开始，并得到大多数组件的支持。默认情况下，你的应用程序将使用浅色主题

创建, 发布自己的 Vue UI 组件库 前言 在使用 Vue 进行日常开发时, 我们经常会用到一些开源的 UI 库, 如: Element-UI , Vuetify 等. 只需一行命令, 即可方便的将这些库引入我们当前的项目: npm install vuetify // or yarn add vuetify 但是当我们自己开发了一个 UI Component , 需要在多个项目中使用的时候呢? 我们首先想到的可能是直接复制一份过去对吗? 这样做是很方便, 但是有两个问题: 当该 component 需要更新时, 我们需要手动维护所有用到该 component 的更新 当有多个 component 需要共享时, 手动复制过于繁琐 那么, 我们为什么不发布一个 UI 组件库给自己用呢? 本文笔者将介绍如何一步步, 创建并发布自己的 Vue UI 组件库. 初始化 project 这里我们使用官方的 vue-cli 初始化一个 Vue 项目 npm install -g @vue/cli # or yarn global add @vue/cli vue create personal-component-set 进入我们新建的项目, 让我们看看当前的项目文件: 接下来让我们写一个简单的 Vue component . 这里我写了一个简单的顶栏控件, 用来展示: 页面标题,