前端框架Vue自学之Vue router小案例TabBar（七）
内容：TabBar设计与实现(基于Vue-router)
正文：
TabBar零、前言（源码） 可以结合源码来看，最后自己实现。源码在我的GitHub上：TabBar源码（Vue-router小案例）。
一、tabbar的基本结构的搭建 1、需求
tabbar就是类似下图的东西。可以让我们传入一些组件，图片，文字等。当我们点击“首页”，显示首页的相关东西；当我们点击‘分类’，显示分类的相关东西等。其实，这就是相当于把项目的结构搭建好了，之后我们做的项目中，就是往每个不同的选项构建对应的组件。
2、实现思路（后续，就按照这个思路去一步步实现）
首先，如果在下方有一个单独的TabBar组件，你如何封装？自定义TabBar组件，在App中使用；让TabBar处于底部，并且设置相关的样式。
接着，TabBar中显示的内容由外界决定：定义插槽；flex布局平分TabBar。
接着，自定义TabBarItem，可以传入图片和文字：定义TabBarItem，并且定义两个插槽：图片和文字；给两个插槽外层包装div，用于设置样式；填充插槽，实现底部TabBar的效果。 ...
前端框架Vue自学之Vue router（六）
终极目标：掌握和使用Vue（全家桶：Core+Vue-router+Vuex）
本博客目的：记录Vue学习的进度和心得（Vue router）
内容：学习和使用Vue router。
正文：
Vue router一、认识路由 1、路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动。
2、路由器提供了两种机制：路由和转送。路由是决定数据包从来源到目的地的路径。转送将输入端的数据转移到合适的输出端。
3、路由中有一个非常重要的概念叫路由表。路由表本质上就是一个映射表，决定了数据包的指向。
二、前端渲染后端渲染和前端路由后端路由 1、后端渲染和后端路由
以前的网页开发整个HTML页面是由服务器来渲染的，即后端渲染，通过使用JSP（Java server page）/PHP/ASP语言开发的。以JSP为例，当我们在浏览器输入一个网址（url）时，把浏览器会发这个网址（url）给服务器，服务器首先会解析这个网页，在后台就会通过JSP技术（Controller）把网页写好，这个网页包含HTML和CSS和一些Java代码，Java代码的 ...
前端框架Vue自学之Vue CLI（五）
终极目标：掌握和使用Vue（全家桶：Core+Vue-router+Vuex）
本博客目的：记录Vue学习的进度和心得（Vue CLI）
内容：学习和使用Vue CLI2 和 Vue CLI3。如果了解webpack如何一步步配置的，建议可以先看我的前一个博客：前端框架Vue自学之webpack（四）。
正文：
Vue CLI一、Vue CLI 1、前言
前面（上一个博客）中，学习webpack的相关知识，知道webpack的一些配置，最后知道如何把生产配置和开发配置进行分离。
如果只是写几个vue的demo，则是不需要vue CLI的。在实际开发（大型项目）中，我们一般不会重头到尾写webpack的配置，我们会通过一个工具，叫脚手架，自动生成我们weback的配置，提升我们的工作效率。
CLI（command-line interface，命令行界面，俗称脚手架（软件工程学引用这个建筑学概念）），其含义很简单。举个例子，当我们要写一个项目1，用了ES6的JavaScript，LESS的CSS扩展语音，后端使用node。我们每次写完一个功能，都需要把ES6转为ES5， ...
配置ES6的JavaScript运行环境-Visual Studio Code
内容：在Visual Studio Code下，配置ES6的JS运行开发环境（通过babel把ES6转码为ES5语法的代码）和VS相关插件。（之前都用sublimeText3，好像现在主流都是用VS的比较多）
前排提示：如果只是学习，单纯调试使用ES6的JS代码，安装Visual Studio Code和Node.js（正文的第一步和第二步），然后就可以在Debug下执行Run with Node.js就可以在debug控制台观看ES6的JS代码执行的结果了。如果查看HTML代码的效果，可以只看正文的第七步的第3，4点。不过还是建议观看全文，从开发角度，构建一个工程。
正文：
一、下载和安装Visual Studio Code 在官网下载Visual Studio Code：Visual Studio Code
安装完的VS界面如图所示：
二、下载和安装Node.js 在官网下载Node.js：Node.js（在生产环境，建议使用LTS，比较稳定，bug相对比较少。）如果下载成功，可以的win的cmd命令下用node -v查看自己的node版本，例如我这次下的是12. ...
前端框架Vue自学之webpack（四）
终极目标：掌握和使用Vue（全家桶：Core+Vue-router+Vuex）
本博客目的：记录Vue学习的进度和心得（webpack）
内容：学习和使用webpack。为学习Vue CLI做准备。
正文：
webpack一、webpack 1、认识webpack
本质上来说，webpack是一个现代的JavaScript应用的静态模块打包工具。模块和打包。
前端的模块化：之前在我的博客也提到，目前一些模块规范有：AMD,CMD,CommonJS,ES6的module。在ES6之前，我们想要进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发，并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。而webpack其中一个核心就是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系。而且不仅仅是JavaScript文件，我们的CSS、图片、json文件等等再webpack中都可以被当做模块来使用。这就是webpack中模块化的概念。
打包：将webpack中的各种资源模块进行打包合成一个或者多个包（Bundle），并且在 ...
前端框架Vue自学之前端模块化（补充）
目标：了解一下前端模块化的知识
内容：用于记录一些心得。（前端模块化）
正文：一、JavaScript原始功能 在网页开发的早期，JS作为一种脚本语言，做一些简单的表单验证或者动画实现，那个时候代码还是很少的，一般是直接写在< script>标签中。
二、存在问题 随着AJAX异步请求的出现，慢慢形成了前后端的分离。客户端需要完成的事情越来越多，代码量也是与日俱增。为了应对代码量的剧增，我们通常会将代码组织在多个JS文件中，进行维护。但是这种维护方式，依然不能避免一些灾难性的问题。比如说全局变量同名问题（因为一个大的项目是多人完成的，需要导入每个人写的代码汇总）；另外，这种代码的编写方式对JS文件的依赖顺序几乎是强制性的，也无法避免全局变量同名问题。
三、模块化雏形（早期的模块化） 之前解决上述的问题的方法有匿名函数，类似于(function () {} )()的格式。但是代码的复用性又不得不降低了，甚至不可复用。所以在ES5中可以通过把需要可复用的代码添加到一个对象，通过匿名函数的返回这个对象（使用模块作为出口，暴露到外面的属性和方法，不需要暴露的直接定义），并 ...
前端框架Vue自学之Vue组件化开发（三）
终极目标：掌握和使用Vue（全家桶：Core+Vue-router+Vuex）
本博客目的：记录Vue学习的进度和心得（Vue组件化开发）
内容：通过官网说明，掌握Vue组件化开发。
正文：Vue组件化开发
一、认识组件化 1、什么是组件化？
任何一个人处理信息的逻辑能力都是有限的，所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。但是，我们人有一种天生的能力，就是将问题进行拆解，如果讲一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。
组件化也是类似思想：如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。
2、Vue组件化思想
组件化是Vue.js中的重要思想。它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用，任何的应用都会被抽象成一颗组件树。
3、组件化思想的应用
有了组件化的思 ...
前端框架Vue自学之ES6基本语法（补充）
本博客目的：记录Vue学习的进度和心得（ES6基本语法）
内容：掌握Vue中常用的ES6基础语法。
正文：
ES6基本语法一、let与var（闭包，块级作用域） 1、事实上var的设计可以看成JavaScript语言设计上的错误，但是这种错误多半不能修复和移除，因为需要向后兼容。例如if/for的块级的影响（ES5中if、for没有作用域，只有函数有作用域），因而JS作者引入了let，我们可以将let看成更完美的var（let有块级作用域（作用域：在一定范围内是可用的），var通常是定义全局变量的）。
2、先前for的块级影响，通常的解决方法是使用闭包（因为函数有自己的作用域，应用外面的变量，能正确解决传参的问题）。（闭包是指有权访问另一个函数作用域中的变量的函数，或者说，函数对象可以通过作用域关联起来，函数体内的变量都可以保存在函数作用域内，这在计算机科学文献中称为“闭包”,所有的javascirpt函数都是闭包）
3、ES6中let具有块级作用域。ES5中var是没有块级作用域的。
二、const 1、在JavaScript中，使用const修饰的标识符为 ...
前端框架Vue自学之Vue基础语法（二）
终极目标：掌握和使用Vue（全家桶：Core+Vue-router+Vuex）
本博客目的：记录Vue学习的进度和心得（Vue基础语法）
内容：通过官网说明，掌握Vue基础语法。
正文:Vue基础语法
一、插值语法 1、Mustache，即双大括号{{}} 。 括号里面可以是变量，也可以是简单的表达式。（tips:复杂的表达式不再适合，我们可以考虑使用计算属性，后面会说）（Mustache：胡子）
2、v-once。通过使用 v-once 指令，也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
3、v-html。原始HTML：双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，需要使用v-html指令。注意：站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击（Cross Site Scripting，攻击全称跨站脚本攻击）。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。
4、v-text。与Mustache类似，接受一个string类型。但灵活性不够Mustache，尤其是字符串拼 ...
前端框架Vue自学之初见Vue（一）
终极目标：掌握和使用Vue（全家桶：Core+Vue-router+Vuex）
本博客目的：记录Vue学习的进度和心得（初见Vue）
内容：通过官网一些小实例，初步对Vue有所理解。
正文：
初见Vue一、Vue.js安装（分为开发环境版本和生产环境版本） 1、直接CDN引入（在script标签的src引入完整源文件地址）
2、官网下载和引入
3、NPM安装（后续通过webpack和CLI的使用，就用该方式）
二、helloVue事例 1、尽量以ES6标准去写，定义变量用let，而不是var，定义常量用const。
2、之前原生JS的做法是一步一步做（编程范式：命令式编程），现在的vue的做法是外部声明内部（Vue实例）管理（编程范式：声明式编程）。后者在三大框架都很流行。优点：数据与界面完全分离，响应式（数据变了，界面响应改变对应部分）。
3、创建的Vue对象，传入了一些options：{}，包括el属性：决定这个Vue对象挂载到哪一个元素上；data属性：通常会存储一些数据，其可以是我们直接定义的，也可以是来自网络，从服务器加载的。
三、Vue列表的展示 ...