Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)

最新推荐文章于 2023-10-02 21:07:41 发布

迷雾总会解

最新推荐文章于 2023-10-02 21:07:41 发布

阅读量1.7k

点赞数

分类专栏： JS框架(Vue) 前端文章标签： vue

本文链接：https://blog.csdn.net/qq_44766883/article/details/107460796

版权

JS框架(Vue) 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

前端发展和架构

先聊一下前端开发模式的发展。

静态页面

最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务端到客户端单向流通。开发人员也只关心页面的样式和内容即可。

异步刷新，操作DOM

1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言.

随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。

ajax盛行：

2005年开始，ajax逐渐被前端开发人员所重视，因为不用刷新页面就可以更新页面的数据和渲染效果。
此时的开发人员不仅仅要编写HTML样式，还要懂ajax与后端交互，然后通过JS操作Dom元素来实现页面动态效果。比较流行的框架如Jquery就是典型代表。

MVVM，关注模型和视图

2008年，google的Chrome发布，随后就以极快的速度占领市场，超过IE成为浏览器市场的主导者。

2009年，Ryan Dahl在谷歌的Chrome V8引擎基础上，打造了基于事件循环的异步IO框架：Node.js。

基于事件循环的异步IO
单线程运行，避免多线程的变量同步问题
JS可以编写后台代码，前后台统一编程语言

node.js的伟大之处不在于让JS迈向了后端开发，而是构建了一个庞大的生态系统。

2010年，NPM作为node.js的包管理系统首次发布，开发人员可以遵循Common.js规范来编写Node.js模块，然后发布到NPM上供其他开发人员使用。目前已经是世界最大的包模块管理系统。

随后，在node的基础上，涌现出了一大批的前端框架：

三种架构的介绍

MVVM模式

M：即Model，模型，包括数据和一些基本操作
V：即View，视图，页面渲染结果
VM：即View-Model，模型与视图间的双向操作（无需开发人员干涉）

在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。

而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：

只要我们Model发生了改变，View上自然就会表现出来。
当用户修改了View，Model中的数据也会跟着改变。

把开发人员从繁琐的DOM操作中解放出来，把关注点放在如何操作Model上。

而我们今天要学习的，就是一款MVVM模式的框架：Vue

认识Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

前端框架三巨头：Vue.js、React.js、AngularJS，vue.js以其轻量易用著称，vue.js和React.js发展速度最快，AngularJS还是老大。C

官网：https://cn.vuejs.org/

参考：https://cn.vuejs.org/v2/guide/

Git地址：https://github.com/vuejs

尤雨溪，Vue.js 创作者，Vue Technology创始人，致力于Vue的研究开发。

Node和NPM

NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具。

NPM的简单使用

安装

去node.js官网下载node.js然后一路下一步安装
安装完毕后打开cmd窗口输入npm -v ，出现版本号即为安装成功

为什么要使用

很久很久以前我们都是把js文件从网上下载解压然后cpoy到项目中
然后有了cdn我们就直接从网上一个一个找jquery，bootstrap，layui，mui，xxx等jscdn链接copy到文件中
现在我们只需要进入项目存放js的目录执行一些npm的命令即可管理依赖感觉就像是后端的maven吧，好吧其实我也是没办法啊，现在Github上全是提供npm的安装方式 😂

简单的增删改

安装

使用命令行进入需要存放js的目录，执行npm -init -y进行初始化-y是省的问一大堆的问题
命令执行完毕后就会在文件夹下生成package.json文件，这个文件和maven的pom文件类似，这里记录着下载过的依赖
使用 npm i 名称 安装就会把所有的依赖文件拉下来注意：是i不是-i
安装指定版本的模块npm i 名称@版本号
然后就可以在页面把下载下来的js文件引入
下载的所有js模块都会存放在node_modules下,并在package.json文件中记录,如果不小心删除了node_modules只需要执行npm i命令就会根据package.json中的记录把所有文件都拉下来

卸载

卸载只需要执行npm uninstall 名称就可以卸载,并且会把package.json中的记录删除掉

更新

更新只需要执行npm update名称就可以更新,并且会把package.json中的版本号更新

命令	作用
npm -init -y	初始化项目，-y可以省掉一些询问
npm install 名称 -g/–save	下载依赖，-g是全局安装，–save是本地安装
npm uninstall 名称	卸载依赖,并且会把`package.json`中的记录删除掉
npm undate 名称	更新依赖,并且会把`package.json`中的版本号更新

修改镜像

npm默认的仓库地址是在国外网站，速度较慢，建议大家设置到淘宝镜像。但是切换镜像是比较麻烦的。推荐一款切换镜像的工具：nrm

我们首先安装nrm，这里-g代表全局安装。可能需要一点儿时间

npm install nrm -g

安装成功后通过nrm ls命令查看npm的仓库列表,带*的就是当前选中的镜像仓库：

可以通过nrm test 名称来测试镜像源的速度，直接nrm test是测试所有的

通过nrm use 名称来指定要使用的镜像源：

安装Vue

这里我们使用npm的方式

创建一个空文件夹vue-learning，然后打开命令行进入该文件夹
使用 npm init -y 进行初始化
安装Vue，输入命令：npm install vue

注意，如果要安装的模块如果和当前文件夹名称一样会报错，比如vue-learning改名为vue，在执行npm install vue时就会报错

然后就会在hello-vue目录发现一个node_modules目录，并且在下面有一个vue目录。

node_modules是通过npm安装的所有模块的默认位置。

浏览器Vue插件的安装

获取Chrome扩展程序 (需要科学上网，不信你百度Google Helper)
获取Firefox插件

Vue声明式渲染

<body>
<!--vue对象的html模板-->
<div id="app">
    <!--花括号，js表达式-->
    <h1>大家好，我是{{name}}</h1>
    <h1>你好{{1+1}}</h1>
</div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //初始化一个vue实例
    const app=new Vue({
        el: "#app", //element的缩写,选择器
        data: { //数据模型
            name: "刘德华"
        }
    });
</script>

首先通过 new Vue()来创建Vue实例
然后构造函数接收一个对象，对象中有一些属性：
- el：是element的缩写，通过id选中要渲染的页面元素，本例中是一个div
- data：数据，数据是一个对象，里面有很多属性，都可以渲染到视图中
  - name：这里我们指定了一个name属性
页面中的h2元素中，我们通过{{name}}的方式，来渲染刚刚定义的name属性。

打开页面查看效果：

双向绑定

我们对刚才的案例进行简单修改：

<body>
<!--vue对象的html模板-->
<div id="app">
    <!--双向绑定，v-model：数据模型-->
    <input type="text" v-model="num"/>
    <!--花括号，js表达式-->
    <h1>大家好，我是{{name}},有{{num}}为妹子迷恋我</h1>
    <h1>你好{{1+1}}</h1>
</div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //初始化一个vue实例
    const app=new Vue({
        el: "#app", //element的缩写,选择器
        data: { //数据模型
            name: "刘德华",
            num: 100
        }
    });
</script>

我们在data添加了新的属性：num
在页面中有一个input元素，通过v-model与num进行绑定。
同时通过{{num}}在页面输出

我们可以观察到，输入框的变化引起了data中的num的变化，同时页面输出也跟着变化。

input与num绑定，input的value值变化，影响到了data中的num值
页面{{num}}与数据num绑定，因此num值变化，引起了页面效果变化。

没有任何dom操作，这就是双向绑定的魅力。

注意，这个input要放在#app里面

事件处理

我们在页面添加一个按钮，做到点击按钮时候让num自增1

<body>
<!--vue对象的html模板-->
<div id="app">
    <!--双向绑定，v-model：数据模型-->
    <input type="text" v-model="num"/>
    <!--定义一个事件,v-on:事件名=js表达式-->
    <input type="button" value="点我加妹子"  v-on:click="incr" /> <!--v-on:click="num++"-->
    <!--花括号，js表达式-->
    <h1>大家好，我是{{name}},有{{num}}为妹子迷恋我</h1>
    <h1>你好{{1+1}}</h1>
</div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //初始化一个vue实例
    const app=new Vue({
        el: "#app", //element的缩写,选择器
        data: { //数据模型
            name: "刘德华",
            num: 100
        },
        methods: {
            incr(){
                this.num++
            }
        }
    });
</script>

Vue实例

创建Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

在构造函数中传入一个对象，并且在对象中声明各种Vue需要的数据和方法，包括：

el
data
methods

等等

接下来我们一一介绍。

模板和元素

每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。

我们可以通过el属性来指定。

例如一段html模板：

<div id="app">

</div>

然后创建Vue实例，关联这个div

var vm = new Vue({
    el:"#app"
})

这样，Vue就可以基于id为app的div元素作为模板进行渲染了。在这个div范围以外的部分是无法使用vue特性的。

数据

