目录
1、基本介绍
▶ 概述
Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
我们之前也学习过后端的框架 `Mybatis` ，`Mybatis` 是用来简化 `jdbc` 代码编写的；而 `VUE` 是前端的框架，是用来简化 `JavaScript` 代码编写的。前面的综合性案例，里面进行了大量的DOM操作，如下
使用 `VUE` 后，这部分代码我们就不需要再写了。那么 `VUE` 是如何简化 DOM 书写呢？基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。之前我们是将关注点放在了 DOM 操作上；而要了解 `MVVM` 思想，必须先了解 `MVC` 思想，如下图就是 `MVC` 思想图解
其中的C 就是咱们 js 代码，M 就是数据，而 V 是页面上展示的内容，如下图：
`MVC` 思想是没法进行双向绑定的。双向绑定是指当数据模型数据发生变化时，页面展示的会随之发生变化，而如果表单数据发生变化，绑定的模型数据也随之发生变化。接下来了解`MVVM` 思想，如下图是三个组件图解：
图中的 `Model` 就是我们的数据，`View` 是视图，也就是页面标签，用户可以通过浏览器看到的内容；`Model` 和 `View` 是通过 `ViewModel` 对象进行双向绑定的，而 `ViewModel` 对象是 `Vue` 提供的。双向绑定的效果：下图是提前准备的代码写出来的，输入框绑定了 `username` 模型数据，而在页面上也使用 `{{}}` 绑定了 `username` 模型数据
通过浏览器打开该页面可以看到如下页面
当我们在输入框中输入内容，而输入框后面随之实时的展示我们输入的内容，这就是双向绑定的效果。
▶ 快速入门
Vue 使用起来是比较简单的，总共分为如下三步：
1. 新建 HTML 页面，引入 Vue.js文件
<script src="js/vue.js"></scrip>2. 在JS代码区域，创建Vue核心对象，进行数据绑定
创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：
● `el` ： 用来指定哪个地方的标签受 Vue 管理。 该属性取值 `#app` 中的 `app` 需要是受管理的标签的id属性值
● `data` ：用来定义数据模型
● `methods` ：用来定义函数。这个我们在后面就会用到3. 编写视图
`{{}}` 是 Vue 中定义的 `插值表达式` ，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。
▷ 整体代码如下：
2、Vue 指令
指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
▷ v-bind & v-model 指令
▷ v-bind
该指令可以给标签原有属性绑定模型数据。这样模型数据发生变化，标签属性值也随之发生变化，例如：
<a v-bind:href="url">百度一下</a>上面的 `v-bind:"` 可以简化写成 `:` ，如下：
▷ v-model
该指令可以给表单项标签绑定模型数据。这样就能实现双向绑定效果。例如：
<input name="username" v-model="username">▷ 代码演示：
通过浏览器打开上面页面，并且使用检查查看超链接的路径，该路径会根据输入框输入的路径变化而变化，这是因为超链接和输入框绑定的是同一个模型数据
▶ v-on 指令
我们在页面定义一个按钮，并给该按钮使用 `v-on` 指令绑定单击事件，html代码如下：
<input type="button" value="一个按钮" v-on:click="show()">而使用 `v-on` 时还可以使用简化的写法，将 `v-on:` 替换成 `@`，html代码如下
<input type="button" value="一个按钮" @click="show()">上面代码绑定的 `show()` 需要在 Vue 对象中的 `methods` 属性中定义出来
注意：`v-on:` 后面的事件名称是之前原生事件属性名去掉on。
例如：
● 单击事件 ： 事件属性名是 onclick，而在vue中使用是 `v-on:click`
● 失去焦点事件：事件属性名是 onblur，而在vue中使用时 `v-on:blur`▷ 整体页面代码如下：
▶ 条件判断指令
接下来通过代码演示一下。在 Vue中定义一个 `count` 的数据模型，如下
现在要实现，当 `count` 模型的数据是3时，在页面上展示 `div1` 内容；当 `count` 模型的数据是4时，在页面上展示 `div2` 内容；`count` 模型数据是其他值时，在页面上展示 `div3`。这里为了动态改变模型数据 `count` 的值，再定义一个输入框绑定 `count` 模型数据。html 代码如下：
▷ 整体页面代码如下：
通过浏览器打开页面并在输入框输入不同的值，效果如下
然后我们在看看 `v-show` 指令的效果，如果模型数据 `count ` 的值是3时，展示 `div v-show` 内容，否则不展示，html页面代码如下
浏览器打开效果如下：
通过上面的演示，发现 `v-show` 和 `v-if` 效果一样，那它们到底有什么区别呢？我们根据浏览器的检查功能查看源代码：
通过上图可以看出 `v-show` 不展示的原理是给对应的标签添加 `display` css属性，并将该属性值设置为 `none` ，这样就达到了隐藏的效果。而 `v-if` 指令是条件不满足时根本就不会渲染。
▶ v-for 指令
这个指令看到名字就知道是用来遍历的，该指令使用的格式如下：
注意：需要循环那个标签，`v-for` 指令就写在那个标签上。
如果在页面需要使用到集合模型数据的索引，就需要使用如下格式：
▷ 代码演示：
通过浏览器打开效果如下
3、生命周期
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。
下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数
看到上面的图，大家无需过多的关注这张图。这些钩子方法我们只关注 `mounted` 就行了。
`mounted`：挂载完成，Vue初始化成功，HTML页面渲染成功。而以后我们会在该方法中发送异步请求，加载数据。
1、基本介绍
▶ 概述
Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。
Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等~
如下图左边的是我们编写页面看到的按钮，上图右边的是 Element 提供的页面效果，效果一目了然。
我们学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改，官网网址是：元素 - 全球最受欢迎的 Vue UI 框架 (eleme.cn)
进入官网能看到如下页面
接下来直接点击 `组件` ，页面如下
2、Element 布局
Element 提供了两种布局方式，分别是：
● Layout 布局
● Container 布局容器▷ Layout 局部
通过基础的 24 分栏，迅速简便地创建布局。也就是默认将一行分为 24 栏，根据页面要求给每一列设置所占的栏数。
在左菜单栏找到 `Layout 布局` ，然后找到自己喜欢的按钮样式，点击 `显示代码` ，在下面就会展示出对应的代码，显示出的代码中有样式，有html标签。将样式拷贝我们自己页面的 `head` 标签内，将html标签拷贝到 `<div id="app"></div>` 标签内。
▷ 整体页面代码如下：
现在需要添加一行，要求该行显示8个格子，通过计算每个格子占 3 栏，具体的html 代码如下
▶ Container 布局容器
用于布局的容器组件，方便快速搭建页面的基本结构。如下图就是布局容器效果。
如下图是官网提供的 Container 布局容器实例：
该效果代码中包含了样式、页面标签、模型数据。将里面的样式 `<style>` 拷贝到我们自己页面的 `head` 标签中；将html标签拷贝到 `<div id="app"></div>` 标签中，再将数据模型拷贝到 `vue` 对象的 `data()` 中。
▷ 整体页面代码如下：
▶ 完成分页条展示
在 Element 官网找到 `Pagination 分页` ，在页面主体部分找到我们需要的效果，如下
点击 `显示代码` ，找到 `完整功能` 对应的代码，接下来对该代码进行分析
▷ 上面代码属性说明：
● `page-size` ：每页显示的条目数
● `page-sizes` ： 每页显示个数选择器的选项设置。
`:page-sizes="[100,200,300,400]"` 对应的页面效果如下：
● `currentPage` ：当前页码。我们点击那个页码，此属性值就是几。
● `total` ：总记录数。用来设置总的数据条目数，该属性设置后， Element 会自动计算出需分多少页并给我们展示对应的页码。▷ 事件说明：
● `size-change` ：pageSize 改变时会触发。也就是当我们改变了每页显示的条目数后，该事件会触发。
● `current-change` ：currentPage 改变时会触发。也就是当我们点击了其他的页码后，该事件会触发。
来源：csdn
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
云WAF主要利用DNS技术，通过移交域名解析权来实现安全防护，用户的请求首先发送到云端节点进行检测，如存在异常请求则进行拦截否则将请求转发至真实服务器。
http://aliyunyd.com/
https://cloud.tencent.com/product/waf
https://www.huaweicloud.com/product/waf.html
https://www.dbappsecurity.com.cn/product/cloud119.html
https://cloud.baidu.com/product/waf.html
https://www.huaweicloud.com/product/cfw.html
https://www.safedog.cn/index/wafIndex.html
https://defense.yunaq.com/cyd/
https://www.f5.com.cn/cloud/products/distributed-cloud-waf
https://wangzhan.qianxin.com/
https://wangzhan.360.cn/panyun
https://www.wangsu.com/product/52
https://www.qianxin.com/product/detail/pid/400
https://www.nsfocus.com.cn/html/2020/458_0107/108.html
https://www.venustech.com.cn/new_type/xnWAF/
https://www.sangfor.com.cn/product-and-solution/sangfor-security/yun-web
https://www.riversecurity.com/product-Safeplus.shtml
硬件WAF通常部署在Web服务器之前，过滤所有外部访问流量，并对请求包进行解析，通过安全规则库的攻击规则进行匹配，识别异常并进行请求阻断。
常见产品：
https://www.dbappsecurity.com.cn/product/cloud150.html
https://www.chaitin.cn/zh/safeline
https://www.yxlink.com/index_product_index.html
https://www.nsfocus.com.cn/html/2019/206_0911/6.html
https://www.webray.com.cn/channel/RayWAF.html
https://www.topsec.com.cn/product/25.html
https://www.sangfor.com.cn/product-and-solution/sangfor-security/waf
https://www.venustech.com.cn/new_type/Webyyfhq/
https://www.f5.com.cn/products/security/advanced-waf
软件WAF安装在需要防护的服务器上，通过监听端口或以Web容器扩展方式进行请求检测和阻断。
https://www.safedog.cn/
https://yunsuo.qianxin.com/
https://d99net.net/
https://www.gov110.cn/
https://www.hws.com/
https://www.zcnt.com/
https://www.upupw.net/versions/
https://www.bt.cn/
https://www.xmirror.cn/
https://help.aliyun.com/product/28449.html
Web 开发是设计、开发和维护网站的数字过程。SEO，搜索引擎优化，是一种优化网站内容和元数据的做法，以提高其在 Google 等搜索引擎中的可见度或排名。在本文中，您将获得决定走哪条路线所需的所有信息！
在搜索引擎优化 (SEO) 中，对网站或网页进行优化以提高其可见性。SEO 可以被认为是在线成功的“秘密武器”。它可以帮助您的网站在搜索结果中排名更高，为您的网站带来更多流量并增加您的底线。
⇒基本上有两种类型的搜索引擎优化：内容营销和搜索引擎优化。内容营销就是创造有价值的、高质量的内容，这些内容将被其他人共享和链接。这种类型的优化侧重于提高网站上单个页面的可见性和排名，而不是整个网站。
⇒搜索引擎优化：这 是使您的网站或网页在搜索引擎中尽可能可见和相关的过程，编写出色的内容并向网站添加 SEO 关键字。目标是为您的网站带来更多流量，以便您可以从广告收入或通过这些访问者产生的销售中获利。
有许多不同的技术可用于 SEO，但最终归结为确保您的网站经过充分研究和设计，使其在任何给定搜索引擎中看起来都不错并且排名靠前。
“搜索引擎优化”(SEO) 和“网页开发”这两个术语可能会让很多人感到不解。那么，两者有什么区别呢？SEO 是改进网站以使其在搜索引擎结果页面(SERP) 中显示更高的做法。这意味着搜索特定主题信息的人会更频繁地找到您的网站。
另一方面，Web 开发是设计、创建和维护网站的过程。虽然 SEO 专注于改善网站在搜索引擎上的外观和性能，但 Web 开发不仅仅包含设计和布局。
它包括确保网站在各种设备上正常工作，优化社交媒体平台的内容，以及开发电子商务商店或 CRM 解决方案等自定义功能。
最终， SEO 和 Web 开发之间的区别 归结为目的。SEO 主要侧重于增加网站的访问量；而网络开发旨在确保用户一旦到达那里就可以真正找到他们正在寻找的东西。在大多数情况下，最好将这两种做法结合起来以达到您想要的结果。
如果您正在考虑 Web 开发或搜索引擎优化 (SEO)，在做出选择之前需要考虑一些事项。下面比较了每种方法及其优缺点。
优点：您可以从头开始构建自己的网站或博客，或者使用 WordPress 等现有平台。如果您想自定义网站的外观，或者不想自己托管和维护网站，这是一个多功能选项。
此外，在大多数情况下，Web 开发成本低于 SEO，如果您不确定将来是否需要它，这可能是一个因素。
缺点：如果您没有任何构建网站的经验或不熟悉编码，则 Web 开发可能具有挑战性。
此外，Web 开发并不总是与所有类型的内容兼容——例如，某些博客使用的视频内容无法轻松转换为文本。最后，一些在线流行的网站——如福布斯——是使用网络开发技术构建的，但他们的 SEO 工作是密集且昂贵的。
优点： SEO 可以帮助您的网站或博客在与您的主题相关的特定关键字的搜索结果中排名更高。这可能会导致流量和转化率增加，从而可以通过两种方式提高您的底线：
首先，随着越来越多的人通过 Google 搜索找到您的网站，广告收入可能会增加；其次，某些网站（如 Netflix）提供的高级会员服务需要在搜索引擎结果中获得较高的排名。
缺点： SEO 是一个密集且耗时的过程，从长远来看可能很难获得一致的结果。此外，某些网站内容（例如产品说明或博客文章）可能更难通过 SEO 技术进行改进，因此如果您想要获得更好的结果，则可能需要考虑其他策略。最后，SEO 可能很昂贵，尤其是当您针对高流量关键字时。
Web 开发和搜索引擎优化 (SEO) 各有利弊。但在你做出决定之前，你需要了解你的优先事项。这里有四种策略可以帮助您决定哪一种适合您：
如果 Web 开发更符合您的风格，那就去做吧。看到您的辛勤工作在搜索引擎结果页面 (SERP) 上获得更好的排名，您会感到满意。
但是，如果您更喜欢 SEO，请准备好长时间投入大量精力。您可能更愿意与顾问一起工作，他们将逐步指导您完成整个过程，但这也意味着要为他们的服务支付额外费用。
如果您知道您的行业或地区流行什么类型的网站，那么 SEO 可能更适合您。搜索引擎会奖励针对相关关键字进行了优化的网站，因此以这些术语为目标将使您的网站在竞争中更具优势。
如果您不确定从哪里开始，请尝试使用Google 的 AdWords 工具查看相关页面上最常搜索的关键字。这会给你一些关于从哪里开始优化你的网站内容和设计的想法。
许多初学者在没有先学习如何优化他们的网站的情况下直接进行全面的 SEO 计划。这可能会很快适得其反，因为搜索引擎会惩罚包含不正确或过时信息的页面。
更好的方法是从快速提示和技巧开始，然后逐步采用更全面的策略。这样，您将有更好的机会获得预期的结果，而无需预先花费太多时间和金钱。
如果您不确定哪种方法适合您，请考虑将每种方法中的一部分结合起来的混合策略。
例如，您可以定位网站上的关键关键字，但也要确保您的网站针对搜索引擎结果页面 (SERP) 进行了优化。这将为您带来两全其美的效果——增加流量和提高排名。
来源：csdn
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
目录
监测机制的变化、Fragments（碎片）的更新、API模式的变更、数据的存放、生命周期钩子、父子传参等。。
来源：csdn
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
/* JS的输出语句 */ alert("弹出") document.write("直接在写页面上面") console.log("打印在控制台上面")
效果:
confirm:
var msg1 = confirm("你好!") //我可以将我们点击确定和取消的结果当做变量的值 console.log(msg1); //当我们点击确定时候得到值是一个true,当我们点击取消的时候得到的结果是false
效果如下:
prompt:
var msg = prompt("你可以在这上面输入一句话") //我们可以把这一句话当中一个变量值,赋值给一个变量 alert(msg) //将变量的值直接弹出来
效果如下:
举例:
var a = 10; //合法 var name = "张飒" //合法 var var = "李四" //不合法,不能使用关键字 var 1name = "王八" //不合法,不能以数字开头 var alert = "老刘" //合法 var name% = "美丽姐" //不合法,变量的命名要以数字,字母,下划线,$组成
注意:常见的关键字,有var ,break, for ,if …
比如:
var userName = "张三" //遵守了小驼峰的命名规范
比如:
console.log(isNaN("张三")) //true console.log(isNaN(10)) //false
比如:
// 因为他判断是不是数字 // 如果是一个数字,那结果直接是false // 如果不是一个数字,那么他会判断这个值能不能转换成数值,如果可以,那么结果是false,如果不可以,那么结果是true // boolean与number其实就是相通的 // boolean类型的true 代表数值类型的一切非0的值 // boolean类型的false 代表数值类型的0 console.log(isNaN("123"));//false console.log(isNaN("123a"));//true console.log(isNaN(11));//false console.log(isNaN(true));//false
parseInt先看第一位的值,能不能转,如果可以转,那么就转,如果不能转,那么就NaN
parseInt再看第二位的值,能不能转,如果可以,那么转,如果不能转,那就停止了
parseFloat 他比parseInt 多认识了一个小数点 .
console.log(parseInt(“12a2”))
Stringvar res = String(变量)toString()+var a = 10; var a1 = String(a) console.log(a1, typeof a1); var b1 = a.toString() console.log(b1, typeof b1); console.log(a + "~~", typeof (a + ""));
""
来源：csdn
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
目录
动态组件指的是动态切换组件的显示与隐藏，vue提供了一个内置的<component>组件，专门用来实现动态组件的渲染。什么意思呢？接着往下看：
那么内置的<component>组件是什么情况呢？component 是可以作为标签使用的，其作用：组件的占位符。当然其作为标签直接使用是会报错的，还需要搭配属性值 is ，其表示要渲染的组件的名字。如下：
那么如何去动态的切换组件呢？写一个简单的button按钮实现即可，如下：
当我们动态的去创建组件时，这一点和 v-if 很相似，改变组件会直接将改变之前的组件的数据销毁掉。如下：
我们给Left组件设置 +1 按钮，来表示其数据：
用生命周期函数来监听组件的创建和销毁：
那我们如何在动态创建组件的同时还能暴露组件之前的数据呢？这里就需要借助keep-alive。
keep-alive对应的生命周期函数：
当组件被缓存时，会自动触发组件的deactivated生命周期函数。
当组件被激活时，会自动触发组件的activated生命周期函数。
-
created(){
-
console.log('Left组件被"创建"了');
-
},
-
destroyed(){
-
console.log('Left组件被"销毁"了');
-
},
-
-
// 当组件第一次被创建的时候，既会创建created生命周期，也会执行activated生命周期
-
// 当组件被激活时，只会触发activated生命周期，不再触发created。因为组件没有被重新创建
-
activated(){
-
console.log('组件被激活了，activated');
-
},
-
deactivated() {
-
console.log('组件被缓存了，deactivated');
-
},
include属性用来指定：只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔：
exclude属性用来指定：只有名称匹配的组件“不“会被缓存。多个组件名之间使用英文的逗号分隔：
插槽（Slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。其操作如下：
vue官方规定：每一个slot插槽，都要有一个name名称，如果省略了slot的name属性，则有一个默认名称叫做 default ，默认情况下，在使用组件的时候，提供的内容都会被填充到名字为default的插槽之中。
如果要把内容填充到指定名称的插槽中，需要使用 v-slot：这个指令，v-slot：后面要跟上插槽的名字，注意：v-slot：指令不能直接用在元素身上，必须用在template标签上。当然这个指令也是有简写形式：# 即可。template：这个标签是一个虚拟标签，只其到包裹性质的作用，不会被渲染为任何实质性的 html 元素。
后备内容：封装组件时，可以为预留的<slot>插槽提供后备内容(默认内容)。如果组件的使用者没有为插槽提供任何内容，则后备内容会生效。
作用域插槽：在封装组件时，为预留的<slot>提供属性对应的值。如下：
当然上面的作用域插槽数据明显是写死了，那么可以将数据动态存储在data里面吗？答案是可以的
来源：csdn
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~
希望得到建议咨询、商务合作，也请与我们联系01063334945。
分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
编写程序是为了让我们更高效的处理问题，但在生活中我们常常遇到一些重复性的动作，也就是当我们希望一遍又一遍的执行多次代码，但是每一次执行代码的值有不同的时候我们就可以使用循环语句来解决问题。
JavaScript支持不同类型的循环:
循环：具备的四个条件
do...while语句可以在某个条件表达式为真的前提下，循环执行指定的一段代码，直到那个表达式不为真时结束循环。
语法:
while(条件){
需要执行的代码
}
比如:
//打印0~3
let n = 0;
while (n < 3) {
n++;
}
do...while语句创建一个执行指定语句的循环，直到condition值为 false。在执行statement 后检测condition，所以指定的statement至少执行一次，理论上,所有的while循环都可以使用doWhile
语法:
//初始化条件
var index = 0;
do{
//递归条件
index++;
//循环体;
}while(条件);//同样的这个条件是一个Boolean
比如:
//列出1~10之间的所有奇数
var index = 0;
do{
index++;
if(index % 2 == 1){
console.log(index);
}
}while(index<10);
比如:
var a = 10;
//while循环
while(a<4){
console.log("执行while循环");
}
//dowhile循环
do{
console.log("这是doWhile循环");
}while(a<4)
for 语句用于创建一个循环，它包含了三个可选的表达式，这三个表达式被包围在圆括号之中，使用分号分隔，后跟一个用于在循环中执行的语句（通常是一个块语句）。
语法:
for(初始条件;循环条件;迭代条件){
//循环体
}
比如:
for(var i = 0 ; i < 10 ; i++){
console.log("输出第"+i+"次循环");
}
上面的执行顺序如下：
for...in语句以任意顺序迭代一个对象的除Symbol以外的可枚举属性，包括继承的可枚举属性。
语法:
var 对象名 = {}
for(属性名 in 对象名){
//循环体
}
比如:
var info={name:"xiaoming",sex:"man",age:18};
for (x in info){
txt=txt + person[x];
}
for...of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句
语法:
for (属性名 of 对象名) {
//statements
}
比如:
var arr = ['nick','freddy','mike','james'];
for(var item of arr){
console.log(item);
}
拓展
- 拓展1 数组的长度 数组的名字.length
- 拓展2 数组的元素当中 可以是不同的数据类型
来源：csdn
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
前言：
本次案例是一个基于 Vue2 的全局事件总线通信的仿 Github 用户搜索模块，使用的接口是 Github 官方提供的搜索接口： https://api.github.com/search/users?q=xxx（发送请求时需要将输入的用户名称绑定替换掉xxx），如果对全局事件总线不太熟练的小伙伴可以看这篇文章：http://t.csdn.cn/oHEOW
http://t.csdn.cn/oHEOW
代码共分为了两个子组件，一个是搜索组件（Search），另一个是列表组件（List），其次search组件中输入框v-model双向数据绑定，点击搜索后开始查询，其中过程分为了四步：第一是未搜索的欢迎页面背景，第二是请求未加载出来的loading背景，第三是渲染用户列表，第四是请求失败的报错提示页面背景。
绑定自定义事件在List组件中，data中的数据是定义了userinfo对象来存放其四个状态的布尔值，后续的数据传递是直接传递userinfo这个对象，使用 $on 绑定自定义事件 getuserinfo，当这个事件触发时执行后面的箭头回调函数，将传递来的对象接收并覆盖掉data中原有的四个状态布尔值。
-
<script>
-
export default {
-
name:'List',
-
data() {
-
return {
-
UserInfo:{
-
iswelcome:true,
-
isloading:false,
-
users:'',
-
error:''
-
}
-
}
-
},
-
mounted(){
-
this.$bus.$on('getUserInfo',(datas)=>{
-
// console.log('list组件收到了传来的用户数据',res);
-
this.UserInfo=datas
-
console.log(datas);
-
})
-
}
-
}
-
</script>
点击搜索按钮即可使用 $emit 触发自定义事件，在请求成功前会将 isloading 改为true，其余改为false进行数据传递，传递给 list 组件后期就会显示出loading的背景页面，其余同理
-
<script>
-
export default {
-
name:'Search',
-
data(){
-
return {
-
ipt_value:'',
-
}
-
},
-
methods:{
-
search(){
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:true,users:'',error:''})
-
this.$axios.get(`https://api.github.com/search/users?q=${this.ipt_value}`).then(
-
response => {
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:response.data.items,error:''})
-
},
-
error => {
-
console.log(error);
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:'',error:error})
-
}
-
)
-
this.ipt_value=''
-
}
-
}
-
}
-
</script>
-
前言：
本次案例是一个基于 Vue2 的全局事件总线通信的仿 Github 用户搜索模块，使用的接口是 Github 官方提供的搜索接口： https://api.github.com/search/users?q=xxx（发送请求时需要将输入的用户名称绑定替换掉xxx），如果对全局事件总线不太熟练的小伙伴可以看这篇文章：http://t.csdn.cn/oHEOW
代码共分为了两个子组件，一个是搜索组件（Search），另一个是列表组件（List），其次search组件中输入框v-model双向数据绑定，点击搜索后开始查询，其中过程分为了四步：第一是未搜索的欢迎页面背景，第二是请求未加载出来的loading背景，第三是渲染用户列表，第四是请求失败的报错提示页面背景。
绑定自定义事件在List组件中，data中的数据是定义了userinfo对象来存放其四个状态的布尔值，后续的数据传递是直接传递userinfo这个对象，使用 $on 绑定自定义事件 getuserinfo，当这个事件触发时执行后面的箭头回调函数，将传递来的对象接收并覆盖掉data中原有的四个状态布尔值。
-
<script>
-
export default {
-
name:'List',
-
data() {
-
return {
-
UserInfo:{
-
iswelcome:true,
-
isloading:false,
-
users:'',
-
error:''
-
}
-
}
-
},
-
mounted(){
-
this.$bus.$on('getUserInfo',(datas)=>{
-
// console.log('list组件收到了传来的用户数据',res);
-
this.UserInfo=datas
-
console.log(datas);
-
})
-
}
-
}
-
</script>
点击搜索按钮即可使用 $emit 触发自定义事件，在请求成功前会将 isloading 改为true，其余改为false进行数据传递，传递给 list 组件后期就会显示出loading的背景页面，其余同理
-
<script>
-
export default {
-
name:'Search',
-
data(){
-
return {
-
ipt_value:'',
-
}
-
},
-
methods:{
-
search(){
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:true,users:'',error:''})
-
this.$axios.get(`https://api.github.com/search/users?q=${this.ipt_value}`).then(
-
response => {
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:response.data.items,error:''})
-
},
-
error => {
-
console.log(error);
-
this.$bus.$emit('getUserInfo',{iswelcome:false,isloading:false,users:'',error:error})
-
}
-
)
-
this.ipt_value=''
-
}
-
}
-
}
-
</script>
来源：csdn 蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请加微信ban_lanlan，报下信息，蓝小助会请您入群。欢迎您加入噢~~ 希望得到建议咨询、商务合作，也请与我们联系01063334945。 分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。 蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
目录
1、基本介绍
▶ 概述
Vue 是一套前端框架，免除原生JavaScript中的DOM操作，简化书写。
我们之前也学习过后端的框架 `Mybatis` ，`Mybatis` 是用来简化 `jdbc` 代码编写的；而 `VUE` 是前端的框架，是用来简化 `JavaScript` 代码编写的。前面的综合性案例，里面进行了大量的DOM操作，如下
使用 `VUE` 后，这部分代码我们就不需要再写了。那么 `VUE` 是如何简化 DOM 书写呢？基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。之前我们是将关注点放在了 DOM 操作上；而要了解 `MVVM` 思想，必须先了解 `MVC` 思想，如下图就是 `MVC` 思想图解
其中的C 就是咱们 js 代码，M 就是数据，而 V 是页面上展示的内容，如下图：
`MVC` 思想是没法进行双向绑定的。双向绑定是指当数据模型数据发生变化时，页面展示的会随之发生变化，而如果表单数据发生变化，绑定的模型数据也随之发生变化。接下来了解`MVVM` 思想，如下图是三个组件图解：
图中的 `Model` 就是我们的数据，`View` 是视图，也就是页面标签，用户可以通过浏览器看到的内容；`Model` 和 `View` 是通过 `ViewModel` 对象进行双向绑定的，而 `ViewModel` 对象是 `Vue` 提供的。双向绑定的效果：下图是提前准备的代码写出来的，输入框绑定了 `username` 模型数据，而在页面上也使用 `{{}}` 绑定了 `username` 模型数据
通过浏览器打开该页面可以看到如下页面
当我们在输入框中输入内容，而输入框后面随之实时的展示我们输入的内容，这就是双向绑定的效果。
▶ 快速入门
Vue 使用起来是比较简单的，总共分为如下三步：
1. 新建 HTML 页面，引入 Vue.js文件
<script src="js/vue.js"></scrip>2. 在JS代码区域，创建Vue核心对象，进行数据绑定
创建 Vue 对象时，需要传递一个 js 对象，而该对象中需要如下属性：
● `el` ： 用来指定哪个地方的标签受 Vue 管理。 该属性取值 `#app` 中的 `app` 需要是受管理的标签的id属性值
● `data` ：用来定义数据模型
● `methods` ：用来定义函数。这个我们在后面就会用到3. 编写视图
`{{}}` 是 Vue 中定义的 `插值表达式` ，在里面写数据模型，到时候会将该模型的数据值展示在这个位置。
▷ 整体代码如下：
2、Vue 指令
指令：HTML 标签上带有 v- 前缀的特殊属性，不同指令具有不同含义。例如：v-if，v-for…
▷ v-bind & v-model 指令
▷ v-bind
该指令可以给标签原有属性绑定模型数据。这样模型数据发生变化，标签属性值也随之发生变化，例如：
<a v-bind:href="url">百度一下</a>上面的 `v-bind:"` 可以简化写成 `:` ，如下：
▷ v-model
该指令可以给表单项标签绑定模型数据。这样就能实现双向绑定效果。例如：
<input name="username" v-model="username">▷ 代码演示：
通过浏览器打开上面页面，并且使用检查查看超链接的路径，该路径会根据输入框输入的路径变化而变化，这是因为超链接和输入框绑定的是同一个模型数据
▶ v-on 指令
我们在页面定义一个按钮，并给该按钮使用 `v-on` 指令绑定单击事件，html代码如下：
<input type="button" value="一个按钮" v-on:click="show()">而使用 `v-on` 时还可以使用简化的写法，将 `v-on:` 替换成 `@`，html代码如下
<input type="button" value="一个按钮" @click="show()">上面代码绑定的 `show()` 需要在 Vue 对象中的 `methods` 属性中定义出来
注意：`v-on:` 后面的事件名称是之前原生事件属性名去掉on。
例如：
● 单击事件 ： 事件属性名是 onclick，而在vue中使用是 `v-on:click`
● 失去焦点事件：事件属性名是 onblur，而在vue中使用时 `v-on:blur`▷ 整体页面代码如下：
▶ 条件判断指令
接下来通过代码演示一下。在 Vue中定义一个 `count` 的数据模型，如下
现在要实现，当 `count` 模型的数据是3时，在页面上展示 `div1` 内容；当 `count` 模型的数据是4时，在页面上展示 `div2` 内容；`count` 模型数据是其他值时，在页面上展示 `div3`。这里为了动态改变模型数据 `count` 的值，再定义一个输入框绑定 `count` 模型数据。html 代码如下：
▷ 整体页面代码如下：
通过浏览器打开页面并在输入框输入不同的值，效果如下
然后我们在看看 `v-show` 指令的效果，如果模型数据 `count ` 的值是3时，展示 `div v-show` 内容，否则不展示，html页面代码如下
浏览器打开效果如下：
通过上面的演示，发现 `v-show` 和 `v-if` 效果一样，那它们到底有什么区别呢？我们根据浏览器的检查功能查看源代码：
通过上图可以看出 `v-show` 不展示的原理是给对应的标签添加 `display` css属性，并将该属性值设置为 `none` ，这样就达到了隐藏的效果。而 `v-if` 指令是条件不满足时根本就不会渲染。
▶ v-for 指令
这个指令看到名字就知道是用来遍历的，该指令使用的格式如下：
注意：需要循环那个标签，`v-for` 指令就写在那个标签上。
如果在页面需要使用到集合模型数据的索引，就需要使用如下格式：
▷ 代码演示：
通过浏览器打开效果如下
3、生命周期
生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。
下图是 Vue 官网提供的从创建 Vue 到效果 Vue 对象的整个过程及各个阶段对应的钩子函数
看到上面的图，大家无需过多的关注这张图。这些钩子方法我们只关注 `mounted` 就行了。
`mounted`：挂载完成，Vue初始化成功，HTML页面渲染成功。而以后我们会在该方法中发送异步请求，加载数据。
1、基本介绍
▶ 概述
Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。
Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等~
如下图左边的是我们编写页面看到的按钮，上图右边的是 Element 提供的页面效果，效果一目了然。
我们学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改，官网网址是：元素 - 全球最受欢迎的 Vue UI 框架 (eleme.cn)
进入官网能看到如下页面
接下来直接点击 `组件` ，页面如下
2、Element 布局
Element 提供了两种布局方式，分别是：
● Layout 布局
● Container 布局容器▷ Layout 局部
通过基础的 24 分栏，迅速简便地创建布局。也就是默认将一行分为 24 栏，根据页面要求给每一列设置所占的栏数。
在左菜单栏找到 `Layout 布局` ，然后找到自己喜欢的按钮样式，点击 `显示代码` ，在下面就会展示出对应的代码，显示出的代码中有样式，有html标签。将样式拷贝我们自己页面的 `head` 标签内，将html标签拷贝到 `<div id="app"></div>` 标签内。
▷ 整体页面代码如下：
现在需要添加一行，要求该行显示8个格子，通过计算每个格子占 3 栏，具体的html 代码如下
▶ Container 布局容器
用于布局的容器组件，方便快速搭建页面的基本结构。如下图就是布局容器效果。
如下图是官网提供的 Container 布局容器实例：
该效果代码中包含了样式、页面标签、模型数据。将里面的样式 `<style>` 拷贝到我们自己页面的 `head` 标签中；将html标签拷贝到 `<div id="app"></div>` 标签中，再将数据模型拷贝到 `vue` 对象的 `data()` 中。
▷ 整体页面代码如下：
▶ 完成分页条展示
在 Element 官网找到 `Pagination 分页` ，在页面主体部分找到我们需要的效果，如下
转自：csdn
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
大家好，我是清风。今天给大家分享一个项目中遇到问题解决问题的案例，编程其实就是一个思考的过程，缺少思考就没有灵魂，遇到问题先静下心去思考，想到方法后再去实践。我们要学会灵活变通去解决问题，掌握方法，这样才能举一反三，临危不乱，遇到所有问题都能很好地去解决。
事情是这样的，做的一个答题小程序，要求在后台编辑题目，编辑题目是用的textarea文本域，即输入的是文本内容，配置之后小程序里查询显示后台配置的题目列表。
当然在测试时后台去配置文本内容，小程序显示是没有问题的。因为配置的题目是纯文本，小程序里也是直接在text里显示的，没有问题。
后台配置题目
小程序显示题目
问题往往只有在用的时候才会发现，用户或管理员的各种操作才能显现出各种问题。现在小程序里已经不能正常显示了，有些显示的是html格式富文本格式，有些不显示。显然和需求大相径庭，已经出现问题了。
如上图，在用的时候因为是从word文档里直接复制过去的题目（事先在word里整理好了题目，由于各部门工作对接，先是在word文档进行审核），直接复制会把富文本内容也携带过去，携带过去的当然也有style样式，小程序里不显示的原因是富文本的字体颜色是黑色字体，和小程序面背景都是黑色，导致看不到文字。打开控制台调试，问题确实是这么出现的。
word文档编辑的题目会出现不同的富文本的样式格式，这都会导致小程序的不正常显示。
富文本的文字颜色是黑色，这导致的小程序页里题目的不显示。
既然后台有可能出现富文本，我们直接把小程序题目的渲染方式换成富文本渲染，这样就算是纯文本也可以显示的。而第二个问题，由于小程序页面背景颜色是黑色，所以题目的字体颜色不能是黑色，我们做一个查找替换，把style样式里的字体样式替换掉就可以了。
样式可能是各种各样的，通过查找style样式里的字体样式考虑的匹配太多了，比如说color属性值可以是rgb形式，也可是rgba形式，也可能是#号颜色值形式，还有可能是英文形式颜色，所以不可取。我们换一种思路，直接把style属性替换掉，即查找到style，换成一个无效的属性名。案例中我们替换成了c，c是一个无效的属性，不会触发节点的查找和计算。
replace函数
我们用到replace函数，replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
参数
请注意，regexp/substr 是一个字符串，则将它作为要检索的直接量文本模式，而不是首先被转换为 RegExp对象，返回值是一个新的字符串，是用 replacement 替换了 regexp 的第一次匹配或所有匹配之后得到的。
replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
that.setData({
_list: res.data
})
let data = that.data._list
data.forEach((element, index) => {
var stemContent = '_list[' + index + '].stemContent'
that.setData({
[stemContent]: element.stemContent.replace(/style/g, 'c')
})
element.choiceTopicVos.forEach((item, i) => {
var listCheck = '_list[' + index + '].choiceTopicVos[' + i + '].optionDes';
that.setData({
[listCheck]: item.optionDes.replace(/style/g, 'c')
})
})
})
用到的replace函数，进行了字符串的查找替换，查找到style属性，把它替换到了无效的属性c，没有了样式属性，从而达到了去除内联样式的效果，经过调试，完美解决问题。
这是一个小问题，我为什么要拿出来说呢？抛去开发的测试流程不说，我认为它能引发一些思考。写代码的过程必须是一个思考的过程，怎么样更好地去实现效果，怎么样更简单有效地解决问题，怎么样优化，要去考虑一个大的方面。善于发现问题，解决问题，并不是说用了什么高级语言就鄙弃了思考，机器语言是相通的，开发中各种各样地应用才是魅力所在。编程是一门是艺术，最重要的是你怎样去巧妙地运用，就像解一道数学题，精绝巧妙的解法会让人眼前一亮，增色太多。同样都做出来了，但是你做的就显得十分优雅！
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
蓝蓝设计的小编 http://www.lanlanwork.com