从零开始的Vue学习

前言

  这个笔记参考了官方文档和多篇文章，虽然是自己一个字一个字手打的，但还是算是转载，并非原创。分享这个笔记的作用一是监督自己，二是希望帮助到和我一样在学习vue的小伙伴。同时，我自己照着教程写的程序源码也会在下面分享出来。虽说是Vue学习，其实也包含些别的前端东西。

​静心学习，无限进步！！！

​学习笔记含代码：

https://github.com/Xiaohufight/vue-learning

其他在做的Vue练手项目：

https://github.com/Xiaohufight/my-vue-template

https://github.com/Xiaohufight/my-admin-template

学习日志

2021-5-06

今天无聊翻看github，发现关注的一位大佬上传了自己的prettier配置文件，我就很好奇这个prettier是个啥东东。看了一些文章博客，了解到prettier是一个 Opinionated 的代码格式化工具，具体可以看这一篇文章Prettier看这一篇就行了。我之前自己写的代码是不用ESLint的，因为觉得坑太多了，不如不用。但是，今天也打算之后的项目还是要用用prettier和ESLint，团队开发，代码风格和规范要做好。

2021-4-28~29

因为毕设的事情，距离上次学习Vue已经过去十几天了，这俩天主要学习了如何实现侧边导航栏和面包屑，导航栏参考了Vue 实现左边导航栏且右边显示具体内容（element-ui），面包屑和标签切换参考了 作者"@雨点的名字"的 Vue + Element-ui实现后台管理系统(3)—面包屑 + Tag标签切换功能

顺便放一下他的github源码，创作不易，欢迎star

https://github.com/yudiandemingzi/mall-manage-system

2021-4-15

今天主要在本地运行了这个项目vue-admin-webapp(就前面正确姿势开发vue后台管理系统中最终实现的项目)，由于作者并没有提供接口，所以在本地运行项目时顺便学习了如何写接口（easy-mock)，掌握了一些写法，但我没有用过mock，如果是用过mock的话，上手easy-mock应该会很容易。不管怎么样，今天收获也是挺多的。

2021-4-13

还在看vue实现后台管理系统，学习了正确姿势开发vue后台管理系统，自己基础还是很薄弱的，没有看完；重点看了阮神的JSON Web Token入门教程，收获很多。关于之前的手摸手系列之后也要看看，但感觉还需要一些前置基础，就此搁置一下（才不是我又菜又懒呢）。

2021-4-7

学习了Vue的动态路由相关知识，看的这篇文章Vue动态菜单(路由)的实现方案，文章讲得比较好理解，也成功实现了，但离真正项目中的还有差距，太简单了。

2021-4-2

今天看了很多教程想要实现登录权限问题，都说很简单，但是我就是看不懂，后来看到一篇vue登录并保持登录状态，虽然和自己想要的功能还有差距，但是也算是学习到了，也了解了一些vuex。这种方法实现很简单，理解起来也不是很难。代码在vue-login里，主要遇到了两个坑:
1、main.js里router.beforeEach()和router.afterEach()要放在Vue对象前面；
2、store/index.js 里import vue 和 vuex 时 前后大小写要注意；

2021-4-1

看了教程的基础篇和登录权限篇，感觉不理解和不了解的东西还有很多（我怎么这么菜啊）;后来又看了阮一峰大神的flex布局语法篇，不难理解，关键在于熟练掌握使用。最后自己用vue+element写了一些页面，虽然简单，但是也算复习了一下。愚人节快乐啊！？

2021-3-31

看了 花裤衩大佬的开源项目vue-element-admin，佩服的五体投地，推荐去跑跑那个程序，顺便点个star，收藏以后可能用得到。
另外，大佬还更新一些教程，写得很好，在项目的README.md里有相关的链接。
我这里贴一下,估计后面的很多天里都会看这个了，注意：这教程是2017年的，如有问题请看源码

手摸手，带你用 vue 撸后台 系列一(基础篇)

手摸手，带你用 vue 撸后台 系列二(登录权限篇)

手摸手，带你用 vue 撸后台 系列三 (实战篇)

手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)

手摸手，带你用vue撸后台 系列五(v4.0新版本)

手摸手，带你封装一个 vue component

手摸手，带你优雅的使用 icon

手摸手，带你用合理的姿势使用 webpack4（上）

手摸手，带你用合理的姿势使用 webpack4（下）

2021-3-30

1、学习了BEM思想（CSS命名规范）

2、实现了第一个vue+element-ui的项目（虽然很简单）

2021-3-29

1、第一次用vue-cli初始化一个项目，并npm run dev运行成功

2、修改了一些配置，并看运行结果

3、认识一下项目的结构

2021-3-29前