当Vue实例被创建时，它会尝试获取在data中定义的所有属性，用于视图的渲染，并且监视data中的属性变化，当data发生改变，所有相关的视图都将重新渲染，这就是“响应式“系统。

html：

<div id="app">
    <input type="text" v-model="name"/>
</div>

js:

var vm = new Vue({
    el:"#app",
    data:{
        name:"刘德华"
    }
})

name的变化会影响到input的值
input中输入的值，也会导致vm中的name发生改变

方法和this

Vue实例中除了可以定义data属性，也可以定义方法，并且在Vue实例的作用范围内使用。

html：

<!--vue对象的html模板-->
<div id="app">
    <!--双向绑定，v-model：数据模型-->
    <input type="text" v-model="num" />
    <!--定义一个事件,v-on:事件名=js表达式-->
    <input type="button" value="点我加妹子"  v-on:click="incr" /> <!--v-on:click="num++"-->
    <!--花括号，js表达式-->
    <h1>大家好，我是{{name}},有{{num}}为妹子迷恋我</h1>
    <h1>你好{{1+1}}</h1>
</div>

js：

//初始化一个vue实例
    const app=new Vue({
        el: "#app", //element的缩写,选择器
        data: { //数据模型
            name: "刘德华",
            num: 100
        },
        methods: {
            incr(){
                this.num++
            }
        }
    });

this:

生命周期钩子

生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程：创建实例，装载模板，渲染模板等等。Vue为生命周期中的每个状态都设置了钩子函数（监听函数）。每当Vue实例处于不同的生命周期时，对应的函数就会被触发调用。

生命周期：

钩子函数

beforeCreated：我们在用Vue时都要进行实例化，因此，该函数就是在Vue实例化时调用，也可以将他理解为初始化函数比较方便一点，在Vue1.0时，这个函数的名字就是init。
created：在创建实例之后进行调用。
beforeMount：页面加载完成，没有渲染。如：此时页面还是{{name}}
mounted：我们可以将他理解为原生js中的window.οnlοad=function({.,.}),或许大家也在用jquery，所以也可以理解为jquery中的$(document).ready(function(){….})，他的功能就是：在dom文档渲染完毕之后将要执行的函数，该函数在Vue1.0版本中名字为compiled。此时页面中的{{name}}已被渲染成刘德华
beforeUpdate：组件更新之前。
updated：组件更新之后。
beforeDestroy：该函数将在销毁实例前进行调用。
destroyed：改函数将在销毁实例时进行调用。

例如：created代表在vue实例创建后；

我们可以在Vue中定义一个created函数，代表这个时期的钩子函数：

  const app=new Vue({
        el: "#app", //element的缩写,选择器
        created() {
            this.num=520
        },
        data: { //数据模型
            name: "刘德华",
            num: 100
        },
        methods: {
            incr(){
                console.log(this);
                this.num++
            }
        }
    });

刷新页面就是520，data中定义的1就会被覆盖

数组操作

push(): 在末尾添加
pop()：在末尾删除
shift()：在开头删除
unshift()：在开头添加
splice() :可用于删除，替换，新增
sort()：排序
reverse()：反转

响应式注意点

如果在对象中没有定义并且初始化值的key普通操作是不能做到响应式的。

指令

什么是指令？

指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的预期值是：单个 JavaScript 表达式。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

例如我们在入门案例中的v-on，代表绑定事件。

插值表达式

花括号

{{表达式}}

说明：

该表达式支持JS语法，可以调用js内置函数（必须有返回值）
表达式必须有返回结果。例如 1 + 1，没有结果的表达式不允许使用，如：{{var a = 1 + 1}};
可以直接获取Vue实例中定义的数据或函数

<body>
<!--vue对象的html模板-->
<div id="app">
    <!--省略其他-->
    <h1>有{{sum()}}个人</h1>
</div>

</body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    //初始化一个vue实例
    const app=new Vue({
        el: "#app", //element的缩写,选择器
        created() {
            this.num=520
        },
        data: { //数据模型
            name: "刘德华",
            num: 100
        },
        methods: {
            incr(){
                console.log(this);
                this.num++
            },
            sum(){
                return this.num+100;
            }
        }
    });
</script>

插值闪烁现象

使用{{}}方式在网速较慢时会出现问题。在数据未加载完成时，页面会显示出原始的{{}}，加载完毕后才显示正确数据，我们称为插值闪烁。

我们将网速调慢一些，然后试试看刚才的案例：

v-text和v-html

使用v-text和v-html指令来替代{{}}

说明：

v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染

html:

<h1>插值表达式</h1>
<ul>
    <li v-text="name">张学友</li>
    <span v-text="num">人数</span>
    <li v-html="cname">学友哥</li>
</ul>

js:

data: { //数据模型
    name: "刘德华",
    num: 100,
    cname: "<span style='color: red'>华哥</span>"
},

刷新页面，效果如下，并且不会出现插值闪烁，当没有数据时，会显示空白。

v-pre

<div id="app">
    <p>{{message}}</p>
<!--我想要显示{{message}}-->
    <p v-pre>{{message}}</p>

</div>

v-cloak

css:

<style>
    [v-cloak] {
        display: none;
    }
</style>

html:

<!-- 网络延迟可能会显示{{message}}-->
<p>{{message}}</p>

<!--两种解决方案-->

<!-- 1.使用v-clock在加载之前使用一个样式来替换-->
<p v-cloak>{{message}}</p>
<!-- 2. 使用v-text，在加载之前使用'信息'来替换-->
<p v-text="message">信息</p>
</div>

setTimeout(()=>{
    const app=new Vue({
        el: "#app",
        data: {
            message: "你好呀"
        }
    })
    },2000);

v-model

刚才的v-text和v-html可以看做是单向绑定，数据影响了视图渲染，但是反过来就不行。接下来学习的v-model是双向绑定，视图（View）和模型（Model）之间会互相影响。

既然是双向绑定，一定是在视图中可以修改数据，这样就限定了视图的元素类型。目前v-model的可使用元素有：

input
select
textarea
checkbox
radio
components（Vue中的自定义组件）

基本上除了最后一项，其它都是表单的输入项。

checkbox案例

html：

<h1>v-model</h1>
<input type="checkbox" value="ios" v-model="language"/>ios
<input type="checkbox" value="java" v-model="language"/>java
<input type="checkbox" value="php" v-model="language"/>php <br/>
您选择了：<span v-text="language">您配吗？</span>

js:

data: { //数据模型
            name: "刘德华",
            num: 100,
            cname: "<span style='color: red'>华哥</span>",
            language: []
},

效果：

讲道理，这个括号看着是不是很不爽💩,稍微进行修改。{{这里面是可以写表达式的(v-text和v-html同理)}}

您选择了：<span v-text="language.join(',')">您配吗？</span>

多选使用数组来存储，比如checkbox和select。单选比如radio使用字符串或数字来存储

html:

<input type="radio" value="男" v-model="sex"/>男
<input type="radio" value="女" v-model="sex"/>女<br/>
性别: {{sex}}

js:

data: { //数据模型
            name: "刘德华",
            num: 100,
            cname: "<span style='color: red'>华哥</span>",
            language: [],
            sex: ""
},

原理

修饰符

v-on

v-on指令用于给页面元素绑定事件。

语法：v-on:事件名="js片段或函数名"

基础语法

前面我们已经写过了点击事件

html:

 <!--定义一个事件,v-on:事件名=js表达式-->
<input type="button" value="点我加妹子"  v-on:click="incr" /> <!--v-on:click="num++"-->

js:

methods: {
            incr(){
                console.log(this);
                this.num++
            },
            sum(){
                return this.num+100;
            }
}

另外，事件绑定可以简写，例如v-on:click='add'可以简写为@click='add'

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

.stop ：阻止事件冒泡到父元素
.prevent：阻止默认事件发生
.capture：使用事件捕获模式
.self：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）
.once：只执行一次

阻止默认事件，例如阻止浏览器默认的右键显示菜单事件

html：

<!--定义一个事件,v-on:事件名=js表达式-->
<input type="button" value="点我加妹子"  v-on:click="incr" /> <!--v-on:click="num++"-->
<!--右击事件-->
<input type="button" value="右击你懂得" @contextMenu="decr($event)"/>

js:

methods: {
            incr(){
                this.num++
            },
            decr(ev){
                ev.preventDefault();
                this.num--;
            }
}

不用DOM操作

<input type="button" value="右击你懂得" @contextMenu.prevent="decr()"/>

按键修饰符

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

html:

<!-- 只有在 keyCode 是 13 时调用 submit() -->
<input text="text" v-model="num" @keyup.13="submit"/>

js:

submit(){
     console.log("你已经提交了");
}

A是65

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

例如上面的事件调用还可以这样写

自定义按键修饰符别名

你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

