09 2021 档案

摘要:一、BootstrapValidator插件简介 BootstrapValidator,是基于Bootstrap的表单校验插件,内置了许多表单验证器,也可以自定义验证器 BootstrapValidator的开发者:国外的nghuuphuoc开发的 BootstrapValidator包下载地址: 阅读全文
posted @ 2021-09-30 16:39 AnnLing 阅读(350) 评论(0) 推荐(0)
摘要:轮播图 轮播插件(carousel),一般是将大小相同的图片按照顺序依次播放。 1、轮播实例 1.1 通过data属性调用轮播插件 <!DOCTYPE html> <html> <head> <!-- HTML5文档类型 --> <meta charset="utf-8"> <!-- 移动端适配 - 阅读全文
posted @ 2021-09-30 16:07 AnnLing 阅读(902) 评论(0) 推荐(0)
摘要:折叠插件 折叠插件(collapse),通过点击折叠和展开内容。 1、折叠插件的用法 1.1 通过data属性调用折叠插件 <!-- 方法1 通过data属性调用折叠插件 --> <button class="btn btn-primary" data-toggle="collapse" data- 阅读全文
posted @ 2021-09-30 14:37 AnnLing 阅读(256) 评论(0) 推荐(0)
摘要:弹出框 弹出框依赖 工具提示插件 ,因此,如果你定制了 Bootstrap,一定要注意将依赖的插件编译进去。 由于性能的原因,工具提示和弹出框的 data 编程接口(data api)是必须要手动初始化的。在一个页面上一次性初始化所有弹出框的方式是通过 data-toggle 属性选中他们: $(f 阅读全文
posted @ 2021-09-30 11:47 AnnLing 阅读(668) 评论(0) 推荐(0)
摘要:工具提示 工具提示插件是指当鼠标移动到元素上时显示提示消息,也可以自定义显示的方式。该插件必须要写 1、工具提示插件的实例 <!-- 工具提示 --> <button class="btn btn-default" data-toggle="tooltip" data-placement="left 阅读全文
posted @ 2021-09-30 10:21 AnnLing 阅读(170) 评论(0) 推荐(0)
摘要:标签页 tab标签页插件就是我们通常所说的选项卡功能。 1、用法 1.1 通过data属性使用标签页 <!-- 标签页 --> <ul class="nav nav-tabs"> <!-- 通过data属性的方式使用标签页插件 --> <li class="avtive"><a href="#htm 阅读全文
posted @ 2021-09-29 18:00 AnnLing 阅读(216) 评论(0) 推荐(0)
摘要:滚动监听 滚动监听插件是用来根据滚动条所处的位置来自动更新导航项的。如下所示,滚动导航条下面的区域并关注导航项的变化。下拉菜单中的条目也会自动高亮显示。 1、滚动侦听的实例 实现点击导航条中的列表项自动更新导航项。 实现高亮显示当前激活的链接。 2、滚动侦听的用法 <!DOCTYPE html> < 阅读全文
posted @ 2021-09-29 17:33 AnnLing 阅读(177) 评论(0) 推荐(0)
摘要:下拉菜单 1、下拉菜单实例 2、下拉菜单的用法 2.1 通过data属性调用下拉菜单 通过data属性 data-toggle="dropdown" ,来调用下拉菜单插件。 <!-- 通过data属性调用下拉列表 --> <div class="dropdown"> <button class="b 阅读全文
posted @ 2021-09-29 15:28 AnnLing 阅读(189) 评论(0) 推荐(0)
摘要:模态框 modal.js 模态框经过了优化,更加灵活,以弹出对话框的形式出现,具有最小和最实用的功能集。 模态框的特点: 不支持同时打开多个模态框 (千万不要在一个模态框上重叠另一个模态框。要想同时支持多个模态框,需要自己写额外的代码来实现。) 模态框的 HTML 代码放置的位置(务必将模态框的 H 阅读全文
posted @ 2021-09-29 09:34 AnnLing 阅读(588) 评论(0) 推荐(1)
摘要:JavaScript 插件 jQuery 插件为 Bootstrap 的组件赋予了“生命”。可以简单地一次性引入所有插件,或者逐个引入到你的页面中。 1、概览 1.1 JavaScript 插件的引入 1.1.1 单个引入 JavaScript 插件只单个引入需要用的js文件(使用 Bootstra 阅读全文
posted @ 2021-09-29 09:12 AnnLing 阅读(111) 评论(0) 推荐(0)
摘要:面板 虽然不总是必须,但是某些时候你可能需要将某些 DOM 内容放到一个盒子里。对于这种情况,可以试试面板组件。 1、基本面板 默认的 .panel 组件所做的只是设置基本的边框(border)和内补(padding)来包含内容。 <!-- 面板 --> <!-- 基本面板 --> <div cla 阅读全文
posted @ 2021-09-28 16:24 AnnLing 阅读(230) 评论(0) 推荐(0)
摘要:列表组 列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。 1、基本列表组 最简单的列表组仅仅是一个带有多个列表条目的无序列表,另外还需要设置适当的类。我们提供了一些预定义的样式,你可以根据自身的需求通过 CSS 自己定制。 <!-- 列表组 --> <ul clas 阅读全文
posted @ 2021-09-28 16:03 AnnLing 阅读(276) 评论(0) 推荐(0)
摘要:媒体对象 这是一个抽象的样式,用以构建不同类型的组件,这些组件都具有在文本内容的左或右侧对齐的图片(就像博客评论或 Twitter 消息等)。 1、默认样式 默认样式的媒体对象组件允许在一个内容块的左边或右边展示一个多媒体内容(图像、视频、音频)。 1.1 在内容块的左边添加图片 <!-- 默认样式 阅读全文
posted @ 2021-09-28 15:47 AnnLing 阅读(116) 评论(0) 推荐(0)
摘要:进度条 通过这些简单、灵活的进度条,为当前工作流程或动作提供实时反馈。 1、默认样式进度条 <!-- 默认样式进度条 --> <div class="progress"> <div class="progress-bar" aria-valuenow="60" aria-valuemin="0" a 阅读全文
posted @ 2021-09-28 15:16 AnnLing 阅读(164) 评论(0) 推荐(0)
摘要:警告框 警告框组件通过提供一些灵活的预定义消息,为常见的用户动作提供反馈消息。 1、默认的警告框 将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框,.alert 类是必须要设置的,另外我们还提供了有特殊意义的4个类(例如,.alert-success),代表不同的警告信息。 警告框没有默认 阅读全文
posted @ 2021-09-28 14:55 AnnLing 阅读(362) 评论(0) 推荐(0)
摘要:缩略图 通过缩略图组件扩展 Bootstrap 的 栅格系统,可以很容易地以网格的方式展示图像、视频、文本等内容。 如果你想实现一个类似 Pinterest 的页面效果(不同高度和/宽度的缩略图顺序排列)的话,你需要使用一个第三方插件,比如 Masonry、Isotope 或 Salvattore。 阅读全文
posted @ 2021-09-28 14:45 AnnLing 阅读(211) 评论(0) 推荐(0)
摘要:页头 页头组件能够为 h1 标签增加适当的空间,并且与页面的其他部分形成一定的分隔。它支持 h1 标签内内嵌 small 元素的默认效果,还支持大部分其他组件(需要增加一些额外的样式)。 <div class="page-header"> <h1>Example page header <small 阅读全文
posted @ 2021-09-28 14:25 AnnLing 阅读(68) 评论(0) 推荐(0)
摘要:巨幕 这是一个轻量、灵活的组件,它能延伸至整个浏览器视口来展示网站上的关键内容。 1、实例 如果需要让巨幕组件的宽度与浏览器宽度一致并且没有圆角,请把此组件放在所有 .container 元素的外面,并在组件内部添加一个 .container 元素。 <!-- 巨幕 --> <div class=" 阅读全文
posted @ 2021-09-28 14:22 AnnLing 阅读(160) 评论(0) 推荐(0)
摘要:徽章 给链接、导航等元素嵌套 <span class="badge"> 元素,可以很醒目的展示新的或未读的信息条目。 1、实例 在链接/按钮上显示徽章。 <!-- 徽章 --> <!-- 链接中展示徽章 --> <a href="#">未读消息 <span class="badge">20</spa 阅读全文
posted @ 2021-09-28 12:00 AnnLing 阅读(71) 评论(0) 推荐(0)
摘要:标签 1、实例 实用类label和标签外观的类(例如:label-default)来设置标签显示。 <!-- 标签 --> <h3>Example heading <span class="label label-default">New</span></h3> <h6>最新的新闻做菜的方法全在这里 阅读全文
posted @ 2021-09-28 11:52 AnnLing 阅读(90) 评论(0) 推荐(0)
摘要:分页 1、默认分页 受 Rdio 的启发,我们提供了这个简单的分页组件,用在应用或搜索结果中超级棒。组件中的每个部分都很大,优点是容易点击、易缩放、点击区域大。 <!-- 默认分页 --> <nav aria-label="Page navigation"> <ul class="paginatio 阅读全文
posted @ 2021-09-28 11:44 AnnLing 阅读(430) 评论(0) 推荐(0)
摘要:路径导航 1、面包屑 <!-- 面包屑 --> <ol class="breadcrumb"> <li class="active">Home</li> </ol> <!-- 面包屑 --> <ol class="breadcrumb"> <li><a href="#">Home</a></li> 阅读全文
posted @ 2021-09-28 11:25 AnnLing 阅读(55) 评论(0) 推荐(0)
摘要:导航条 1、导航条的整体样式 1.1 导航条固定在顶部 添加 .navbar-fixed-top 类可以让导航条固定在顶部,还可包含一个 .container 或 .container-fluid 容器,从而让导航条居中,并在两侧添加内补(padding)。 <nav class="navbar n 阅读全文
posted @ 2021-09-28 10:50 AnnLing 阅读(486) 评论(0) 推荐(0)
摘要:导航 Bootstrap 中的导航组件都依赖同一个 .nav 类,状态类也是共用的。改变修饰类可以改变样式。 1、标签页 注意 .nav-tabs 类依赖 .nav 基类。 <!-- 导航(标签页) --> <ul class="nav nav-tabs"> <li class="active">< 阅读全文
posted @ 2021-09-27 17:24 AnnLing 阅读(230) 评论(0) 推荐(0)
摘要:输入框组 1、基本实例 在输入框的任意一侧添加额外元素或按钮。你还可以在输入框的两侧同时添加额外元素。 为 .input-group 添加相应的尺寸类,其内部包含的元素将自动调整自身的尺寸。不需要为输入框组中的每个元素重复地添加控制尺寸的类。 <!-- 输入框组 (基本用法)--> <div cla 阅读全文
posted @ 2021-09-27 16:39 AnnLing 阅读(238) 评论(0) 推荐(0)
摘要:按钮式下拉菜单 把任意一个按钮放入 .btn-group 中,然后加入适当的菜单标签,就可以让按钮作为菜单的触发器了。 1、单按钮下拉菜单 只要改变一些基本的标记,就能把按钮变成下拉菜单的开关。 <!-- 按钮式下拉菜单 --> <div class="btn-group"> <button cla 阅读全文
posted @ 2021-09-27 15:51 AnnLing 阅读(163) 评论(0) 推荐(0)
摘要:按钮组 1、基本实例 把多个按钮放在一个容器中,添加类.btn-group即可。 <!-- 按钮组 --> <div class="btn-group" role="group"> <button class="btn btn-default">按钮1</button> <button class= 阅读全文
posted @ 2021-09-27 15:26 AnnLing 阅读(161) 评论(0) 推荐(0)
摘要:下拉菜单 用于显示链接列表的可切换、有上下文的菜单。下拉菜单的 JavaScript 插件让它具有了交互性。 1、实例 通过为下拉菜单的父元素设置 .dropdown类,可以让菜单向下弹出。通过为下拉菜单的父元素设置 .dropup 类,可以让菜单向上弹出(默认是向下弹出的)。 <!-- 下拉菜单( 阅读全文
posted @ 2021-09-27 14:13 AnnLing 阅读(331) 评论(0) 推荐(0)
摘要:Glyphicons 字体图标 1、所有可用的图标 进入https://v3.bootcss.com/components/ 查看对应的图标。 2、图标的用法 2.1 单独使用 <!-- 图标 基本用法 --> <span class="glyphicon glyphicon-user"></spa 阅读全文
posted @ 2021-09-27 14:09 AnnLing 阅读(445) 评论(0) 推荐(0)
摘要:图片 1、响应式图片 在 Bootstrap 版本 3 中,通过为图片添加 .img-responsive 类可以让图片支持响应式布局。其实质是为图片设置了 max-width: 100%;、 height: auto; 和 display: block; 属性,从而让图片在其父元素中更好的缩放。 阅读全文
posted @ 2021-09-27 10:44 AnnLing 阅读(104) 评论(0) 推荐(0)
摘要:按钮 1、可作为按钮使用的标签或元素 为 <a>、<button> 或 <input> 元素添加按钮类(button class)即可使用 Bootstrap 提供的样式。 <!-- 可作为按钮使用的标签或元素 --> <a class="btn btn-default" href="#" role 阅读全文
posted @ 2021-09-27 10:41 AnnLing 阅读(254) 评论(0) 推荐(0)
摘要:表单 1、基本实例 单独的表单控件会被自动赋予一些全局样式。所有设置了 .form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;。 将 label 元素和前面提到的控件包裹在 .form-group 中可以获 阅读全文
posted @ 2021-09-26 15:53 AnnLing 阅读(311) 评论(0) 推荐(0)
摘要:表格 1、基本表格 为任意 <table> 标签添加 .table 类可以为其赋予基本的样式 — 少量的内补(padding)和水平方向的分隔线。这种方式看起来很多余!?但是我们觉得,表格元素使用的很广泛,如果我们为其赋予默认样式可能会影响例如日历和日期选择之类的插件,所以我们选择将此样式独立出来。 阅读全文
posted @ 2021-09-26 15:45 AnnLing 阅读(504) 评论(0) 推荐(0)
摘要:代码 1、内联代码 通过 <code> 标签包裹内联样式的代码片段。 For example, <code>&lt;section&gt;</code> should be wrapped as inline. 2、用户输入 通过 <kbd> 标签标记用户通过键盘输入的内容。 To switch d 阅读全文
posted @ 2021-09-26 15:18 AnnLing 阅读(74) 评论(0) 推荐(0)
摘要:排版 1、标题 HTML 中的所有标题标签,<h1> 到 <h6> 均可使用。另外,还提供了 .h1 到 .h6 类,为的是给内联(inline)属性的文本赋予标题的样式。 <h4>标题</h4> <!-- 常规标题 --> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题< 阅读全文
posted @ 2021-09-26 15:05 AnnLing 阅读(235) 评论(0) 推荐(0)
摘要:栅格系统 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。 1、简介 栅格系统用于通过一系列的行(row)与列(column)的组合来创 阅读全文
posted @ 2021-09-26 13:53 AnnLing 阅读(246) 评论(0) 推荐(0)
摘要:1、HTML5 文档类型 Bootstrap 使用到的某些 HTML 元素和 CSS 属性需要将页面设置为 HTML5 文档类型。在你项目中的每个页面都要参照下面的格式进行设置。 <!doctype html> <html lang="en"> ... </html> 2、移动设备优先 为了确保适当 阅读全文
posted @ 2021-09-26 11:14 AnnLing 阅读(69) 评论(0) 推荐(0)
摘要:一、下载Bootstrap Bootstrap (当前版本 v3.4.1)提供以下几种方式帮你快速上手,每一种方式针对具有不同技能等级的开发者和不同的使用场景。 1、BootstrapCDN 通过cdn直接引入bootstrap的css和js核心文件(同时还需要引入jquery核心js文件,因为bo 阅读全文
posted @ 2021-09-26 11:07 AnnLing 阅读(792) 评论(0) 推荐(0)
摘要:一、表单校验 二、代码实例 1、自定义样式(Custom styles) <form class="row g-3 needs-validation" novalidate> <div class="col-md-4"> <label for="validationCustom01" class=" 阅读全文
posted @ 2021-09-24 09:57 AnnLing 阅读(390) 评论(0) 推荐(0)
摘要:一、表单的布局 二、代码实例 1、表单网格(Form grid) <div class="row"> <div class="col"> <input type="text" class="form-control" placeholder="First name" aria-label="Firs 阅读全文
posted @ 2021-09-24 09:39 AnnLing 阅读(402) 评论(0) 推荐(0)
摘要:一、浮动标签(Floating labels) 1、浮动标签 .form-floating <div class="form-floating mb-3"> <input type="email" class="form-control" id="floatingInput" placeholder 阅读全文
posted @ 2021-09-23 17:45 AnnLing 阅读(425) 评论(0) 推荐(0)
摘要:一、输入框组 二、实例 1、基本用法(Basic example) <div class="input-group mb-3"> <span class="input-group-text" id="basic-addon1">@</span> <input type="text" class="f 阅读全文
posted @ 2021-09-23 16:17 AnnLing 阅读(450) 评论(0) 推荐(0)
摘要:一、区间 区间 禁用 最小和最大 分步 二、效果展示 1、区间 .form-range <label for="customRange1" class="form-label">Example range</label> <input type="range" class="form-range" 阅读全文
posted @ 2021-09-23 16:06 AnnLing 阅读(152) 评论(0) 推荐(0)
摘要:一、单选和复选 1、复选按钮(Checks) 2、单选按钮(Radios) 3、开关(Switch) 4、按钮(Button) 二、实例 复选按钮 2.1 复选按钮默认 form-check-input checked <!-- 复选按钮 --> <div class="form-check"> < 阅读全文
posted @ 2021-09-23 15:24 AnnLing 阅读(1961) 评论(0) 推荐(0)
摘要:一、选择(Select) 默认(Default) 大小(Sizing) 禁用(Disabled) 二、实例 1、默认下拉选项 form-select <!-- 默认下拉选项 --> <select class="form-select" aria-label="Default select exam 阅读全文
posted @ 2021-09-23 14:58 AnnLing 阅读(271) 评论(0) 推荐(0)
摘要:一、表单控制(Form controls) 表单大小(Sizing) 表单可见性(Disabled) 只读纯文本(Readonly plain text) 文件上传(File input) 颜色(Color) 数据列表(Datalists) 二、实例 1、表单大小(Sizing) .form-con 阅读全文
posted @ 2021-09-23 14:21 AnnLing 阅读(785) 评论(0) 推荐(0)
摘要:一、画像 通过 Bootstrap 的画像(figure)组件来显示相关联的图片和文本。.figure、.figure-img 和 .figure-caption 类为 HTML5 的 <figure> 和 <figcaption> 元素提供了一些基本样式。<figure> 标签内所包含的图片如果没 阅读全文
posted @ 2021-09-23 14:13 AnnLing 阅读(182) 评论(0) 推荐(0)
摘要:一、表格 设置表格样式(.table),表格头部(.table-light .table-dark ) 状态类给表格、行、单元格添加特殊的颜色(table-primary、table-secondary、table-success、table-danger、table-warning、table-i 阅读全文
posted @ 2021-09-23 14:02 AnnLing 阅读(352) 评论(0) 推荐(0)
摘要:一、图片(Images) 响应式图片 图片的缩略图 对齐图片 二、代码实例 2.1 响应式图片 通过 Bootstrap 所提供的 .img-fluid 类让图片支持响应式布局。其原理是将 max-width: 100%; 和 height: auto; 赋予图片,以便随父元素一起缩放。 <img 阅读全文
posted @ 2021-09-23 11:30 AnnLing 阅读(259) 评论(0) 推荐(0)
摘要:一、排版包括哪些内容 标题(Headings) 自定义标题(Customizing headings) 显示标题(Display headings) 段落突出显示(Lead) 内联文本元素(Inline text elements) 缩写(Abbreviations) 引用(Blockquotes) 阅读全文
posted @ 2021-09-23 11:13 AnnLing 阅读(301) 评论(0) 推荐(0)
摘要:六、css布局(CSS Grid) 1、3列(Three columns) <div class="grid"> <div class="g-col-4">.g-col-4</div> <div class="g-col-4">.g-col-4</div> <div class="g-col-4"> 阅读全文
posted @ 2021-09-23 10:50 AnnLing 阅读(430) 评论(0) 推荐(0)
摘要:五、水槽(Gutters) 1、水平水槽(Horizontal gutters) <div class="container px-4"> <div class="row gx-5"> <div class="col"> <div class="p-3 border bg-light">Custom 阅读全文
posted @ 2021-09-23 10:40 AnnLing 阅读(235) 评论(0) 推荐(0)
摘要:四、列(Columns) 1、对齐(Alignment) 1.1 垂直对齐(Vertical alignment) 所有列整体垂直方向对齐方式: align-items-start 顶部对齐 align-items-center 中间对齐 align-items-end 底部对齐 <div clas 阅读全文
posted @ 2021-09-23 10:39 AnnLing 阅读(565) 评论(0) 推荐(0)
摘要:三、网格系统(Grid system) 1、网格点(Grid options) 2、自动布局列(Auto-layout columns) 2.1 等宽度(Equal-width) <div class="container"> <div class="row"> <div class="col"> 阅读全文
posted @ 2021-09-23 10:37 AnnLing 阅读(400) 评论(0) 推荐(0)
摘要:二、容器(Containers) 1、容器的网格对比 2、默认容器(Default container) <div class="container"> <!-- Content here --> </div> 3、响应式容器(Responsive containers) <div class="c 阅读全文
posted @ 2021-09-23 10:36 AnnLing 阅读(211) 评论(0) 推荐(0)
摘要:一、断点(Breakpoints) 1、可用的断点(Available breakpoints) $grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px ); 2、媒体查询(Media 阅读全文
posted @ 2021-09-22 17:23 AnnLing 阅读(559) 评论(0) 推荐(0)
摘要:一、删格系统简介 Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列。它包含了易于使用的预定义类,还有强大的mixin 用于生成更具语义的布局。 官网:https://v3.bootcss.com/css/#gri 阅读全文
posted @ 2021-09-22 14:34 AnnLing 阅读(885) 评论(0) 推荐(0)
摘要:一、Bootstrap简介 1、Bootstrap是什么 Bootstrap是由Twitter推出的一个开源的前端开发框架。基于HTML/CSS/Javastrip,代码简介、视觉优美,用来快速开发基于PC及移动端的Web页面,更快速、简洁。 Bootstrap官网:https://getboots 阅读全文
posted @ 2021-09-22 13:51 AnnLing 阅读(1126) 评论(0) 推荐(0)
摘要:一、准备工作 1、初始化项目 cmd管理员身份运行如下命令: vue init webpack myproject //创建项目名为myApp(webpack模板) cd myApp cnpm install cnpm install less less-loader -D //安装开发依赖: le 阅读全文
posted @ 2021-09-16 09:58 AnnLing 阅读(267) 评论(0) 推荐(0)
摘要:一、初始化项目并安装Vuex依赖 1、初始化一个项目vuex-demo 运行vue init webpack-simple vuex-demo 运行cd vuex-demo 运行cnpm install 2、安装vuex 运行cnpm install vuex -S (安装vuex生产依赖) 3、新 阅读全文
posted @ 2021-09-15 16:55 AnnLing 阅读(350) 评论(0) 推荐(0)
摘要:一、Vuex简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window),提供了 阅读全文
posted @ 2021-09-15 11:41 AnnLing 阅读(139) 评论(0) 推荐(0)
摘要:一、简介 1、全局组件(插件) 全局插件(又叫全局组件),是指可以在main.js中使用Vue.use()进行引入的插件,在其他组件中都可以使用。如:vue-router,在main.js中的写法如下: import VueRouter from 'vue-router' //引入全局组件(插件) 阅读全文
posted @ 2021-09-15 09:32 AnnLing 阅读(452) 评论(0) 推荐(0)
摘要:一、简介 Element UI是饿了么团队提供的一套基于vue2.0的组件库,可以快速搭建网站。 Element UI PC端UI库 Mint UI 移动端UI库 官网:https://element.eleme.cn/#/zh-CN 二、快速上手 2.1 创建项目 1、运行vue init web 阅读全文
posted @ 2021-09-14 16:20 AnnLing 阅读(1293) 评论(0) 推荐(0)
摘要:vue-router模块化开发的步骤: 以vue-cli-demo为例(该项目使用的是webpack-simple模板) 1、安装vue-router模块 进入项目vue-cli-demo路径, 运行 cnpm install vue-router -S (安装vue-router生产依赖) 安装完 阅读全文
posted @ 2021-09-14 16:14 AnnLing 阅读(708) 评论(0) 推荐(0)
摘要:为自定义组件添加事件的步骤: 以vue-cli-demo为例(该项目使用的是webpack-simple模板) 1、新建自定义组件 在component文件夹下新建自定义组件,命名为myButton.vue,并写myButton.vue里面的代码内容。 2、使用自定义组件myButton.vue 在 阅读全文
posted @ 2021-09-14 15:29 AnnLing 阅读(251) 评论(0) 推荐(0)
摘要:axios模块化的步骤: 以vue-cli-demo为例(该项目使用的是webpack-simple模板) 1、安装axios模块 进入项目vue-cli-demo路径, 运行 cnpm install axios -S (安装axios生产依赖) 安装完成后,一是在node_modules文件夹中 阅读全文
posted @ 2021-09-14 15:27 AnnLing 阅读(326) 评论(0) 推荐(0)
摘要:一、vue-cli脚手架简介 1、vue-cli是一个vue脚手架,可以快速构造项目结构。 2、vue-cli本身集成了多种项目模板: simple 很少简单 webpack 包含ESLint代码规范检查、单元测试等 webpack-simple 简化版的webpack,没有代码规范检查、单元测试 阅读全文
posted @ 2021-09-14 11:55 AnnLing 阅读(654) 评论(0) 推荐(0)
摘要:一、vue-cli脚手架简介 1、vue-cli是一个vue脚手架,可以快速构造项目结构。 2、vue-cli本身集成了多种项目模板: simple 很少简单 webpack 包含ESLint代码规范检查、单元测试等 webpack-simple 简化版的webpack,没有代码规范检查、单元测试 阅读全文
posted @ 2021-09-10 15:33 AnnLing 阅读(148) 评论(0) 推荐(0)
摘要:一、单文件组件简介 1、什么是.vue文件 .vue文件是单文件组件,是vue.js自定义的一种文件格式,一个.vue文件就是一个单独的组件。在文件内封装了组件相关的代码。 .vue文件包括三部分: a) <template> 写html代码 b) <style> 写css代码 c) <script 阅读全文
posted @ 2021-09-10 14:46 AnnLing 阅读(207) 评论(0) 推荐(0)
摘要:一、路由与动画结合 路由可以与动画结合使用。 二、代码实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>路由与动画结合</title> 6 <style> 7 /*设置链接点击后的颜色 阅读全文
posted @ 2021-09-10 14:20 AnnLing 阅读(420) 评论(0) 推荐(0)
摘要:一、路由实例的方法 1、router.push() 添加路由,功能与<router-link>相同 2、router.push() 替换路由,不会产生历史记录 二、代码实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset=" 阅读全文
posted @ 2021-09-10 14:17 AnnLing 阅读(2317) 评论(0) 推荐(0)
摘要:一、路由嵌套参数的传递 传参数的两种方式: 1.使用查询字符串(例如:login?name=tom&psw=123),通过{{$router.query}}获取参数 2.rest风格url(例如:login/tom/123),通过{{$router.params}}获取参数 二、代码实现 1 <!D 阅读全文
posted @ 2021-09-10 13:37 AnnLing 阅读(450) 评论(0) 推荐(0)
摘要:一、简介 路由嵌套是在路由配置的时候,使用children配置子路由。 二、代码实现 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>路由嵌套</title> 6 <style> 7 /* 阅读全文
posted @ 2021-09-10 12:01 AnnLing 阅读(305) 评论(0) 推荐(0)
摘要:一、安装插件autofilename,实现文件路径提示 / 代码格式化。 1、点击菜单“preferences”——“package control”,在弹出的下拉框中选择“install package”。 2、等待几秒中,在弹出的新下拉框中,输入“autofilename”,下拉框会自动更新列表 阅读全文
posted @ 2021-09-10 10:32 AnnLing 阅读(254) 评论(0) 推荐(0)
摘要:一、vue-router简介 使用vue.js开发SPA(Single Page Application,单页面应用)。根据不同url地址,显示不同的内容,但显示在同一页面中,称为单页面应用。(很多移动端产品使用SPA) 二、vue-router的安装 1、运行cnpm install vue-ro 阅读全文
posted @ 2021-09-10 09:57 AnnLing 阅读(228) 评论(0) 推荐(0)
摘要:一、slot内容分发简介 slot的本意是位置、槽。slot的作用:获取组件中原有的内容,类似于angular中的transclude指令。 二、代码实现 1、slot简单用法(直接使用<slot></slot>) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <he 阅读全文
posted @ 2021-09-09 17:04 AnnLing 阅读(142) 评论(0) 推荐(0)
摘要:一、简介 非父子组件间的通信,我们可以通过一个空的Vue实例作为中央事件总线(事件中心),用它来触发事件和监视事件。 二、实现方法 第一步:定义空的Vue实例,实现事件的触发和侦听 var Event = new Vue(); 第二步:触发事件 Event.$emit('事件名',数据) 第三步:侦 阅读全文
posted @ 2021-09-09 14:12 AnnLing 阅读(177) 评论(0) 推荐(0)
摘要:一、单向数据流简介 props是单向绑定的,当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态(这会让应用的数据流难以理解)。而且不允许子组件直接修改父组件的数据(会报错)。 1、子组件修改数据,不影响到父组件。 解决方式:如果子组件想把它作为局部数据来使 阅读全文
posted @ 2021-09-09 11:10 AnnLing 阅读(547) 评论(0) 推荐(0)
摘要:一、父子组件 在一个组件内部定义另一个组件,称为父子组件。 子组件只能在父组件内部使用。 默认情况下,子组件不能访问父组件的数据,每个组件实例作用域都是独立的。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8" 阅读全文
posted @ 2021-09-09 10:43 AnnLing 阅读(328) 评论(0) 推荐(0)
摘要:一、内置组件component 1、component简介 有的时候,在不同组件之间进行动态切换是非常有用的。这时候就需要使用动态组件。 通过 Vue 的 <component> 元素加一个特殊的 is 属性来实现,写法: <component :is=''> </component> 多个组件使用 阅读全文
posted @ 2021-09-08 17:38 AnnLing 阅读(1110) 评论(0) 推荐(0)
摘要:一、引用模板 引用模板就是把组件的内容放到<template></template>中并引用。一般当组件的内容比较多的时候使用引用模板的方式。 二、代码实例 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 阅读全文
posted @ 2021-09-08 17:36 AnnLing 阅读(642) 评论(0) 推荐(0)
摘要:一、组件的分类 组件可以分类为:全局组件和局部组件。 1、全局组件 全局组件可以在所有的vue实例中使用。使用Vue.component定义全局组件。 2、局部组件 局部组件只能在当前vue实例中使用。使用Vue中的components选项定义局部组件。 1 <!DOCTYPE html> 2 <h 阅读全文
posted @ 2021-09-08 16:49 AnnLing 阅读(1208) 评论(0) 推荐(1)
摘要:一、组件component 1、什么是组件 组件是vue。js最强大的功能之一,组件可以扩展html元素,封装可重用的代码。组件就是自定义的元素,组件也是自定义的对象。 2、如何自定义组件? 方式1:使用组件构造器定义组件(太麻烦,不推荐使用) 先使用Vue.extend创造组件构造器,由组件构造器 阅读全文
posted @ 2021-09-08 16:31 AnnLing 阅读(246) 评论(0) 推荐(0)
摘要:一、多元素动画 需要使用transition group组件。 <transition group> </transition group> 二、实例 动画显示搜索结果。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U 阅读全文
posted @ 2021-09-08 11:58 AnnLing 阅读(109) 评论(0) 推荐(0)
摘要:一、安装animate.css 1、运行cpm install animate.css --save 2、找到下载的animate.css文件夹 3、拷贝animate.css源文件 二、引入animate.css 1、在项目中新建文件夹css存放所有css源文件,将animate.css源文件存放 阅读全文
posted @ 2021-09-08 11:22 AnnLing 阅读(583) 评论(0) 推荐(0)