1、大概看到了cn.vuejs.org教程《深入了解组件前》前

2、基本实现了cn.vuejs.org上的例子，在html里写的，共10个lesson.html

参考链接:

1、我们为什么要用Vue,它解决了什么问题,如何使用它

https://blog.csdn.net/wxl1555/article/details/79964818

2、Vue教程

https://cn.vuejs.org/

3、Vue教程–使用官方脚手架构建实例（上篇）

https://gitee.com/janking/Infinite-f2e/issues/IDQHW

4、初学vue+elementui搭建前台项目教程

https://blog.csdn.net/qq_42957424/article/details/107339993

5、BEM思想(命名规范)

https://blog.csdn.net/eunice_sytin/article/details/83341381

一些概念

1、什么是DOM

Document Object Model
文档对象模型

2、什么是Vue

一套构建用户界面的渐进式框架

自底向上 增量开发设计

响应式的数据绑定

3、单页应用程序(SPA)

一个页面就是应用,也可以是子应用,交互处理非常多,且页面中的内容根据用户的操作动态变化

开始入门

1、介绍

引入方式

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>

或者

<script src="https://cdn.jsdelivr.net/npm/vue">script>

Vue.js的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统

（1）声明式渲染

app1、app2

（2）条件与循环

app3、app4

提供一个强大的过渡效果系统

v-for 绑定数组的数据来渲染一个项目的列表

（3）处理用户输入

app5、app6

v-on 指令添加一个event listener

v-model 表单输入和应用状态之间的双向绑定

（4）组件化应用构建

在Vue里,一个组件的本质是一个拥有预定义选项的一个Vue实例

app7、app8

“prop” 类似于一个自定义attribute

v-bind 指令将待办项传到循环输出的每个组件中

虽然Vue内部没有使用自定义元素,不过在应用使用自定义元素、或以自定义元素形式发布时,依然有很好的互操作性。

2、Vue实例

（1）创建一个Vue的实例

Vue的设计受MVVM模型,在文档中经常使用vm这个变量名表示Vue实例

当创建一个Vue实例时,可以传入一个选项对象

一个Vue应用由一个new Vue创建的根Vue实例,以及可选的嵌套的、可复用的组件树组成

（2）数据与方法

当一个Vue实例被创建时,它将data对象中所有的property加入到Vue的响应式系统中,当这些property的值发生改变时,视图将会产生“响应”,即匹配更新为新的值

如果晚些时候需要一个property,但是一开始它为空或不存在,可以设置一些初始值

data:{
     
   newTodoText:'',
   visitCount:0,
   hideCompleteTodos:false,
   todos:[],
   error:null
}

使用Object.freeze(),阻止修改现有的property,这也意味着响应系统无法再追踪变化

除了数据property,Vue的实例还暴露了一些有用的实例property与方法,前缀为$,以便与用户定义的property区分开来

（3）实例生命周期钩子

Vue被创建时经历的初始化过程,设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等,同时在这个过程中也会运行一些叫做生命周期钩子的函数,让我们可以在不同阶段添加自己代码的机会

比如有created、mounted、updated、destroyed

其中生命周期钩子的this上下文指向调用它的Vue实例

注意:不要在选项property或者回调上使用箭头函数,因为箭头函数没有this

（4）生命周期示图

3、模板语法

Vue.js的模板都是合法的HTML,所以能被遵循规范的浏览器和HTML解析器解析

（1）插值

文本

数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本差值

<span>Message:{
    {msg}}span>

通过v-once指令,执行一次性地插值,当数据改变时,插值处的内容不会更新

<span v-once>这个将不会改变:{
    {msg}}span>

原始HTML

双大括号会将数据解释为普通文本,而非HTML代码,为了输出真正的HTML,需要使用v-html指令:

<p>Using mustaches:{
    {rawHtml}}p>
<p>Using v-html directive:<span v-html="rawHtml">span>p>

属性

Mustache语法不能作用在HTML attribute上,遇到这种情况应该使用v-bind指令

<div v-bind:id="dynamicId">div>

<button v-bind:disabled="isButtonDisabled">Buttonbutton>

使用Javascript表达式

Vue.js都提供了完全的JavaScript表达式支持

{
    {number+1}}
{
    {ok?'Yes':'No'}}
{
    {message.split('').reverse().join('')}}
<div v-bind:id="'list-'+id">div>

这些表达式会在所属Vue实例的数据作用域下作为JavaScript被解析,有个限制就是,每个绑定都只能包含单个表达式,所以下面的例子都不会生效

{
    {var a=1}}

{
    { if(ok){return message} }}

模板表达式都应放在沙盒中,只能访问全局变量的一个白名单,如Math和Date不应该在模板表达式中试图访问用户定义的全局变量