组合按键修饰符

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。

.ctrl
.alt
.shift
.meta

注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。

<input text="text" v-model="num" @keyup.ctrl.enter="submit"/>

v-for和v-bind

遍历数据渲染页面是非常常用的需求，Vue中通过v-for指令来实现。

遍历数组

语法：

v-for="item in items"

items：要遍历的数组，需要在vue的data中定义好。
item：迭代得到的数组元素的别名

案例

v-bin可以缩写为':'

html：

<div id="app">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <div class="container">
        <div class="row">
            <p
                    style="text-align: center;font-size:28px;color:#FFF;background: linear-gradient(#FF7F00, #FF82AB);">
                <b>
                    <i>GODDESS</i>
                </b>
            </p>
             遍历
            <div class="col-md-3" v-for="(user,index,key) in goddess" :key="index" style="text-align: center;">
                <p>
                    <img v-bind:src="user.image" style="vertical-align:text-bottom;" height="200" />
                </p>
                <p>
                    {{index+1}}
                <p>
                    {{user.name}}
                </p>
                <p>
                    {{user.gender}}
                </p>
                <p>
                    {{user.age}}
                </p>
            </div>
        </div>
    </div>
 <div id="app">


data: { //数据模型
            name: "刘德华",
            num: 100,
            cname: "华哥",
            language: [],
            sex: "",
            year: 2020,
            goddess: [
                { image: 'https://ftp.bmp.ovh/imgs/2019/12/87863ad4c4d6e93a.jpg', name: '翁美玲', gender: '女', age: this.year - 1959 + 1 },
                { image: 'https://s2.ax1x.com/2019/12/01/QeetTe.jpg', name: '蓝洁瑛', gender: '女', age: this.year - 1963 + 1 },
                { image: 'https://ftp.bmp.ovh/imgs/2019/12/655f90ac240f8d26.jpg', name: '周慧敏', gender: '女', age: this.year - 1967 + 1 },
                { image: 'https://s2.ax1x.com/2019/12/01/QeeBlt.jpg', name: '关之琳', gender: '女', age: this.year - 1962 + 1 },
                { image: 'https://s2.ax1x.com/2019/12/01/QeeRYj.jpg', name: '邱淑贞', gender: '女', age: this.year - 1968 + 1 },
                { image: 'https://ftp.bmp.ovh/imgs/2019/12/c889f7b09a6478ed.jpeg', name: '林青霞', gender: '女', age: this.year - 1954 + 1 },
                { image: 'https://s2.ax1x.com/2019/12/01/QeeTmT.jpg', name: '李若彤', gender: '女', age: this.year - 1967 + 1 },
                { image: 'https://s2.ax1x.com/2019/12/01/QeerOf.jpg', name: '王祖贤', gender: '女', age: this.year - 1967 + 1 },
                { image: 'https://s2.ax1x.com/2019/12/01/QeeWfs.jpg', name: '张柏芝', gender: '女', age: this.year - 1980 + 1 },
                { image: 'https://s2.ax1x.com/2019/12/01/QeecTg.jpg', name: '张曼玉', gender: '女', age: this.year - 1964 + 1 },
                { image: 'https://ftp.bmp.ovh/imgs/2019/12/0821807f09267a9b.jpg', name: '蔡少芬', gender: '女', age: this.year - 1973 + 1 },
                { image: 'https://s2.ax1x.com/2019/12/01/Qee560.jpg', name: '温碧霞', gender: '女', age: this.year - 1966 + 1 },
                { image: 'https://s2.ax1x.com/2019/12/01/QeeUFH.jpg', name: '万绮雯', gender: '女', age: this.year - 1970 + 1 },
                { image: 'https://s2.ax1x.com/2019/12/01/QeeaYd.jpg', name: '钟欣潼', gender: '女', age: this.year - 1981 + 1 },
                { image: 'https://ftp.bmp.ovh/imgs/2019/12/32c501866339e345.png', name: '周秀娜', gender: '女', age: this.year - 1985 + 1 },
                { image: 'https://s2.ax1x.com/2019/12/01/Qee4lq.jpg', name: '杨紫', gender: '女', age: this.year - 1992 + 1 },
                { image: 'https://s2.ax1x.com/2019/12/01/Qee70U.png', name: '郑爽', gender: '女', age: this.year - 1991 + 1 },
                { image: 'https://s2.ax1x.com/2019/12/01/Qee2kQ.jpg', name: '唐嫣', gender: '女', age: this.year - 1983 + 1 },
                { image: 'https://s2.ax1x.com/2019/12/01/QeeH7F.jpg', name: '佟丽娅', gender: '女', age: this.year - 1983 + 1 },
                { image: 'https://s2.ax1x.com/2019/12/01/QeeIXV.jpg', name: '舒畅', gender: '女', age: this.year - 1987 + 1 },
                { image: 'https://ftp.bmp.ovh/imgs/2019/12/22c88e047a214210.jpg', name: '杨幂', gender: '女', age: this.year - 1986 + 1 },
                { image: 'https://s2.ax1x.com/2019/12/01/Qeehpn.jpg', name: '刘亦菲', gender: '女', age: this.year - 1987 + 1 },
                { image: 'https://s2.ax1x.com/2019/12/01/Qelv5T.jpg', name: '韩雪', gender: '女', age: this.year - 1983 + 1 },
                { image: 'https://s2.ax1x.com/2019/12/01/QeedfA.jpg', name: '宋祖儿', gender: '女', age: this.year - 1998 + 1 }
            ]
        },

数组角标

在遍历的过程中，如果我们需要知道数组角标，可以指定第二个参数：

语法

v-for="(item,index) in items"

items：要迭代的数组
item：迭代得到的数组元素别名
index：迭代到的当前元素索引，从0开始。

<div class="col-md-3" v-for="(user,index,key) in goddess" :key="index" style="text-align: center;">
    <p>
        <img v-bind:src="user.image" style="vertical-align:text-bottom;" height="200" />
    </p>
    <p>
        {{index+1}}
    <p>

遍历对象

v-for除了可以迭代数组，也可以迭代对象。语法基本类似

语法：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

1个参数时，得到的是对象的属性值
2个参数时，第一个是属性值，第二个是属性名
3个参数时，第三个是索引，从0开始

html:

<span v-for="(value,key,index) in date" :key="index">{{key+' '+value+' '}}</span>

js:

 date: {
     Year: 2020,
     month: 4,
     day: 14
 }

key

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

这个功能可以有效的提高渲染的效率。

但是要实现这个功能，你需要给Vue一些提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。

示例：

<div class="col-md-3" v-for="(user,index) in goddess" :key=index style="text-align: center;" >

这里使用了一个特殊语法：:key="" 我们后面会讲到，它可以让你读取vue中的属性，并赋值给key属性
这里我们绑定的key是数组的索引，应该是唯一的

使用key和不使用key的对比

当某一层有很多相同的节点时，也就是列表节点时，我们希望插入一个新的节点
我们希望可以在B和C之间加一个F，Diff算法默认执行起来是这样的。
即把C更新成F，D更新成C，E更新成D，最后再插入E，是不是很没有效率？

所以我们需要使用key来给每个节点做一个唯一标识
Diff算法就可以正确的识别此节点
找到正确的位置区插入新的节点。

所以一句话，key的作用主要是为了高效的更新虚拟DOM。

注意：key不要使用index，因为绑定的inedx是会改变的，没什么用。

v-if和v-show

v-if，顾名思义，条件判断。当得到结果为true时，所在的元素才会被渲染。

语法：v-if="布尔表达式"，v-show="布尔表达式"

html:

<span v-if="show">你看我了，你是true，我是if</span><br/>
<span v-show="show">你看到我了，你是true，我是show</span>

js:

data: { 
   show: true
}

show和if的区别: if当为false时，不会进行渲染。二show会进行渲染，仅仅是设置不显示罢了

v-else和v-else-if

你可以使用 v-else 指令来表示 v-if 的“else 块”：

<input type="button" value="点我生成随机数" @click="random=Math.random()*100" />{{random}}<br/>
<p v-if="random>60">大妈</p>
<p v-else-if="random>30">阿姨</p>
<p v-else-if="random>15">姐姐</p>
<p v-else-if="random>0" style="font-size: 40px;color: red">我们来炼铜吧</p>
<p v-else style="font-size: 20px;color: aqua">快快点击生成随机数吧！</p>

v-else-if 必须紧跟在带 v-if 或者 v-else-if 的元素之后。

v-else 元素也必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

错误演示

只会显示random>60时的“大妈”

<input type="button" value="点我生成随机数" @click="random=Math.random()*100" />{{random}}<br/>
<p v-if="random>60">大妈</p><br/>
<p v-else-if="random>30">阿姨</p><br/>
<p v-else-if="random>15">姐姐</p><br/>
<p v-else-if="random>0" style="font-size: 40px;color: red">我们来炼铜吧</p><br/>
<p v-else style="font-size: 20px;color: aqua">快快点击生成随机数吧！</p>

