什么是 vue-passwordbar?
vue-passwordbar 是一个基于 Vue.js 框架开发的一个密码强度检测组件。使用该组件可以帮助用户检测他们在输入密码时的密码强度，并给出相应的提示等。
安装和使用
1. 安装
使用 npm 安装：
npm install vue-passwordbar --save
2. 使用
在你的 Vue.js 组件中使用 vue-passwordbar：
-- -------------------- ---- -------
----------
-----
------ --------------- -------------------
---------------- ---------------------------------------
------
-----------
--------
------ -------------- ---- -----------------
------ ------- -
----------- -
--------------
--
------ -
------ -
--------- --
-
-
-
---------如上所示，我们先通过 import 引入 vue-passwordbar 组件，然后再将其作为子组件使用。
password 属性是用来绑定用户输入的密码字符。而 vue-passwordbar 组件则会实时根据该 password 的强度更新自己的模型。
理解 vue-passwordbar 的原理
1. 组件的模型
vue-passwordbar 组件会根据传入的密码字符串，自动判断其强度，并在视图中为用户显示不同的强度评分提示和进度条样式等。
其原理是通过 vue 对其强化了双向绑定机制，然后利用计算属性进一步衍生出了多个用于渲染视图的组件内部数据模型。
这些模型将所有可能的密码强度，从弱到强，分为五个不同的等级。然后根据传入的密码强度进行匹配，返回渲染视图所需要的模型。
2. 组件的模板
模板是 vue-passwordbar 组件从内而外的另一个组成部分。通过一个单一的 Template 标签包含，它将数据模型与 html 元素结合起来，使其在浏览器中呈现出理想的界面样式。
3. 样式表
在 vue-passwordbar 组件的样式表中，每个密码等级都有其特定的样式。
无论是使用默认还是自定义样式的用户，都应该首先通过调整样式表来实现他们的样式想法。同时如果有必要的话，还可以通过自己的 Stylus 文件来为其提供所需的 CSS 样式模板。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562f781e8991b448e0c37