Vue CLI相关
Vue CLI基本介绍
如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI。
如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI。
使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。
CLI是什么意思?
CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架。
Vue CLI是一个官方发布 vue.js 项目脚手架。
使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置。
安装脚手架
使用前提:安装Node和Webpack
关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。如果卸载不 ...
Webpack详解
认识Webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则打包生成对应的静态资源。
概念解释模块化:https://nanzx.top/posts/e220/
在ES6之前,我们要想进行模块化开发,就必须借助于其他的工具让我们可以进行模块化开发。并且在通过模块化开发完成了项目后,还需要处理模块间的各种依赖,将其进行整合打包。
而webpack其中一个核心就是让我们可以进行模块化开发,并且会帮助我们处理模块间的依赖关系。而且不仅仅是JavaScript文件,我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用,这就是webpack中模块化的概念。
打包:
就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。并且在打包的过程中,还可以对资源进行处理,比如压缩图片,将scss转成css,将ES6语法转成ES5语法,将TypeScript转成JavaScript等等操作。
和grunt/gulp的对比grunt/gulp的核心是Task:
...
Vue的模块化开发
为什么需要模块化JavaScript原始功能
在网页开发的早期,js制作作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的。
那个时候的代码是怎么写的呢?直接将代码写在<script>标签中即可
随着ajax异步请求的出现,慢慢形成了前后端的分离。客户端需要完成的事情越来越多,代码量也是与日俱增。
为了应对代码量的剧增,我们通常会将代码组织在多个js文件中,进行维护。
但是这种维护方式,依然不能避免一些灾难性的问题。比如全局变量同名问题:
小明后来发现代码不能正常运行,去检查自己的变量,发现确实true,最后杯具发生了,小明加班到2点还是没有找到问题出在哪里。
另外,这种代码的编写方式对js文件的依赖顺序几乎是强制性的。
但是当js文件过多,比如有几十个的时候,弄清楚它们的顺序是一件比较痛苦的事情。
而且即使你弄清楚顺序了,也不能避免上面出现的这种尴尬问题的发生。
匿名函数的解决方案我们可以使用匿名函数来解决命名方面的重名问题。
在aaa.js文件中,我们使用匿名函数:
但是如果我们希望在main.js文件中,用到fl ...
Vue的组件化开发
认识组件化什么是组件化
人面对复杂问题的处理方式:
任何一个人处理信息的逻辑能力都是有限的,所以当面对一个非常复杂的问题时,我们不太可能一次性搞定它。但是我们人有一种天生的能力,就是将问题进行拆解。
如果将一个复杂的问题拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现大的问题也会迎刃而解。类似分治算法。
组件化也是类似的思想:
如果我们将一个页面中所有的处理逻辑全部放在一起,处理起来就会变得非常复杂,而且不利于后续的管理以及扩展。
但如果我们将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得非常容易了。
Vue组件化思想组件化是Vue.js中的重要思想。它提供了一种抽象,让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
任何的应用都会被抽象成一颗组件树。
组件化思想的应用:
有了组件化的思想,我们在之后的开发中就要充分的利用它。
尽可能的将页面拆分成一个个小的、可复用的组件。
这样让我们的代码更加方便组织和管理,并且扩展性也更强。
组件化的实现基本步骤组件的使用分成三个步骤:
创建组件构造 ...
Vue基础语法
插值操作MustacheMustache语法(也就是双大括号)。Mustache 标签将会被替代为对应数据对象上的值。
无论何时,绑定的数据对象上值发生了改变,插值处的内容都会更新,数据是响应式的。
Mustache: 胡子/胡须
1234567891011121314151617181920<div id="app"> <h2>{{message}}</h2> <h2>{{message}},阿楠</h2> <h2>{{firstName + lastName}}</h2> <h2>{{firstName + ' ' + lastName}}</h2> <h2>{{firstName}} & ...
邂逅Vue
参考视频:最全最新Vue、Vuejs教程,从入门到精通 https://www.bilibili.com/video/BV15741177Eh?p=1
什么是Vue.jsVue.js(/vjuː/,或简称为Vue)是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架,是一个渐进式和响应式的框架。
Vue有很多特点和Web开发中常见的高级功能
解耦视图和数据
可复用的组件
前端路由技术
状态管理
虚拟DOM
【Vue中文官网,观看WHY VUE.JS?】:https://cn.vuejs.org/
Vue.js安装
方式一:直接CDN引入你可以选择引入开发环境版本还是生产环境版本
1234<!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 生产环境版本,优化了尺寸和速度 --><script s ...
Git
参考视频:【尚硅谷】Git与GitHub基础全套完整版教程 https://www.bilibili.com/video/BV1pW411A7a5
版本控制版本控制 :工程设计领域中使用版本控制管理工程蓝图的设计过程。在 IT 开发过程中也可以使用版本控制思想管理代码的版本迭代。
版本控制工具应该具备的功能:
协同修改:多人并行不悖的修改服务器端的同一个文件。
数据备份:不仅保存目录和文件的当前状态,还能够保存每一个提交过的历史状态。
版本管理:在保存每一个版本的文件信息的时候要做到不保存重复数据,以节约存储空间,提高运行效率。这方面 SVN 采用的是增量式管理的方式,而 Git 采取了文件系统快照的方式。
权限控制:对团队中参与开发的人员进行权限控制。 对团队外开发者贡献的代码进行审核(Git 独有)。
历史记录:查看修改人、修改时间、修改内容、日志信息。 将本地文件恢复到某一个历史状态。
分支管理:允许开发团队在工作过程中多条生产线同时推进任务,进一步提高效率。
版本控制工具
集中式版本控制工具: CVS、SVN、VSS……
分布式版本控制 ...
Cookie和Session
会话跟踪是Web程序中常用的技术,用来跟踪用户的整个会话。常用的会话跟踪技术是Cookie与Session。Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端记录信息确定用户身份。
Cookie什么是Cookie由于HTTP是一种无状态的协议,服务器单从网络连接上无从知道客户身份。怎么办呢?就给客户端们颁发一个通行证吧,每人一个,无论谁访问都必须携带自己通行证。这样服务器就能从通行证上确认客户身份了。这就是Cookie的工作原理。
Cookie实际上是一小段的文本信息。客户端请求服务器,如果服务器需要记录该用户状态,就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时,浏览器把请求连同该Cookie一同提交给服务器。服务器检查该Cookie,以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。
在Session出现之前,基本上所有的网站都采用Cookie来跟踪会话。
Cookie具有不可跨域名性。例如贴吧不能访问微博的Cookie。
由于浏览器每次请求服务器都会携带Cookie,因此 ...
爬取美桌网cosplay图片
开发环境:
①Python3.8.5
②Pycharm-community-2020.2
③GoogleChrome 84.0.4147.135
④XPath Helper 2.0.2
目标网址:【美桌网cosplay图片大全】http://www.win4000.com/meinvtag26_1.html
可以看到这个cosplay大全一共有5页,我们需要将每页的每个相册里的所有图片都爬取下来。
整个爬取过程可以分为如下四步:1.分析网页性质2.发送网络请求3.解析数据(筛选数据)4.将数据保存至本地。
实验过程:
打开目标网址后,我们发现url地址栏中下划线后面的数字表示这是该cosplay大全的第几页。
在浏览器中选中相册右键选择检查,可以看到该模块对应的前端代码,我们的目标就是获取黄色方框的url地址,也就是每个相册所在的网页地址。于是我们可以使用XPath插件通过标签去一步步定位,可以看到results结果集里有24条数据,刚好对应每页24个相册。
对应的xpath为:
//div[@class=”list_cont Left ...