v-bind

html属性不能使用双大括号形式绑定，只能使用v-bind指令。

上面在遍历显示女神时，图片的src属性就用的是v-bind

<img v-bind:src="user.image" style="vertical-align:text-bottom;" height="200" />
<input type="button" v-bind:class="{active: store>0}" value="购买"/>
<input type="button" :class="store>0?'active':'noactive'" value="购买"/>

css:

.active{
    font-size: 30px;
    background-color: red;
}
.noactive{
    background-color: gray;
}

在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

绑定class样式

数组语法

我们可以借助于v-bind指令来实现：

HTML：

<div id="app">
    <div v-bind:class="activeClass"></div>
    <div v-bind:class="errorClass"></div>
    <div v-bind:class="[activeClass, errorClass]"></div>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            activeClass: 'active',
            errorClass: ['text-danger', 'text-error']
        }
    })
</script>

渲染后的效果：

对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class：

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

上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive 的 truthiness（所有的值都是真实的，除了false,0,“”,null,undefined和NaN）。

你可以在对象中传入更多属性来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 属性共存。如下模板:

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

和如下 data：

data: {
  isActive: true,
  hasError: false
}

结果渲染为：

<div class="static active"></div>

active样式和text-danger样式的存在与否，取决于isActive和hasError的值。本例中isActive为true，hasError为false，所以active样式存在，text-danger不存在。

绑定style样式

数组语法

数组语法可以将多个样式对象应用到同一个元素上：

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

数据：

data: {
    baseStyles: {'background-color': 'red'},
    overridingStyles: {border: '1px solid black'}
}

渲染后的结果：

<div style="background-color: red; border: 1px solid black;"></div>

对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用单引号括起来) 来命名：

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px', backgroundColor: 'red' }"></div>

数据：

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

效果：

<div style="color: red; font-size: 30px;backgroundColor: red"></div>

简写

例

v-bind:属性名可以简写为:属性名

计算属性

在插值表达式中使用js表达式是非常方便的，而且也经常被用到。

但是如果表达式的内容很长，就会显得不够优雅，而且后期维护起来也不方便，例如下面的场景，我们有一个日期的数据，但是是毫秒值：

data:{
    birthday:88888888888 // 毫秒值
}

我们在页面渲染，希望得到yyyy-MM-dd的样式：

<h1>您的生日是：{{
    new Date(birthday).getFullYear() + '-'+ new Date(birthday).getMonth()+ '-' + new Date(birthday).getDay()
    }}
</h1>

虽然能得到结果，但是非常麻烦。

Vue中提供了计算属性，来替代复杂的表达式：

data:{
    birthday:88888888888 // 毫秒值
}
computed: {
    birth(){
        const date=new Date(this.birthday);
        return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDay()+"日";
    }
}

<p>你的年龄:{{birth}}</p>

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要birthday还没有发生改变，多次访问 birthday 计算属性会立即返回之前的计算结果，而不必再次执行函数。

computed里面定义的方法一定要有返回值

执行该方法后，会像v-model一样，生成一个属性方法名：返回值。所以直接使用该属性就可以了，而不必调用方法

watch

watch可以让我们监控一个值的变化。从而做出相应的反应。

示例：

html:

<!--watch-->
<input type="text" v-model="message"/>

js:

data: {
    message: "",
},
watch: {
    message(newval,oldval){
        console.log(newval,oldval);
    }
}

效果

组件

在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。

但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同页面就可以共享这些组件，避免重复开发。

在vue里，所有的vue实例都是组件

注册组件的基本步骤

1.Vue.extend()：
调用Vue.extend()创建的是一个组件构造器。
通常在创建组件构造器时，传入template代表我们自定义组件的模板。
该模板就是在使用到组件的地方，要显示的HTML代码。
事实上，这种写法在Vue2.x的文档中几乎已经看不到了，它会直接使用下面我们会讲到的语法糖，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。

2.Vue.component()：
调用Vue.component()是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
所以需要传递两个参数：1、注册组件的标签名 2、组件构造器

3.组件必须挂载在某个Vue实例下，否则它不会生效。

全局组件

全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。

我们通过Vue的component方法来定义一个全局组件。

<script src="node_modules/vue/dist/vue.js"></script>
<script>
    Vue.component("counter",{
    template: "<button @click='add'>瞅我呀,你瞅了{{num}}几次</button>",
    data(){
        return {
            num: 0
        }
    },
    methods: {
        add(){
            this.num++;
        }
    }
})

const app=new Vue({
    el: "#app",
    data: {

    }
});
</script>

使用定义好的全局组件，标签名就是定义的组件名

<div id="app">
    <counter></counter>
    <counter></counter>
</div>

组件其实也是一个Vue实例，因此它在定义时也会接收：data、methods、生命周期函数等
不同的是组件不会与页面的元素绑定，否则就无法复用了，因此没有el属性。
但是组件渲染需要html模板，所以增加了template属性，值就是HTML模板
全局组件定义完毕，任何vue实例都可以直接在HTML中通过组件名称来使用组件了。
data必须是一个函数，不再是一个对象，在该函数中返回数据对象。
组件和app是父子关系，组件标签的使用必须在app中

组件的复用

定义好的组件，可以任意复用多次：

<div id="app">
    <counter></counter>
    <counter></counter>
    <counter></counter>
</div>

你会发现每个组件互不干扰，都有自己的count值。怎么实现的？

组件的data属性必须是函数！

当我们定义组件时，它的data 并不是像之前直接提供一个对象：

data: {
    count: 0
}

取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
    return {
        count: 0
    }
}

如果 Vue 没有这条规则，点击一个按钮就会影响到其它所有实例！

局部组件

一旦全局注册，就意味着即便以后你不再使用这个组件，它依然会随着Vue的加载而加载。

因此，对于一些并不频繁使用的组件，我们会采用局部注册。

我们先在外部定义一个对象，结构与创建全局组件时传递的第二个参数一致

然后在Vue中使用它：

js:

const hello={
    template: "<div>hello,我是{{name}}</div>",
    data(){
        return {
            name: "张学友"
        }
    }
};

const app=new Vue({
    el: "#app",
    data: {

    },
    components: {
        hello1: hello  //hello1为到时候使用的标签名,hello是自己定义的组件
    }
});

html:

<div id="app">
    <hello1></hello1>
</div>

components就是当前vue对象子组件集合。
- 其key就是子组件名称
- 其值就是组件对象名
效果与刚才的全局注册是类似的，不同的是，这个组件只能在当前的Vue实例中使用

模板的分离写法

script

template

编译作用域

插槽

组件的插槽：

组件的插槽也是为了让我们封装的组件更加具有扩展性。
让使用者可以决定组件内部的一些内容到底展示什么。

栗子：移动网站中的导航栏。

移动开发中，几乎每个页面都有导航栏。
导航栏我们必然会封装成一个插件，比如nav-bar组件。
一旦有了这个组件，我们就可以在多个页面中复用了。

如何去封装这类的组件呢？

它们也很多区别，但是也有很多共性。
如果，我们每一个单独去封装一个组件，显然不合适：比如每个页面都返回，这部分内容我们就要重复去封装。
但是，如果我们封装成一个，好像也不合理：有些左侧是菜单，有些是返回，有些中间是搜索，有些是文字，等等。

如何封装合适呢？抽取共性，保留不同。

最好的封装方式就是将共性抽取到组件中，将不同暴露为插槽。
一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容。
是搜索框，还是文字，还是菜单。由调用者自己来决定。

具名插槽

在子组件中，使用特殊的元素<slot>就可以为子组件开启一个插槽。

<slot name='myslot'></slot>,在slot中加个name属性就可以成为具名插槽

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <cpn><span slot="left">返回</span></cpn>
            <cpn><span slot="middle">标题</span></cpn>
        </div>
    </body>
    
    <template id="cpnC">
        <div>
            <slot name="left"><span>左边</span></slot>
            <slot name="middle"><span>中间</span></slot>
            <slot name="right"><span>右边</span></slot>
        </div>
    </template>
    
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>

        const cpn={
            template: "#cpnC"
        }
        const app=new Vue({
            el:"#app",
            components:{
                cpn:cpn
            }
        })
    </script>
</html>

作用域插槽