（2）指令

指令是带有v-前缀的特殊attribute,指令attribute的值预期是单个JavaScript表达式(v-for是例外情况)

指令的职责是,当表达式的值改变时,将对其产生的连带影响,响应式地作用域DOM

v-if指令将根据表达式中值的真假来插入/移除元素

参数

一些指令能够接受一个"参数",在指令名称之后以冒号表示

v-bind 响应式地更新HTML attribute
v-on 用于监听DOMevent

动态参数

<a v-bind:[attributeName]="url">...a>

<a v-on:[eventName]="doSomething">...a>

对动态参数的值的约束

动态参数预期会求出一个字符串,异常情况下为null,这个特殊的null值可以被显性地用于移除绑定，任何其他非字符串类型的值都会触发一个警告

对动态参数表达式的约束

动态参数表达式有一些语法约束,因为某些字符,空格和引号,放在HTML attribute名里是无效的

<a v-bind:['foo'+bar]="value">...a>

在DOM中使用模板时，还需要避免使用大写字母来命名键名,浏览器会会强制把attribute名全部改为小写

修饰符

修饰符是以半角句号.指明的特殊后缀,用于指出一个指令应该以特殊方式绑定

例如.prevent修饰符告诉v-on指令对于触发的event调用event.preventDefault()

<form v-on:sumbit.prevent="obSubmit">...form>

（3）缩写

v-前缀作为一种视觉提示,用来识别模板中Vue特定的attribute。当在使用Vue.js现有标签添加动态行为时,v-前缀很有帮助

对于经常使用的指令比较繁琐,同时在构建Vue管理所有模板的SPA,v-前缀也没有那么重要了

v-bind 缩写

<a v-bind:href="url">...a>


<a :href="url">...a>


<a :[key]="url">...a>

v-on 缩写

<a v-on:click="doSomething">...a>


<a @click="doSomething">...a>


<a @[event]="doSomethind">...a>

4、计算属性和侦听器

（1）计算属性

模板内的表达式非常便利,但是放入太多的逻辑会让模板过重且难以维护

例如

<div id="example">
    {
    {message.split('').reverse().join('')}}
div>

计算属性缓存vs方法

我们可以在表达式中调用方法来达到同样的效果,与前面的区别是,这里是定义了一个方法,而不是一个属性

计算属性是基于它们的响应式依赖进行缓存的,只要message还没有改变,就不需要再次执行函数

计算属性vs侦听属性

Vue提供了一种更通用的方式来观察和响应Vue实例上的数据变动:侦听属性

计算属性的setter

计算属性默认只有getter,但是现在也可以提供一个setter

（2）侦听器

自定义的侦听器,在数据变化时执行异步或者开销较大的操作时,最有效

5、Class与Style绑定

（1）绑定HTML Class

对象语法

可以传给v-bind:class一个对象,以动态地切换class:

<div v-bind:class="{active:isActive}">div>

上面的语法表示active这个class存在与否取决于数据propertyisActive的truthiness

可以在对象中传入更多字段来动态切换多个class,此外v-bind:class指令也可以与普通的class attribute共存

绑定的数据对象不一定内联定义在模板中

可以绑定一个返回对象的计算属性

数组语法

把一个数组传给v-bind:class,以应用一个class列表

用在组件上

当在一个自定义组件上使用classproperty时,这些class将被添加到该组件的根元素上面,这个元素上已经存在的class不会被覆盖

（2）绑定内联样式

对象语法

v-bind:style的语法十分直观,看着像CSS,但实际上是一个JavaScript对象

命名可以用驼峰式或者短横线分隔

div>"

data:{
     
    activeColor:'red',
    fontSize:30
}!

直接绑定到一个样式对象通常更好,这会让模板更清晰,同样可以结合返回对象的计算属性

数组语法

v-bind:style的数组语法可以把多个样式对象应用到同一个元素上

<div v-bind:style="[baseStyles,overridingStyles]">div>

自动添加前缀

当v-bind:style使用需要添加的浏览器引擎前缀的CSS property时,如transform,Vue.js会自动侦测并添加相应的前缀

多重值

从2.3.0起,可以为style绑定中的property提供一个包含多个值的数组,常用于提供多个带前缀的值

<div :style="{
        display:['-webkit-box','-ms-flexbox','flex']}">div>

这样写只会渲染数组中最后一个被浏览器支持的值,在本例中,如果浏览器支持不带浏览器前缀的flexbox,那么就只会渲染display:flex

6、条件渲染

（1）v-if

v-if指令用于条件性地渲染一块内容，这块内容只会在指令的表达式返回truthy值的时候被渲染，也可以通过v-else添加一个“else块”

在