数据在子组件中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <!--    默认的格式-->
            <cpn></cpn>
            <!--    以逗号分割-->
            <cpn>
                <template slot-scope="data">
                    <ul>
                        <li v-for="language in data" style="list-style: none">{{language.join(",")}} </li>
                    </ul>
                </template>
            </cpn>

        </div>

    </body>
    <template id="cpnC">
        <div>
            <slot :data="Clanguage">
                <ul>
                    <li v-for="language in Clanguage">{{language}}</li>
                </ul>
            </slot>
        </div>
    </template>

    <script src="../node_modules/vue/dist/vue.js"></script>
    <script>
        const cpn={
            template: '#cpnC',
            data(){
                return {
                    Clanguage: ['java','c#','python','php','c++','javascript']
                }
            }
        }


        const app=new Vue({
            el: "#app",
            components: {
                cpn,
            }
        })

    </script>

</html>

组件通信

通常一个单页应用会以一棵嵌套的组件树的形式来组织：

页面首先分成了顶部导航、左侧内容区、右侧边栏三部分
左侧内容区又分为上下两个组件
右侧边栏中又包含了3个子组件

各个组件之间以嵌套的关系组合在一起，那么这个时候不可避免的会有组件间通信的需求。

props(父向子通信)

父组件使用子组件时，自定义属性（属性名任意，属性值为要传递的数据）
子组件通过props接收父组件数据，通过自定义属性的属性名

例，修改开始的全局组件

在使用组件的时候给组件传递num1参数

<div>
    <counter :num1="num"></counter>  
</div>

子组件中通过props来接收一个父组件传递的属性

Vue.component("counter",{
    template: "<button @click='add'>瞅我呀,你瞅了{{num}}几次</button>",
    props: ["num1","num2"],
    data(){
        return {
            num: 0
        }
    },
    methods: {
        add(){
            this.num++;
        }
    }
});

//父组件
const app=new Vue({
    el: "#app",
    data: {
        num: 12
    },
});

props验证

我们定义一个局部组件，并接收复杂数据：

//全局组件
Vue.component("counter",{
    template: "<button @click='add'>瞅我呀,你瞅了{{num}}-{{title}}几次</button>",
    //props: ["num1","num2"],
    props: {
        num1: {
            type: Number,
            default: 0,
            required: false
        },
        title: {
            type: Number,
        }
    },
    data(){
        return {
            num: 0
        }
    },
    methods: {
        add(){
            this.num++;
        }
    }
});

这个子组件可以对 items 进行迭代，并输出到页面。
props：定义需要从父组件中接收的属性
- num1：是要接收的属性名称
  - type：限定父组件传递来的必须是数字
  - default：默认值
  - required：是否必须

当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。

type 可以是下列原生构造函数中的一个：

String
Number
Boolean
Array
Object
Date
Function
Symbol

动态静态传递

给 prop 传入一个静态的值：

 <counter  title="num"></counter>

给 prop 传入一个动态的值：（通过v-bind从数据模型中，获取title的值）

 <counter  :title="num"></counter>

静态传递时，我们传入的值都是字符串类型的，但实际上任何类型的值都可以传给一个 props。

 <counter :num1="num" title="num"></counter>  <!--动静态绑定,静态的默认都是字符串，结果为:0-num-->

子向父通信：$emit

vue提供了一个内置的this.$emit()函数，用来调用父组件绑定的函数，可以传递参数

this.$emit(‘函数名’,参数…)

来看这样的一个案例：

我们可以通过v-on指令将父组件的函数绑定到子组件上：

html

<div>
    <counter :num1="num" title="num" @incre="incr()"></counter>  
</div>

//全局组件
Vue.component("counter",{
    template: "<button @click='subIncr'>瞅我呀,你瞅了{{num1}}-{{title}}几次</button>",
    //props: ["num1","num2"],
    props: {
        num1: {
            type: Number,
            default: 0,
            required: false
        },
        title: {
            type: Number,
        }
    },
    data(){
        return {
            num: 0
        }
    },
    methods: {
        add(){
            this.num++;
        },
        subIncr(){   //定义子组件方法
            this.$emit("incre");
        }
    }
});

//父组件
const app=new Vue({
    el: "#app",
    data: {
        num: 12
    },
    components: {
        hello1: hello  //hello1为到时候使用的标签名,hello是自己定义的组件
    },
    methods: {
        incr(){  //定义父组件方法
            this.num++;
        }
    }
});

父子组件的访问方式

$children

$ref

$parent

模块化

匿名函数方式

CommonJS

Export

import

webpack

什么是webpack

At its core, webpack is a static module bundler for modern JavaScript applications.
从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具。
但是它是什么呢？用概念解释概念，还是不清晰。
我们从两个点来解释上面这句话：模块 和 打包

模块化

目前使用前端模块化的一些方案：AMD、CMD、CommonJS、ES6。

在ES6之前，我们要想进行模块化开发，就必须借助于其他的工具，让我们可以进行模块化开发。

并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并且将其进行整合打包。

而webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系。

而且不仅仅是JavaScript文件，我们的CSS、图片、json文件等等在webpack中都可以被当做模块来使用（在后续我们会看到）。

打包

理解了webpack可以帮助我们进行模块化，并且处理模块间的各种复杂关系后，打包的概念就非常好理解了。

就是将webpack中的各种资源模块进行打包合并成一个或多个包(Bundle)。

并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss转成css，将ES6语法转成ES5语法，将TypeScript转成JavaScript等等操作。

但是打包的操作似乎grunt/gulp也可以帮助我们完成，它们有什么不同呢？

和grunt和gulp的对比

grunt/gulp的核心是Task

我们可以配置一系列的task，并且定义task要处理的事务（例如ES6、ts转化，图片压缩，scss转成css）
之后让grunt/gulp来依次执行这些task，而且让整个流程自动化。
所以grunt/gulp也被称为前端自动化任务管理工具。

我们来看一个gulp的task

下面的task就是将src下面的所有js文件转成ES5的语法。
并且最终输出到dist文件夹中。

什么时候用grunt/gulp呢？

如果你的工程模块依赖非常简单，甚至是没有用到模块化的概念。
只需要进行简单的合并、压缩，就使用grunt/gulp即可。
但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的webpack了。

所以，grunt/gulp和webpack有什么不同呢？

grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心。
webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是他附带的功能。

安装和使用

安装webpack依赖(记得加上版本号)

npm install webpack@3.6.0 -g  #全局安装
npm install webpack@3.6.0 --save-dev  #本地安装

为什么全局安装后，还需要局部安装呢？

在终端直接执行webpack命令，使用的全局安装的webpack
当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack

创建一个脚本

创建一个webpack.config.js文件

const path=require('path')

module.exports={
    entry: './src/main.js', //指定入口
    output:{
        path: path.resolve(__dirname,'dist'),   //动态获取路径
        filename: 'bundle.js'  //打包的文件名
    }
}

使用局部的webpack进行打包

npm run build   #使用局部的webpack进行打包

loader

使用步骤

步骤一：通过npm安装需要使用的loader

步骤二：在webpack.config.js中的modules关键字下进行配置

style-loader和css-loader

引入依赖

npm install style-loader --save-dev
npm install css-loader --save-dev

配置

module: {
    rules: [
        {
            test: /\.css$/,  //正则表达式进行匹配
            //css-loacder只负责将css文件进行加载
            //style-loader负责将样式添加到DOM中
            //使用多个
            use: [ 'style-loader','css-loader' ]
        },
    ]
}

less和less-loader

引入less打包依赖(记得加上版本号)

npm install less@3.9.0 less-loader@5.0.0 --save-dev

配置

module: {
    rules: [
        {
            test: /\.css$/,
            //css-loacder只负责将css文件进行加载
            //style-loader负责将样式添加到DOM中
            //使用多个
            use: [ 'style-loader','css-loader' ]
        },
        {
            test: /\.less$/,
            use: [{
                loader: "style-loader" // creates style nodes from JS strings
            }, {
                loader: "css-loader" // translates CSS into CommonJS
            }, {
                loader: "less-loader" // compiles Less to CSS
            }]
        }
    ]

url-loader和file-loader

引入依赖

npm install --save-dev url-loader

进行配置

{
    test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'url-loader',
                options: {
                    //当加载的图片，小于limit时，会将图片编译成base64字符串形式,不会形成一个新的文件
                    //当大于限制，要使用file-loader，会形成一个新文件
                    limit: 8192,
                    name: "img/[name].[hash:8].[ext]"  //指定生成的文件夹和命名
                }
            }
        ]
}

字符串形式请求的url

当图片的大小大于限制的时候，就不是编译成Base64字符串的形式放到打包js文件中了，而是重新生成一个文件。此时要引入file-loader依赖

引入file-loader依赖

npm install --save-dev file-loader  #引入file-loader依赖

问题一：路径不对

图片形成一个文件后放到dist文件夹中，但是请求的路径不包含dist

解决：指定一个前缀

问题二：图片的命名

形成一个图片后，默认是放在dist文件夹下，而且是用32位的hash值进行存储的，太乱了

解决：指定命名规则

文件格式请求的url

ES6语法处理

引入依赖

npm install --save-dev babel-loader@7 babel-core babel-preset-es2015

配置

{
    test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
            }
}

引入Vue的打包

在js中使用vue

//使用vue进行开发
import Vue from "vue"

const app=new Vue({
    el: "#app",
    data: {
        message: "Hello world"
    }
})

打包后页面报错

这个错误说的是我们使用的是runtime-only版本的Vue，什么意思呢？

这里我只说解决方案：Vue不同版本构建，后续我具体讲解runtime-only和runtime-compiler的区别。

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js'
    }
}

runtime-only和runtime-compiler的区别

如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler(左图)

如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only(有右图)

我们需要先理解Vue应用程序是如何运行起来的。

Vue中的模板如何最终渲染成真实DOM。

我们来看下面的一幅图。

使用Runtime-only直接省掉了前两步，性能更高，代码更少

render的使用

Vue组件化开发引入

引入依赖

npm install vue-loader vue-template-compiler --save-dev

配置

一定要记得配置插件

const path=require('path');
const { VueLoaderPlugin } = require('vue-loader')

module.exports={
    entry: './src/main.js',
    output:{
        path: path.resolve(__dirname,'dist'),   //动态获取路径
        filename: 'bundle.js',
        publicPath: 'dist/'
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
}

记得加上.vue后缀

Plugin

loader主要用于转换某些类型的模块，它是一个转换器。

plugin是插件，它是对webpack本身的扩展，是一个扩展器。

添加版权的Plugin

效果

打包Html的Plugin

引入依赖

npm install html-webpack-plugin --save-dev

配置

此时可以将之前用于改正打包的图片文件的路径写的publicPath进行删除了，因为此刻html也已经打包了。

此时也不需要引入任何的script文件，因为打包后会自动引入

js压缩的Plugin

引入依赖

npm install uglifyjs-webpack-plugin@1.1.1 --save-dev

配置插件

效果

搭建本地服务器

引入依赖

npm install --save-dev webpack-dev-server@2.9.1

配置文件

devserver也是作为webpack中的一个选项，选项本身可以设置如下属性：

contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
port：端口号
inline：页面实时刷新
historyApiFallback：在SPA页面中，依赖HTML5的history模式

配置脚本

open:是指运行后立马打开网页

配置文件的抽离

问题：

我们的devServer只在开发时使用，而在部署时不需要这个配置
而我们的js压缩只在项目部署时使用，而在开发时不需要使用

下载依赖

下载webpack的配置文件合并依赖

npm install webpack-merge

进行分离

创建build文件夹，里面放三个配置文件

base.config.js 基础配置文件

记得修改导出的文件名，不是dist，而是../dist

const path=require('path');  //通过这个参数可以获取该项目的路径
const { VueLoaderPlugin } = require('vue-loader');  //可以使用VueLoaderPlugin
const webpack=require("webpack");  //可以使用版权插件
const HtmlWebpackPlugin=require("html-webpack-plugin");  //html打包插件
const UglifyjsWebpackPlugin=require("uglifyjs-webpack-plugin");  //压缩js的插件

module.exports={
    entry: './src/main.js',
    output:{
        path: path.resolve(__dirname,'../dist'),   //动态获取路径
        filename: 'bundle.js',
        // publicPath: 'dist/'
    },
    plugins: [
        // make sure to include the plugin for the magic
        new VueLoaderPlugin(),  //vue-template-compiler的插件,必须要有
        new webpack.BannerPlugin("该版权归codekiller所有"),  //版权的插件
        new HtmlWebpackPlugin({
            template: 'index.html'   //以index.html为模板进行打包
        }),  //html打包插件
        // new UglifyjsWebpackPlugin()  //压缩js的插件,开发阶段不要使用
    ],
    module: {
        rules: [
            {
                test: /\.css$/,
                //css-loacder只负责将css文件进行加载
                //style-loader负责将样式添加到DOM中
                //使用多个
                use: [ 'style-loader','css-loader' ]
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader" // creates style nodes from JS strings
                }, {
                    loader: "css-loader" // translates CSS into CommonJS
                }, {
                    loader: "less-loader" // compiles Less to CSS
                }]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            //当加载的图片，小于limit时，会将图片编译成base64字符串形式,不会形成一个新的文件
                            //当大于限制，要使用file-loader，会形成一个新文件
                            limit: 8192,
                            name: "img/[name].[hash:8].[ext]"
                        }
                    }
                ]
            },
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['es2015']
                    }
                }
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            }
        ]
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js'
        }
    },
    //开发阶段使用，打包就不需要了
    // devServer: {
    //     contentBase: "./dist",  //内容的目录
    //     inline: true,   //实时监听
    //     // port: 8080  //默认在8080端口
    //     // historyApiFallback:  //在SPA页面中，依赖HTML5的history模式
    // }
}

dev.config.js

const webpackMerge=require("webpack-merge");
const baseConfig=require("./base,config");

//进行合并
module.exports=webpackMerge(baseConfig,{
    //开发阶段使用，打包就不需要了
    devServer: {
        contentBase: "./dist",  //内容的目录
        inline: true,   //实时监听
        // port: 8080  //默认在8080端口
        // historyApiFallback:  //在SPA页面中，依赖HTML5的history模式
    }
})

prod.config.js

const UglifyjsWebpackPlugin=require("uglifyjs-webpack-plugin");  //压缩js的插件
const webpackMerge=require("webpack-merge");
const baseConfig=require("./base,config");


//进行合并
module.exports=webpackMerge(baseConfig,{
    plugins: [
        new UglifyjsWebpackPlugin()  //压缩js的插件,开发阶段不要使用
    ]
})

修改配置文件

vue-cli的使用

使用前提：

安装node环境
安装webpack

npm install webpack -g

安装脚手架
```
npm install -g @vue/cli
```

初始化项目

vue init webpack my-project  #vue cli2
vue create my-project #vue cli3/4

cli2详解

vue init webpack my-project  #vue cli2

选择配置

目录结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NvCC00Im-1595218176399)(C:\Users\DELL\AppData\Roaming\Typora\typora-user-images\image-20200512162306269.png)]

cli3详解

vue create my-project #vue cli3/4

选择配置

删除预处理(preset)

删掉就可以了

别名问题

https://blog.csdn.net/qq_44766883/article/details/106108615

路由和Vue-router

场景模拟

现在我们来实现这样一个功能：

一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换：

填写父组件

为了让接下来的功能比较清晰，我们先新建一个文件夹：src

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <div id="app">
            <span>登录</span>
            <span>注册</span>
            <hr/>
            <login-frame></login-frame>
            <register-frame></register-frame>
        </div>
    </body>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="js/login.js"></script>
    <script src="js/register.js"></script>
    <script>
        const app=new Vue({
            el: "#app",
            components: {
                loginFrame,    //如果组件名和标签名一样,那么可以省略
                registerFrame
            }
        });
    </script>
</html>

HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的命名需要使用其等价的 kebab-case (短横线分隔命名) 命名

即本例中的loginFrame: login-frame

编写登录及注册组件

接下来我们来实现登录组件，以前我们都是写在一个文件中，但是为了复用性，开发中都会把组件放入独立的JS文件中，我们在src下新建一个user目录以及在下面创建login.js及register.js：

编写组件，这里我们只写模板，不写功能。

const loginFrame={  //组件template中只能有一个根标签
    template:`   
      <div>
            <h1>登录页</h1>
            用户名:<input type="text"/><br/>
            密&emsp;码:<input type="password"/><br/>
            <input type="button" value="登录"/>
      </div>  
    `,
}

const registerFrame={
    template:`   //组件内只能有一个根标签
      <div>
            <h1>注册页</h1>
            用&ensp;户&ensp;名:<input type="text"/><br/>
            密&emsp;&emsp;码:<input type="password"/><br/>
            确认密码:<input type="password"/><br/>
            <input type="button" value="注册"/>
      </div>  
    `,
}

&ensp和&emsp

&ensp;

它叫“半角空格”，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。

&emsp;

它叫“全角空格”，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。

问题

我们期待的是，当点击登录或注册按钮，分别显示登录页或注册页，而不是一起显示。

但是，如何才能动态加载组件，实现组件切换呢？

虽然使用原生的Html5和JS也能实现，但是官方推荐我们使用vue-router模块。

vue-router简介和安装

使用vue-router和vue可以非常方便的实现复杂单页应用的动态路由功能。

官网：https://router.vuejs.org/zh-cn/

使用npm安装：npm install vue-router

在index.html中引入依赖：

<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/vue-router/dist/vue-router.js"></script>

快速入门

新建vue-router对象，并且指定路由规则：

const router=new VueRouter({
    routes: [
        {
            path: "/login",  //路由路径，必须以/开头
            component: loginFrame  // 组件名称

        },
        {
            path: "/register",
            component: registerFrame
        }
    ]
});

const app=new Vue({
    el: "#app",
    components: {
        loginFrame,    //如果组件名和标签名一样,那么可以省略一个
        registerFrame
    },
    router  //引入router
});

创建VueRouter对象，并指定路由参数
routes：路由规则的数组，可以指定多个对象，每个对象是一条路由规则，包含以下属性：
- path：路由的路径
- component：组件名称

记得在父组件中引入router对象

<div id="app">
    <span><router-link to="/login">登录</router-link></span>
    <span><router-link to="/register">注册</router-link></span>
    <hr/>
    <router-view></router-view>
</div>

通过<router-view>来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染
通过<router-link>指定一个跳转链接，当点击时，会触发vue-router的路由功能，路径中的hash值会随之改变

注意：

单页应用中，页面的切换并不是页面的跳转。仅仅是地址最后的hash值变化。

事实上，我们总共就一个HTML：index.html

讲道理，有了路由之后，其实父组件里面都不需要引入组件了，直接通过路由就可以了

脚手架中使用路由

前端路由阶段

后端分离阶段：

随着Ajax的出现, 有了前后端分离的开发模式.

后端只提供API来返回数据, 前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中.

这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上.

并且当移动端(iOS/Android)出现后, 后端不需要进行任何处理, 依然使用之前的一套API即可.

目前很多的网站依然采用这种模式开发.

单页面富应用阶段:

其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.

也就是前端来维护一套路由规则.

不刷新改变url的几种方式

hash方式

URL的hash也就是锚点(#), 本质上是改变window.location的href属性.

我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新

pushState

history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面.

history.pushState()

replaceState

history.replaceState()

go

history.go()

补充说明

因为 history.back() 等价于 history.go(-1)

history.forward() 则等价于 history.go(1)

这三个接口等同于浏览器界面的前进后退。

使用History模式

我们前面说过改变路径的方式有两种:

URL的hash
HTML5的history

默认情况下, 路径的改变使用的URL的hash.

如果希望使用HTML5的history模式, 非常简单, 进行如下配置即可

router-link

在前面的<router-link>中, 我们只是使用了一个属性: to, 用于指定跳转的路径.

<router-link>还有一些其他属性:

tag: tag可以指定<router-link>之后渲染成什么组件, 比如上面的代码会被渲染成一个<li>元素, 而不是<a>
replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中
active-class: 当<router-link>对应的路由匹配成功时, 会自动给当前元素设置一个router-link-active的class, 设置active-class可以修改默认的名称.

在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类.

但是通常不会修改类的属性, 会直接使用默认的router-link-active即可.

修改linkActiveClass

路由代码跳转

有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了

比如, 我们将代码修改如下:

动态路由

在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径：

/user/aaaa或/user/bbbb

除了有前面的/user之外，后面还跟上了用户的ID

这种path和Component的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)。

跳转

编写路由

跳转所到界面。通过$route可以获取后面的参数值

效果

路由的懒加载

官方给出了解释:

当打包构建应用时，Javascript 包会变得非常大，影响页面加载。
如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了

官方在说什么呢?

首先, 我们知道路由中通常会定义很多不同的页面.
这个页面最后被打包在哪里呢? 一般情况下, 是放在一个js文件中.
但是, 页面这么多放在一个js文件中, 必然会造成这个页面非常的大.
如果我们一次性从服务器请求下来这个页面, 可能需要花费一定的时间, 甚至用户的电脑上还出现了短暂空白的情况.
如何避免这种情况呢? 使用路由懒加载就可以了.

路由懒加载做了什么?

路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.
只有在这个路由被访问到的时候, 才加载对应的组件

方式一结合Vue的异步组件和Webpack的代码分析.

结合Vue的异步组件和Webpack的代码分析.

const Home = resolve => { require.ensure(['../components/Home.vue'], () => { resolve(require('../components/Home.vue')) })};

方式二AMD写法

AMD写法

const About = resolve => require(['../components/About.vue'], resolve);

方式三在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割.

const Home = () => import('../components/Home.vue')

嵌套路由

嵌套路由是一个很常见的功能

比如在home页面中, 我们希望通过/home/news和/home/message访问一些内容.

一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件.

路径和组件的关系如下:

定义两个组件

编写路由

路有点击

效果

参数的传递

params

配置路由格式: /router/:id

传递的方式: 在path后面跟上对应的值

传递后形成的路径: /router/123, /router/abc

例子,跳转

query

配置路由格式: /router, 也就是普通配置

传递的方式: 对象中使用query的key作为传递方式

传递后形成的路径: /router?id=123, /router?id=abc

发送请求

路由

跳转的组件

效果

$router和$route的区别

$route和$router是有区别的

$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法

$route为当前router跳转对象里面可以获取name、path、query、params等

其中params为params类型的请求参数

query为query类型的请求参数

vue的原型

一切组件都继承自vue的原型

title问题

们来考虑一个需求: 在一个SPA应用中, 如何改变网页的标题呢?

网页标题是通过<title>来显示的, 但是SPA只有一个固定的HTML, 切换不同的页面时, 标题并不会改变.
但是我们可以通过JavaScript来修改<title>的内容.window.document.title = ‘新的标题’.
那么在Vue项目中, 在哪里修改? 什么时候修改比较合适呢?

普通的修改方式:

我们比较容易想到的修改标题的位置是每一个路由对应的组件.vue文件中.
通过mounted声明周期函数, 执行对应的代码进行修改即可.
但是当页面比较多时, 这种方式不容易维护(因为需要在多个页面执行类似的代码).

有没有更好的办法呢? 使用导航守卫即可.

什么是导航守卫?

vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.
vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发.

使用前置守卫给每个路由在跳转前加上title。

注意：因为有children，所以不要直接使用meta，而是使用matched[0].meta

导航守卫

全局前置守卫

你可以使用 router.beforeEach 注册一个全局前置守卫：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 等待中。

每个守卫方法接收三个参数：

to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
- next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
- next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
- next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，且允许设置诸如 replace: true、name: 'home' 之类的选项以及任何用在 router-link 的 to prop 或 router.push 中的选项。
- next(error): (2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

确保要调用 next 方法，否则钩子就不会被 resolved。

全局后置钩子

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

//后置钩子(hook)
router.afterEach((to,from)=>{
  console.log('-----')
})

全局解析守卫

在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。

路由独享的守卫

  {
    path: '/about',
    component: ()=>import("../views/About"),
    meta: {
      title: '关于'
    },
    beforeEnter: (to,from,next)=>{
      console.log('beforeEnter')
      next()
    }

这些守卫与全局前置守卫的方法参数是一样的。

组件内的守卫

最后，你可以在路由组件内直接定义以下路由导航守卫：

beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。

不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。

beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

导航解析流程

导航被触发。
在失活的组件里调用离开守卫。
调用全局的 beforeEach 守卫。
在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
在路由配置里调用 beforeEnter。
解析异步路由组件。
在被激活的组件里调用 beforeRouteEnter。
调用全局的 beforeResolve 守卫 (2.5+)。
导航被确认。
调用全局的 afterEach 钩子。
触发 DOM 更新。
用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

keep-alive

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

它们有两个非常重要的属性:

include - 字符串或正则表达，只有匹配的组件会被缓存
exclude- 字符串或正则表达式，任何匹配的组件都不会被缓存
```
<keep-alive exclude="About,Home">
    <router-view/>
</keep-alive>
```

router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：

通过create声明周期函数来验证

不使用keep-alive,在两个组件中跳转，每次回到这个组件，就会重新创建一次，离开就销毁一次

使用keep-alive,只创建一次

引发的问题

我如果想重新回到该组件，还是原来的路径怎么办呢？因为我回到这个组件后，还是去到默认的组件

进行路径记录

path初始是默认路径，在进入的时候跳转到记录的path,在离开的时候记录当前的path

ps：钩子函数一定要选择正确

actived和deactived钩子

使用看上方

这两个函数只有使用了keep-alive才能使用

导航栏实践

目录结构

TabBar

TabBarItem

MainTabBar

App

index.js

Vuex

是什么

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

状态管理到底是什么？

状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人捉摸不透。
其实，你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。
然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。
那么，多个组件是不是就可以共享这个对象中的所有变量属性了呢？

等等，如果是这样的话，为什么官方还要专门出一个插件Vuex呢？难道我们不能自己封装一个对象来管理吗？

当然可以，只是我们要先想想VueJS带给我们最大的便利是什么呢？没错，就是响应式。
如果你自己封装实现一个对象能不能保证它里面所有的属性做到响应式呢？当然也可以，只是自己封装可能稍微麻烦一些。
不用怀疑，Vuex就是为了提供这样一个在多个组件间共享状态的插件，用它就可以了。

管理什么状态

但是，有什么状态时需要我们在多个组件间共享的呢？

如果你做过大型开放，你一定遇到过多个状态，在多个界面间的共享问题。
比如用户的登录状态、用户名称、头像、地理位置信息等等。
比如商品的收藏、购物车中的物品等等。
这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的（待会儿我们就可以看到代码了，莫着急）。

OK，从理论上理解了状态管理之后，让我们从实际的代码再来看看状态管理。

毕竟，Talk is cheap, Show me the code.(来自Linus)

我们先来看看但界面的状态管理吧.

单界面的状态管理

我们知道，要在单个组件中进行状态管理是一件非常简单的事情

什么意思呢？我们来看下面的图片。

这图片中的三种东西，怎么理解呢？

State：不用多说，就是我们的状态。（你姑且可以当做就是data中的属性）
View：视图层，可以针对State的变化，显示不同的信息。（这个好理解吧？）
Actions：这里的Actions主要是用户的各种操作：点击、输入等等，会导致状态的改变。

写点代码，加深理解：

看下下方的代码效果, 肯定会实现吧?

在这个案例中，我们有木有状态需要管理呢？没错，就是个数counter。

counter需要某种方式被记录下来，也就是我们的State。

counter目前的值需要被显示在界面中，也就是我们的View部分。

界面发生某些操作时（我们这里是用户的点击，也可以是用户的input），需要去更新状态，也就是我们的Actions

这不就是上面的流程图了吗？

多界面状态管理

Vue已经帮我们做好了单个界面的状态管理，但是如果是多个界面呢？

多个试图都依赖同一个状态（一个状态改了，多个界面需要进行更新）
不同界面的Actions都想修改同一个状态（Home.vue需要修改，Profile.vue也需要修改这个状态）

也就是说对于某些状态(状态1/状态2/状态3)来说只属于我们某一个试图，但是也有一些状态(状态a/状态b/状态c)属于多个

试图共同想要维护的

状态1/状态2/状态3你放在自己的房间中，你自己管理自己用，没问题。
但是状态a/状态b/状态c我们希望交给一个大管家来统一帮助我们管理！！！
没错，Vuex就是为我们提供这个大管家的工具。

全局单例模式（大管家）

我们现在要做的就是将共享的状态抽取出来，交给我们的大管家，统一进行管理。
之后，你们每个试图，按照我规定好的规定，进行访问和修改等操作。
这就是Vuex背后的基本思想。

Vuex状态管理图

一起在来看一副官方给出的图片

当要修改state的状态时，不建议直接修改，应该经过Mutations进行修改

如果有异步请求，还要经过Actions

简单案列

定义状态和方法

使用状态并进行修改

效果

getters

有时候，我们需要从store中获取一些state变异后的状态，比如下面的Store中：

获取年龄大于22岁的

传参

获取大于指定年龄的

效果

Mutation

Mutation状态更新

定义状态和方法

使用状态并进行修改

效果

传参(两种风格)

在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数

参数被称为是mutation的载荷(Payload)

Mutation中的代码:

但是如果参数不是一个呢?

比如我们有很多参数需要传递.

这个时候, 我们通常会以对象的形式传递, 也就是payload是一个对象.

这个时候可以再从对象中取出相关的信息.

响应式注意点

如果在对象中没有定义并且初始化值的key普通操作是不能做到响应式的。

Action的异步操作

我们强调, 不要再Mutation中进行异步操作.

但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候怎么处理呢?
Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.

Action的基本使用代码如下:

context是什么?

context是和store对象具有相同方法和属性的对象.
也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等.
但是注意, 这里它们并不是同一个对象, 为什么呢? 我们后面学习Modules的时候, 再具体说.

这样的代码是否多此一举呢?

我们定义了actions, 然后又在actions中去进行commit, 这不是脱裤放屁吗?
事实上并不是这样, 如果在Vuex中有异步操作, 那么我们就可以在actions中完成了.

使用promise

前面我们学习ES6语法的时候说过, Promise经常用于异步操作.

在Action中, 我们可以将异步操作放在一个Promise中, 并且在成功或者失败后, 调用对应的resolve或reject.

OK, 我们来看下面的代码:

Modules

Module是模块的意思, 为什么在Vuex中我们要使用模块呢?

Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.
当应用变得非常复杂时,store对象就有可能变得相当臃肿.
为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等

我们按照什么样的方式来组织模块呢?

我们来看左边的代码

案列：

注意：

在调用模块中的状态时，要加上模块的名称$store.state.moduleA.name

在使用mutations,actions,getter时，可以直接调用，他默认是从根模块中寻找方法，找不到再到module中找

命名不要一样

看下代码中每一种方法的参数

最终目录结构

网络请求

选择什么网络模块

选择一: 传统的Ajax是基于XMLHttpRequest(XHR)

为什么不用它呢?

非常好解释, 配置和调用方式等非常混乱.
编码起来看起来就非常蛋疼.
所以真实开发中很少直接使用, 而是使用jQuery-Aj

选择二: 在前面的学习中, 我们经常会使用jQuery-Ajax

相对于传统的Ajax非常好用.

为什么不选择它呢?

首先, 我们先明确一点: 在Vue的整个开发中都是不需要使用jQuery了.
那么, 就意味着为了方便我们进行一个网络请求, 特意引用一个jQuery, 你觉得合理吗?
jQuery的代码1w+行.
Vue的代码才1w+行.
完全没有必要为了用网络请求就引用这个重量级的框架

选择三: 官方在Vue1.x的时候, 推出了Vue-resource.

Vue-resource的体积相对于jQuery小很多.
另外Vue-resource是官方推出的.

为什么不选择它呢?

在Vue2.0退出后, Vue作者就在GitHub的Issues中说明了去掉vue-resource, 并且以后也不会再更新.
那么意味着以后vue-reource不再支持新的版本时, 也不会再继续更新和维护.
对以后的项目开发和维护都存在很大的隐患.

选择四: axios

在说明不再继续更新和维护vue-resource的同时, 作者还推荐了一个框架: axios为什么不用它呢?

axios有非常多的优点, 并且用起来也非常方便.
稍后, 我们对他详细学习.

功能特点:

在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
等等

支持多种请求方式:

axios(config)
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

安装axios

npm install axios --save

发送请求

axios({
    url: 'http://123.207.32.32:8000/home/data',
    params: {
        type: 'pop',
        page: 1
    }
}).then(res=>{
    console.log(res);
})

发送并发请求

有时候, 我们可能需求同时发送两个请求

使用axios.all, 可以放入多个请求的数组.
axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2

axios.all([
    axios({
        url: 'http://123.207.32.32:8000/home/multidata'
    }),
    axios({
        url: 'http://123.207.32.32:8000/home/data',
        params: {
            type: 'pop',
            page: 1
        }
    })
]).then(result=>{
    console.log(result[0]);
    console.log(result[1]);
})

//使用axios.spread
]).then(axios.spread((res1,res2)=> {
    console.log(res1);
    console.log(res2);
}))

全局配置

在上面的示例中, 我们的BaseURL是固定的

事实上, 在开发中可能很多参数都是固定的.

这个时候我们可以进行一些抽取, 也可以利用axiox的全局配置

axios.defaults.baseURL='http://123.207.32.32:8000'
axios.defaults.timeout=5000   //单位是毫秒
axios.defaults.withCredentials=true

axios的实例

为什么要创建axios的实例呢?

当我们从axios模块中导入对象时, 使用的实例是默认的实例.
当给该实例设置一些默认配置时, 这些配置就被固定下来了.
但是后续开发中, 某些配置可能会不太一样.
比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.
这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.

axios的封装

有瑕疵的封装

其实我们的instance本身就是一个Promise

export function http(config) {
    const instance=axios.create({
        baseUrl: 'http://123.207.32.32:8000',
        timeout: 5000
    })
    return instance(config)
}

使用

拦截器

axios提供了拦截器，用于我们在发送每次请求或者得到相应后，进行对应的处理。

如何使用拦截器呢？

拦截可以做什么

请求拦截

config中一些信息不符合服务器的要求
开发一个loading组件，每次发送网络请求时，都希望在界面中显示一个请求的图标
某些网路请求(比如：登录(token)，必须携带一些特殊的信息)

请求拦截中错误拦截较少，通常都是配置相关的拦截

可能的错误比如请求超时，可以将页面跳转到一个错误页面中。

响应拦截

响应的成功拦截中，主要是对数据进行过滤。

响应的失败拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面。

官网

👉官网

迷雾总会解

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)

前端发展和架构先聊一下前端开发模式的发展。静态页面最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务端到客户端单向流通。开发人员也只关心页面的样式和内容即可。异步刷新，操作DOM1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言.随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。ajax盛行：2005年开始，ajax逐渐被前端开发人员所重视，因为不用刷新页
复制链接

扫一扫

专栏目录