小莫の咕哒君

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

前端发展和架构

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

静态页面

最初的网页以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：


<div id="app">
    
    <input type="text" v-model="num" />
    
    <input type="button" value="点我加妹子"  v-on:click="incr" /> 
    
    <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: "华哥"
},

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

v-pre

<div id="app">
    <p>{{message}}p>

    <p v-pre>{{message}}p>

div>

v-cloak

css:

html:


<p>{{message}}p>




<p v-cloak>{{message}}p>

<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-modelh1>
<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: "华哥",
            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: "华哥",
            language: [],
            sex: ""
},

原理

修饰符

v-on

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

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

基础语法

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

html:

 
<input type="button" value="点我加妹子"  v-on:click="incr" />

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：


<input type="button" value="点我加妹子"  v-on:click="incr" /> 

<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:


<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/[email protected]/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>GODDESSi>
                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，我是ifspan><br/>
<span v-show="show">你看到我了，你是true，我是showspan>

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:


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

js:

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

效果

组件

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

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

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

注册组件的基本步骤

使用Vue.extend()方法创建组件构造器

调用Vue.component()方法注册组件

在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: "",
    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: "hello,我是{{name}}
",
    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中加个name属性就可以成为具名插槽


<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
    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>

作用域插槽

数据在子组件中


<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
    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: "",
    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: "",
    //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>

子向父通信：$emit

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

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

来看这样的一个案例：

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

html

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

//全局组件
Vue.component("counter",{
    template: "",
    //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 [email protected] -g  #全局安装
npm install [email protected] --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 [email protected] [email protected] --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 [email protected] --save-dev

配置插件

效果

搭建本地服务器

引入依赖

npm install --save-dev [email protected]

配置文件

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


<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
    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:`   
      
            登录页
            用户名:

            密 码:

            
        
    `,
}

const registerFrame={
    template:`   //组件内只能有一个根标签
      
            注册页
            用 户 名:

            密  码:

            确认密码:

            
        
    `,
}

&ensp和&emsp

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

它叫“全角空格”，全称是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>

通过来指定一个锚点，当路由的路径匹配时，vue-router会自动把对应组件放到锚点位置进行渲染
通过指定一个跳转链接，当点击时，会触发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

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

还有一些其他属性:

tag: tag可以指定之后渲染成什么组件, 比如上面的代码会被渲染成一个
元素, 而不是

replace: replace不会留下history记录, 所以指定replace的情况下, 后退键返回不能返回到上一个页面中

active-class: 当对应的路由匹配成功时, 会自动给当前元素设置一个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应用中, 如何改变网页的标题呢?

网页标题是通过来显示的, 但是SPA只有一个固定的HTML, 切换不同的页面时, 标题并不会改变.</p> </li> <li> <p>但是我们可以通过JavaScript来修改<title>的内容.window.document.title = ‘新的标题’.</p> </li> <li> <p>那么在Vue项目中, 在哪里修改? 什么时候修改比较合适呢?</p> </li> </ul> <p>普通的修改方式:</p> <ul> <li> <p>我们比较容易想到的修改标题的位置是每一个路由对应的组件.vue文件中.</p> </li> <li> <p>通过mounted声明周期函数, 执行对应的代码进行修改即可.</p> </li> <li> <p>但是当页面比较多时, 这种方式不容易维护(因为需要在多个页面执行类似的代码).</p> </li> </ul> <p>有没有更好的办法呢? 使用导航守卫即可.</p> <p>什么是导航守卫?</p> <ul> <li> <p>vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.</p> </li> <li> <p>vue-router提供了<code>beforeEach</code>和<code>afterEach</code>的钩子函数, 它们会在路由即将改变前和改变后触发.</p> </li> </ul> <p><a href="http://img.e-com-net.com/image/info8/79798bf7f0064400bdc413ef2e1520e3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/79798bf7f0064400bdc413ef2e1520e3.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第90张图片" width="650" height="506" style="border:1px solid black;"></a></p> <p>使用前置守卫给每个路由在跳转前加上title。</p> <p><code>注意：因为有children，所以不要直接使用meta，而是使用matched[0].meta</code></p> <p><a href="http://img.e-com-net.com/image/info8/3721ff7882ec4998b9d14ab064901491.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3721ff7882ec4998b9d14ab064901491.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第91张图片" width="650" height="295" style="border:1px solid black;"></a></p> <h3>导航守卫</h3> <h4>全局前置守卫</h4> <p>你可以使用 <code>router.beforeEach</code> 注册一个全局前置守卫：</p> <pre><code class="prism language-js"><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> router<span class="token punctuation">.</span><span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// ...</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre> <p>当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 <strong>等待中</strong>。</p> <p>每个守卫方法接收三个参数：</p> <ul> <li><strong><code>to: Route</code></strong>: 即将要进入的目标路由对象</li> <li><strong><code>from: Route</code></strong>: 当前导航正要离开的路由</li> <li><strong><code>next: Function</code></strong>: 一定要调用该方法来 <strong>resolve</strong> 这个钩子。执行效果依赖 <code>next</code> 方法的调用参数。 <ul> <li><strong><code>next()</code></strong>: 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 <strong>confirmed</strong> (确认的)。</li> <li><strong><code>next(false)</code></strong>: 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 <code>from</code> 路由对应的地址。</li> <li><strong><code>next('/')</code> 或者 <code>next({ path: '/' })</code></strong>: 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 <code>next</code> 传递任意位置对象，且允许设置诸如 <code>replace: true</code>、<code>name: 'home'</code> 之类的选项以及任何用在 <code>router-link</code> 的 <code>to</code> prop 或 <code>router.push</code> 中的选项。</li> <li><strong><code>next(error)</code></strong>: (2.4.0+) 如果传入 <code>next</code> 的参数是一个 <code>Error</code> 实例，则导航会被终止且该错误会被传递给 <code>router.onError()</code> 注册过的回调。</li> </ul> </li> </ul> <p><strong>确保要调用 <code>next</code> 方法，否则钩子就不会被 resolved</strong>。</p> <h4>全局后置钩子</h4> <p>你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 <code>next</code> 函数也不会改变导航本身：</p> <pre><code class="prism language-js"><span class="token comment">//后置钩子(hook)</span> router<span class="token punctuation">.</span><span class="token function">afterEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>to<span class="token punctuation">,</span><span class="token keyword">from</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'-----'</span><span class="token punctuation">)</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre> <h4>全局解析守卫</h4> <p>在 2.5.0+ 你可以用 <code>router.beforeResolve</code> 注册一个全局守卫。这和 <code>router.beforeEach</code> 类似，区别是在导航被确认之前，<strong>同时在所有组件内守卫和异步路由组件被解析之后</strong>，解析守卫就被调用。</p> <h4>路由独享的守卫</h4> <pre><code class="prism language-js"> <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'/about'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=></span><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">"../views/About"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> title<span class="token punctuation">:</span> <span class="token string">'关于'</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> beforeEnter<span class="token punctuation">:</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span><span class="token keyword">from</span><span class="token punctuation">,</span>next<span class="token punctuation">)</span><span class="token operator">=></span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'beforeEnter'</span><span class="token punctuation">)</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> </code></pre> <p>这些守卫与全局前置守卫的方法参数是一样的。</p> <h4>组件内的守卫</h4> <p>最后，你可以在路由组件内直接定义以下路由导航守卫：</p> <ul> <li><code>beforeRouteEnter</code></li> <li><code>beforeRouteUpdate</code> (2.2 新增)</li> <li><code>beforeRouteLeave</code></li> </ul> <pre><code class="prism language-js"><span class="token keyword">const</span> Foo <span class="token operator">=</span> <span class="token punctuation">{</span> template<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`...`</span></span><span class="token punctuation">,</span> <span class="token function">beforeRouteEnter</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 在渲染该组件的对应路由被 confirm 前调用</span> <span class="token comment">// 不！能！获取组件实例 `this`</span> <span class="token comment">// 因为当守卫执行前，组件实例还没被创建</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">beforeRouteUpdate</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 在当前路由改变，但是该组件被复用时调用</span> <span class="token comment">// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，</span> <span class="token comment">// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。</span> <span class="token comment">// 可以访问组件实例 `this`</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">beforeRouteLeave</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// 导航离开该组件的对应路由时调用</span> <span class="token comment">// 可以访问组件实例 `this`</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p><code>beforeRouteEnter</code> 守卫 <strong>不能</strong> 访问 <code>this</code>，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。</p> <p>不过，你可以通过传一个回调给 <code>next</code>来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。</p> <pre><code class="prism language-js"><span class="token function">beforeRouteEnter</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">next</span><span class="token punctuation">(</span>vm <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">// 通过 `vm` 访问组件实例</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> </code></pre> <p>注意 <code>beforeRouteEnter</code> 是支持给 <code>next</code> 传递回调的唯一守卫。对于 <code>beforeRouteUpdate</code> 和 <code>beforeRouteLeave</code> 来说，<code>this</code> 已经可用了，所以<strong>不支持</strong>传递回调，因为没有必要了。</p> <pre><code class="prism language-js"><span class="token function">beforeRouteUpdate</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment">// just use `this`</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> to<span class="token punctuation">.</span>params<span class="token punctuation">.</span>name <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> </code></pre> <p>这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 <code>next(false)</code> 来取消。</p> <pre><code class="prism language-js"><span class="token function">beforeRouteLeave</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> answer <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token string">'Do you really want to leave? you have unsaved changes!'</span><span class="token punctuation">)</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>answer<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token function">next</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <h4>导航解析流程</h4> <ol> <li>导航被触发。</li> <li>在失活的组件里调用离开守卫。</li> <li>调用全局的 <code>beforeEach</code> 守卫。</li> <li>在重用的组件里调用 <code>beforeRouteUpdate</code> 守卫 (2.2+)。</li> <li>在路由配置里调用 <code>beforeEnter</code>。</li> <li>解析异步路由组件。</li> <li>在被激活的组件里调用 <code>beforeRouteEnter</code>。</li> <li>调用全局的 <code>beforeResolve</code> 守卫 (2.5+)。</li> <li>导航被确认。</li> <li>调用全局的 <code>afterEach</code> 钩子。</li> <li>触发 DOM 更新。</li> <li>用创建好的实例调用 <code>beforeRouteEnter</code> 守卫中传给 <code>next</code> 的回调函数。</li> </ol> <h3>keep-alive</h3> <p>keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。</p> <p>它们有两个非常重要的属性:</p> <ul> <li> <p><code>include</code> - 字符串或正则表达，只有匹配的组件会被缓存</p> </li> <li> <p><code>exclude</code>- 字符串或正则表达式，任何匹配的组件都不会被缓存</p> <pre><code class="prism language-js"><span class="token operator"><</span>keep<span class="token operator">-</span>alive exclude<span class="token operator">=</span><span class="token string">"About,Home"</span><span class="token operator">></span> <span class="token operator"><</span>router<span class="token operator">-</span>view<span class="token operator">/</span><span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>keep<span class="token operator">-</span>alive<span class="token operator">></span> </code></pre> </li> </ul> <p>router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存：</p> <p><img src="http://img.e-com-net.com/image/info8/ea69efdb891944899b028cb8aa99274f.jpg" alt="" width="0" height="0"></p> <p>通过create声明周期函数来验证</p> <p>不使用keep-alive,在两个组件中跳转，每次回到这个组件，就会重新创建一次，离开就销毁一次</p> <p><a href="http://img.e-com-net.com/image/info8/0619f9b96933419c8653fd7bb8df1112.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0619f9b96933419c8653fd7bb8df1112.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第92张图片" width="650" height="304" style="border:1px solid black;"></a></p> <p>使用keep-alive,只创建一次</p> <p><a href="http://img.e-com-net.com/image/info8/29e09c6dc056450aa8fc12835cb5b8d1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/29e09c6dc056450aa8fc12835cb5b8d1.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第93张图片" width="650" height="276" style="border:1px solid black;"></a></p> <h4>引发的问题</h4> <p>我如果想重新回到该组件，还是原来的路径怎么办呢？因为我回到这个组件后，还是去到默认的组件</p> <blockquote> <p>进行路径记录</p> </blockquote> <p><a href="http://img.e-com-net.com/image/info8/17c98e5ec88f4a2ea5120df695a335b0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/17c98e5ec88f4a2ea5120df695a335b0.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第94张图片" width="650" height="442" style="border:1px solid black;"></a></p> <blockquote> <p>path初始是默认路径，在进入的时候跳转到记录的path,在离开的时候记录当前的path</p> <p>ps：钩子函数一定要选择正确</p> </blockquote> <h3>actived和deactived钩子</h3> <blockquote> <p>使用看上方</p> <p>这两个函数只有使用了keep-alive才能使用</p> </blockquote> <h2>导航栏实践</h2> <h3>目录结构</h3> <p><img src="http://img.e-com-net.com/image/info8/f1db6e17fe014abe911585982e2b49fb.jpg" alt="" width="0" height="0"></p> <h3>TabBar</h3> <p><img src="http://img.e-com-net.com/image/info8/2b25566dbd9340a5a9f776ee8f36eb81.jpg" alt="" width="0" height="0"></p> <h3>TabBarItem</h3> <p><img src="http://img.e-com-net.com/image/info8/8f265aa129944dc081bdc51ae7bd42b4.jpg" alt="" width="0" height="0"></p> <h3>MainTabBar</h3> <p><a href="http://img.e-com-net.com/image/info8/8359577168324b65bc75f3808ecfa2ee.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8359577168324b65bc75f3808ecfa2ee.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第95张图片" width="650" height="479" style="border:1px solid black;"></a></p> <h3>App</h3> <p><a href="http://img.e-com-net.com/image/info8/6fd62faeb6304644a4a8923c7834a53d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6fd62faeb6304644a4a8923c7834a53d.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第96张图片" width="650" height="509" style="border:1px solid black;"></a></p> <h3>index.js</h3> <p><a href="http://img.e-com-net.com/image/info8/beec2cd6e7e34d288767cc1f6a26fae0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/beec2cd6e7e34d288767cc1f6a26fae0.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第97张图片" width="650" height="484" style="border:1px solid black;"></a></p> <h2>Vuex</h2> <h3>是什么</h3> <p>官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。</p> <ul> <li> <p>它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。</p> </li> <li> <p>Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。</p> </li> </ul> <p>状态管理到底是什么？</p> <ul> <li> <p>状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人捉摸不透。</p> </li> <li> <p>其实，你可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。</p> </li> <li> <p>然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。</p> </li> <li> <p>那么，多个组件是不是就可以共享这个对象中的所有变量属性了呢？</p> </li> </ul> <p>等等，如果是这样的话，为什么官方还要专门出一个插件Vuex呢？难道我们不能自己封装一个对象来管理吗？</p> <ul> <li> <p>当然可以，只是我们要先想想VueJS带给我们最大的便利是什么呢？没错，就是响应式。</p> </li> <li> <p>如果你自己封装实现一个对象能不能保证它里面所有的属性做到响应式呢？当然也可以，只是自己封装可能稍微麻烦一些。</p> </li> <li> <p>不用怀疑，Vuex就是为了提供这样一个在多个组件间共享状态的插件，用它就可以了。</p> </li> </ul> <h3>管理什么状态</h3> <p>但是，有什么状态时需要我们在多个组件间共享的呢？</p> <ul> <li> <p>如果你做过大型开放，你一定遇到过多个状态，在多个界面间的共享问题。</p> </li> <li> <p>比如用户的登录状态、用户名称、头像、地理位置信息等等。</p> </li> <li> <p>比如商品的收藏、购物车中的物品等等。</p> </li> <li> <p>这些状态信息，我们都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的（待会儿我们就可以看到代码了，莫着急）。</p> </li> </ul> <p>OK，从理论上理解了状态管理之后，让我们从实际的代码再来看看状态管理。</p> <ul> <li>毕竟，Talk is cheap, Show me the code.(来自Linus)</li> </ul> <p>我们先来看看但界面的状态管理吧.</p> <h3>单界面的状态管理</h3> <p>我们知道，要在单个组件中进行状态管理是一件非常简单的事情</p> <p>什么意思呢？我们来看下面的图片。</p> <p>这图片中的三种东西，怎么理解呢？</p> <ul> <li> <p>State：不用多说，就是我们的状态。（你姑且可以当做就是data中的属性）</p> </li> <li> <p>View：视图层，可以针对State的变化，显示不同的信息。（这个好理解吧？）</p> </li> <li> <p>Actions：这里的Actions主要是用户的各种操作：点击、输入等等，会导致状态的改变。</p> </li> </ul> <p>写点代码，加深理解：</p> <p>看下下方的代码效果, 肯定会实现吧?</p> <p><a href="http://img.e-com-net.com/image/info8/67ebc0fe7bca4f139848a1e65317e681.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/67ebc0fe7bca4f139848a1e65317e681.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第98张图片" width="601" height="629" style="border:1px solid black;"></a></p> <p>在这个案例中，我们有木有状态需要管理呢？没错，就是个数counter。</p> <p>counter需要某种方式被记录下来，也就是我们的State。</p> <p>counter目前的值需要被显示在界面中，也就是我们的View部分。</p> <p>界面发生某些操作时（我们这里是用户的点击，也可以是用户的input），需要去更新状态，也就是我们的Actions</p> <p>这不就是上面的流程图了吗？</p> <h3>多界面状态管理</h3> <p>Vue已经帮我们做好了单个界面的状态管理，但是如果是多个界面呢？</p> <ul> <li> <p>多个试图都依赖同一个状态（一个状态改了，多个界面需要进行更新）</p> </li> <li> <p>不同界面的Actions都想修改同一个状态（Home.vue需要修改，Profile.vue也需要修改这个状态）</p> </li> </ul> <p>也就是说对于某些状态(状态1/状态2/状态3)来说只属于我们某一个试图，但是也有一些状态(状态a/状态b/状态c)属于多个</p> <p>试图共同想要维护的</p> <ul> <li> <p>状态1/状态2/状态3你放在自己的房间中，你自己管理自己用，没问题。</p> </li> <li> <p>但是状态a/状态b/状态c我们希望交给一个大管家来统一帮助我们管理！！！</p> </li> <li> <p>没错，Vuex就是为我们提供这个大管家的工具。</p> </li> </ul> <p>全局单例模式（大管家）</p> <ul> <li> <p>我们现在要做的就是将共享的状态抽取出来，交给我们的大管家，统一进行管理。</p> </li> <li> <p>之后，你们每个试图，按照我规定好的规定，进行访问和修改等操作。</p> </li> <li> <p>这就是Vuex背后的基本思想。</p> </li> </ul> <h3>Vuex状态管理图</h3> <p>一起在来看一副官方给出的图片</p> <p><a href="http://img.e-com-net.com/image/info8/63ede68ceecd4c19b891c6d3c43ce251.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/63ede68ceecd4c19b891c6d3c43ce251.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第99张图片" width="624" height="491" style="border:1px solid black;"></a></p> <blockquote> <p>当要修改state的状态时，不建议直接修改，应该经过Mutations进行修改</p> <p>如果有异步请求，还要经过Actions</p> </blockquote> <h3>简单案列</h3> <p>定义状态和方法</p> <p><a href="http://img.e-com-net.com/image/info8/93a00ecd56674fef98c8a9b188b768e7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/93a00ecd56674fef98c8a9b188b768e7.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第100张图片" width="650" height="388" style="border:1px solid black;"></a></p> <p>使用状态并进行修改</p> <p><a href="http://img.e-com-net.com/image/info8/4596753774e949859fbfe5650c19de03.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4596753774e949859fbfe5650c19de03.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第101张图片" width="650" height="334" style="border:1px solid black;"></a></p> <p>效果</p> <p><a href="http://img.e-com-net.com/image/info8/33a6921a5f614c3b836a2df164cb57ed.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/33a6921a5f614c3b836a2df164cb57ed.gif" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第102张图片" width="1910" height="995" style="border:1px solid black;"></a></p> <h3>getters</h3> <p>有时候，我们需要从store中获取一些state变异后的状态，比如下面的Store中：</p> <p><img src="http://img.e-com-net.com/image/info8/0ab2aabfb23e4b468f88cc4e5464cd01.jpg" alt="" width="0" height="0"></p> <p><strong>获取年龄大于22岁的</strong></p> <p><a href="http://img.e-com-net.com/image/info8/d42fca909efb40bbacd18c69f65a9086.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/d42fca909efb40bbacd18c69f65a9086.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第103张图片" width="650" height="426" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/09235c51cd33405187e0f986e3612ca6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/09235c51cd33405187e0f986e3612ca6.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第104张图片" width="650" height="322" style="border:1px solid black;"></a></p> <h4>传参</h4> <p><strong>获取大于指定年龄的</strong></p> <p><a href="http://img.e-com-net.com/image/info8/9e64c30439c04d94bd772f62a447d544.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9e64c30439c04d94bd772f62a447d544.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第105张图片" width="650" height="393" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/797df21c225b4a96ab1e8b5cd56f235a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/797df21c225b4a96ab1e8b5cd56f235a.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第106张图片" width="650" height="315" style="border:1px solid black;"></a></p> <h4><strong>效果</strong></h4> <p><a href="http://img.e-com-net.com/image/info8/f94df51764b64a1f847a7ec85a65b744.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f94df51764b64a1f847a7ec85a65b744.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第107张图片" width="650" height="521" style="border:1px solid black;"></a></p> <h3>Mutation</h3> <h4>Mutation状态更新</h4> <p>定义状态和方法</p> <p><a href="http://img.e-com-net.com/image/info8/93a00ecd56674fef98c8a9b188b768e7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/93a00ecd56674fef98c8a9b188b768e7.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第108张图片" width="650" height="388" style="border:1px solid black;"></a></p> <p>使用状态并进行修改</p> <p><a href="http://img.e-com-net.com/image/info8/4596753774e949859fbfe5650c19de03.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4596753774e949859fbfe5650c19de03.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第109张图片" width="650" height="334" style="border:1px solid black;"></a></p> <p>效果</p> <p><a href="http://img.e-com-net.com/image/info8/33a6921a5f614c3b836a2df164cb57ed.gif" target="_blank"><img src="http://img.e-com-net.com/image/info8/33a6921a5f614c3b836a2df164cb57ed.gif" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第110张图片" width="1910" height="995" style="border:1px solid black;"></a></p> <h4>传参(两种风格)</h4> <p>在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数</p> <p>参数被称为是mutation的载荷(Payload)</p> <p>Mutation中的代码:</p> <p><img src="http://img.e-com-net.com/image/info8/fb1e59f3e0cf44348058b84cba29e10d.jpg" alt="" width="0" height="0"></p> <p><strong>但是如果参数不是一个呢?</strong></p> <p>比如我们有很多参数需要传递.</p> <p>这个时候, 我们通常会以对象的形式传递, 也就是payload是一个对象.</p> <p>这个时候可以再从对象中取出相关的信息.</p> <p><img src="http://img.e-com-net.com/image/info8/9e09bd56a6f44241aa52c6bdfe1a5bb0.jpg" alt="" width="0" height="0"></p> <p><a href="http://img.e-com-net.com/image/info8/e5bdc0ed4a424b2d9879644dd9433a83.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e5bdc0ed4a424b2d9879644dd9433a83.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第111张图片" width="650" height="338" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/8d8f4a01c2b740758e428c4aa0c76753.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8d8f4a01c2b740758e428c4aa0c76753.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第112张图片" width="650" height="330" style="border:1px solid black;"></a></p> <h3>响应式注意点</h3> <p><img src="http://img.e-com-net.com/image/info8/dcacce8d01864cd69972cdae183e8488.jpg" alt="" width="0" height="0"></p> <p><a href="http://img.e-com-net.com/image/info8/3301e338819b48109cfdb2afdcac0014.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3301e338819b48109cfdb2afdcac0014.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第113张图片" width="650" height="443" style="border:1px solid black;"></a></p> <blockquote> <p>如果在对象中没有定义并且初始化值的key普通操作是不能做到响应式的。</p> </blockquote> <h3>Action的异步操作</h3> <p>我们强调, 不要再Mutation中进行异步操作.</p> <ul> <li> <p>但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候怎么处理呢?</p> </li> <li> <p>Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.</p> </li> </ul> <p>Action的基本使用代码如下:</p> <p>context是什么?</p> <ul> <li> <p>context是和store对象具有相同方法和属性的对象.</p> </li> <li> <p>也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等.</p> </li> <li> <p>但是注意, 这里它们并不是同一个对象, 为什么呢? 我们后面学习Modules的时候, 再具体说.</p> </li> </ul> <p>这样的代码是否多此一举呢?</p> <ul> <li> <p>我们定义了actions, 然后又在actions中去进行commit, 这不是脱裤放屁吗?</p> </li> <li> <p>事实上并不是这样, 如果在Vuex中有异步操作, 那么我们就可以在actions中完成了.</p> </li> </ul> <p><a href="http://img.e-com-net.com/image/info8/dacb4c0c4a954ccfa920d556fa6517f7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/dacb4c0c4a954ccfa920d556fa6517f7.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第114张图片" width="525" height="376" style="border:1px solid black;"></a></p> <p>使用promise</p> <p>前面我们学习ES6语法的时候说过, Promise经常用于异步操作.</p> <p>在Action中, 我们可以将异步操作放在一个Promise中, 并且在成功或者失败后, 调用对应的resolve或reject.</p> <p>OK, 我们来看下面的代码:</p> <p><img src="http://img.e-com-net.com/image/info8/b0f36d58a1a441f1b7835a2c47d5eed3.jpg" alt="" width="0" height="0"></p> <h3>Modules</h3> <p>Module是模块的意思, 为什么在Vuex中我们要使用模块呢?</p> <ul> <li> <p>Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.</p> </li> <li> <p>当应用变得非常复杂时,store对象就有可能变得相当臃肿.</p> </li> <li> <p>为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等</p> </li> </ul> <p>我们按照什么样的方式来组织模块呢?</p> <ul> <li>我们来看左边的代码</li> </ul> <p><a href="http://img.e-com-net.com/image/info8/3879c7f6bf5d4090845bba2872f298d9.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3879c7f6bf5d4090845bba2872f298d9.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第115张图片" width="539" height="512" style="border:1px solid black;"></a></p> <p>案列：</p> <p><a href="http://img.e-com-net.com/image/info8/c1a4d780336b43c1b819915da279358d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/c1a4d780336b43c1b819915da279358d.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第116张图片" width="650" height="605" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/0d9bee7470f245d5bab928f41f88486a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0d9bee7470f245d5bab928f41f88486a.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第117张图片" width="566" height="333" style="border:1px solid black;"></a></p> <p><img src="http://img.e-com-net.com/image/info8/58066f21bc1346679b6b7e91fd264791.jpg" alt="" width="0" height="0"></p> <blockquote> <p>注意：</p> <ul> <li> <p>在调用模块中的状态时，要加上模块的名称<code>$store.state.moduleA.name</code></p> </li> <li> <p>在使用mutations,actions,getter时，可以直接调用，他默认是从根模块中寻找方法，找不到再到module中找</p> </li> </ul> <p><code>命名不要一样</code></p> <ul> <li>看下代码中每一种方法的参数</li> </ul> </blockquote> <h3>最终目录结构</h3> <p><a href="http://img.e-com-net.com/image/info8/6dade71736dc45e8a312a1cf7228c17f.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/6dade71736dc45e8a312a1cf7228c17f.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第118张图片" width="342" height="552" style="border:1px solid black;"></a></p> <h2>网络请求</h2> <h3>选择什么网络模块</h3> <h4>选择一: 传统的Ajax是基于XMLHttpRequest(XHR)</h4> <p>为什么不用它呢?</p> <ul> <li> <p>非常好解释, 配置和调用方式等非常混乱.</p> </li> <li> <p>编码起来看起来就非常蛋疼.</p> </li> <li> <p>所以真实开发中很少直接使用, 而是使用jQuery-Aj</p> </li> </ul> <h4>选择二: 在前面的学习中, 我们经常会使用jQuery-Ajax</h4> <ul> <li>相对于传统的Ajax非常好用.</li> </ul> <p>为什么不选择它呢?</p> <ul> <li>首先, 我们先明确一点: 在Vue的整个开发中都是不需要使用jQuery了.</li> <li>那么, 就意味着为了方便我们进行一个网络请求, 特意引用一个jQuery, 你觉得合理吗?</li> <li>jQuery的代码1w+行.</li> <li>Vue的代码才1w+行.</li> <li>完全没有必要为了用网络请求就引用这个重量级的框架</li> </ul> <h4>选择三: 官方在Vue1.x的时候, 推出了Vue-resource.</h4> <ul> <li>Vue-resource的体积相对于jQuery小很多.</li> <li>另外Vue-resource是官方推出的.</li> </ul> <p>为什么不选择它呢?</p> <ul> <li>在Vue2.0退出后, Vue作者就在GitHub的Issues中说明了去掉vue-resource, 并且以后也不会再更新.</li> <li>那么意味着以后vue-reource不再支持新的版本时, 也不会再继续更新和维护.</li> <li>对以后的项目开发和维护都存在很大的隐患.</li> </ul> <p>选择四: axios</p> <p>在说明不再继续更新和维护vue-resource的同时, 作者还推荐了一个框架: axios为什么不用它呢?</p> <ul> <li>axios有非常多的优点, 并且用起来也非常方便.</li> <li>稍后, 我们对他详细学习.</li> </ul> <p>功能特点:</p> <ul> <li> <p>在浏览器中发送 XMLHttpRequests 请求</p> </li> <li> <p>在 node.js 中发送 http请求</p> </li> <li> <p>支持 Promise API</p> </li> <li> <p>拦截请求和响应</p> </li> <li> <p>转换请求和响应数据</p> </li> <li> <p>等等</p> </li> </ul> <p>支持多种请求方式:</p> <ul> <li>axios(config)</li> <li>axios.request(config)</li> <li>axios.get(url[, config])</li> <li>axios.delete(url[, config])</li> <li>axios.head(url[, config])</li> <li>axios.post(url[, data[, config]])</li> <li>axios.put(url[, data[, config]])</li> <li>axios.patch(url[, data[, config]])</li> </ul> <h3>安装axios</h3> <pre><code class="prism language-java">npm install axios <span class="token operator">--</span>save </code></pre> <h3>发送请求</h3> <pre><code class="prism language-js"><span class="token function">axios</span><span class="token punctuation">(</span><span class="token punctuation">{</span> url<span class="token punctuation">:</span> <span class="token string">'http://123.207.32.32:8000/home/data'</span><span class="token punctuation">,</span> params<span class="token punctuation">:</span> <span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">'pop'</span><span class="token punctuation">,</span> page<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>res<span class="token operator">=></span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </code></pre> <h3>发送并发请求</h3> <p>有时候, 我们可能需求同时发送两个请求</p> <ul> <li> <p>使用axios.all, 可以放入多个请求的数组.</p> </li> <li> <p>axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2</p> </li> </ul> <pre><code class="prism language-js">axios<span class="token punctuation">.</span><span class="token function">all</span><span class="token punctuation">(</span><span class="token punctuation">[</span> <span class="token function">axios</span><span class="token punctuation">(</span><span class="token punctuation">{</span> url<span class="token punctuation">:</span> <span class="token string">'http://123.207.32.32:8000/home/multidata'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function">axios</span><span class="token punctuation">(</span><span class="token punctuation">{</span> url<span class="token punctuation">:</span> <span class="token string">'http://123.207.32.32:8000/home/data'</span><span class="token punctuation">,</span> params<span class="token punctuation">:</span> <span class="token punctuation">{</span> type<span class="token punctuation">:</span> <span class="token string">'pop'</span><span class="token punctuation">,</span> page<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>result<span class="token operator">=></span><span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token comment">//使用axios.spread</span> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>axios<span class="token punctuation">.</span><span class="token function">spread</span><span class="token punctuation">(</span><span class="token punctuation">(</span>res1<span class="token punctuation">,</span>res2<span class="token punctuation">)</span><span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res1<span class="token punctuation">)</span><span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>res2<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span> </code></pre> <h3>全局配置</h3> <p>在上面的示例中, 我们的BaseURL是固定的</p> <p>事实上, 在开发中可能很多参数都是固定的.</p> <p>这个时候我们可以进行一些抽取, 也可以利用axiox的全局配置</p> <p><a href="http://img.e-com-net.com/image/info8/26a6e76acbc24ea98bfdc9df62076b34.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/26a6e76acbc24ea98bfdc9df62076b34.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第119张图片" width="650" height="313" style="border:1px solid black;"></a></p> <pre><code class="prism language-js">axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>baseURL<span class="token operator">=</span><span class="token string">'http://123.207.32.32:8000'</span> axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>timeout<span class="token operator">=</span><span class="token number">5000</span> <span class="token comment">//单位是毫秒</span> axios<span class="token punctuation">.</span>defaults<span class="token punctuation">.</span>withCredentials<span class="token operator">=</span><span class="token boolean">true</span> </code></pre> <h3>axios的实例</h3> <p>为什么要创建axios的实例呢?</p> <ul> <li> <p>当我们从axios模块中导入对象时, 使用的实例是默认的实例.</p> </li> <li> <p>当给该实例设置一些默认配置时, 这些配置就被固定下来了.</p> </li> <li> <p>但是后续开发中, 某些配置可能会不太一样.</p> </li> <li> <p>比如某些请求需要使用特定的baseURL或者timeout或者content-Type等.</p> </li> <li> <p>这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.</p> </li> </ul> <p><a href="http://img.e-com-net.com/image/info8/224ebbb02fef42269854fba7fc64c68d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/224ebbb02fef42269854fba7fc64c68d.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第120张图片" width="650" height="278" style="border:1px solid black;"></a></p> <h3>axios的封装</h3> <p>有瑕疵的封装</p> <p><img src="http://img.e-com-net.com/image/info8/fee83dabb7fa48ecaaf111ab71cbe3d6.jpg" alt="" width="0" height="0"></p> <blockquote> <p>其实我们的instance本身就是一个Promise</p> </blockquote> <p><a href="http://img.e-com-net.com/image/info8/7fb43c451fbc4508b939acce62659a96.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7fb43c451fbc4508b939acce62659a96.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第121张图片" width="650" height="132" style="border:1px solid black;"></a></p> <pre><code class="prism language-js"><span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">http</span><span class="token punctuation">(</span>config<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> instance<span class="token operator">=</span>axios<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span> baseUrl<span class="token punctuation">:</span> <span class="token string">'http://123.207.32.32:8000'</span><span class="token punctuation">,</span> timeout<span class="token punctuation">:</span> <span class="token number">5000</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token function">instance</span><span class="token punctuation">(</span>config<span class="token punctuation">)</span> <span class="token punctuation">}</span> </code></pre> <p>使用</p> <p><a href="http://img.e-com-net.com/image/info8/3a6da3032a154818ba1618c2767a93cc.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3a6da3032a154818ba1618c2767a93cc.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第122张图片" width="650" height="199" style="border:1px solid black;"></a></p> <h3>拦截器</h3> <p>axios提供了拦截器，用于我们在发送每次请求或者得到相应后，进行对应的处理。</p> <p>如何使用拦截器呢？</p> <p><a href="http://img.e-com-net.com/image/info8/0c624eed33a8460abd039f46d1811f55.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0c624eed33a8460abd039f46d1811f55.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第123张图片" width="650" height="470" style="border:1px solid black;"></a></p> <p><a href="http://img.e-com-net.com/image/info8/81a88957437e4b6fb4c0b281808ea1a0.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/81a88957437e4b6fb4c0b281808ea1a0.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第124张图片" width="650" height="263" style="border:1px solid black;"></a></p> <h4>拦截可以做什么</h4> <p><strong>请求拦截</strong></p> <p><a href="http://img.e-com-net.com/image/info8/dab73128150342ffb28ee58e6e9a3d9e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/dab73128150342ffb28ee58e6e9a3d9e.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第125张图片" width="650" height="224" style="border:1px solid black;"></a></p> <ul> <li> <p>config中一些信息不符合服务器的要求</p> </li> <li> <p>开发一个loading组件，每次发送网络请求时，都希望在界面中显示一个请求的图标</p> </li> <li> <p>某些网路请求(比如：登录(token)，必须携带一些特殊的信息)</p> </li> </ul> <p>请求拦截中错误拦截较少，通常都是配置相关的拦截</p> <p>可能的错误比如请求超时，可以将页面跳转到一个错误页面中。</p> <p><strong>响应拦截</strong></p> <p>响应的成功拦截中，主要是对数据进行过滤。</p> <p><img src="http://img.e-com-net.com/image/info8/005e95e301634a318956f6bdca1beb90.jpg" alt="" width="0" height="0"></p> <p><img src="http://img.e-com-net.com/image/info8/484520ee6f704a2394295383d0886789.jpg" alt="" width="0" height="0"></p> <p>响应的失败拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面。</p> <p><a href="http://img.e-com-net.com/image/info8/8cb9e65719dc47e2a2ef2f8c7b05220c.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8cb9e65719dc47e2a2ef2f8c7b05220c.jpg" alt="Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)_第126张图片" width="462" height="262" style="border:1px solid black;"></a></p> <h2>官网</h2> <p> 官网</p> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1290922716370640896"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(js框架,前端,vue)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1833406654624919552.htm" title="前端Axios搭配Vue（认清Axios，Axios结合Vue发出Ajax请求，返回JSON数据案例！简洁易懂。）" target="_blank">前端Axios搭配Vue（认清Axios，Axios结合Vue发出Ajax请求，返回JSON数据案例！简洁易懂。）</a> <span class="text-muted">酸奶代码</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a> <div>一.什么是Axios1.axios是独立于vue的一个项目，不是Vue的一部分2.axios通常和Vue一起使用，实现Ajax操作3.Axios是一个基于promise的HTTP库axios官方文档二.引入Axios库文件1.可以直接引用2.可以下载Axios的js文件导入下载此js文件三.使用Axios配合Vue发出Ajax请求案例在Vue中使用Axios，向服务器发送Ajax请求，将获取的js</div> </li> <li><a href="/article/1833403380370862080.htm" title="Springboot 项目中引入WebSocket后，单元测试出现错误，前端开发揭秘" target="_blank">Springboot 项目中引入WebSocket后，单元测试出现错误，前端开发揭秘</a> <span class="text-muted">杭州湾Java仔</span> <a class="tag" taget="_blank" href="/search/2024%E5%B9%B4%E5%89%8D%E7%AB%AF%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">2024年前端程序员</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>java.lang.IllegalStateException:FailedtoloadApplicationContextatorg.springframework.test.context.cache.DefaultCacheAwareContextLoaderDelegate.loadContext(DefaultCacheAwareContextLoaderDelegate.java:12</div> </li> <li><a href="/article/1833398714086027264.htm" title="vue-element根据后端返回的值，在表格内生成二维码并且下载" target="_blank">vue-element根据后端返回的值，在表格内生成二维码并且下载</a> <span class="text-muted">爬坑的小白</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a> <div>1:安装qrcodenpmiqrcode2:引入qrcodeimportQRCodefrom'qrcode'3:页面下载4:方法//封装方法生产二维码asyncgetCode(data){console.log(data,';;;')try{constdataSting=data.toString()constqrCodeData=awaitQRCode.toDataURL(dataSting)r</div> </li> <li><a href="/article/1833389517101428736.htm" title="Java 上传读取Excel文件" target="_blank">Java 上传读取Excel文件</a> <span class="text-muted">Ben_1043556915</span> <a class="tag" taget="_blank" href="/search/Java%E8%BF%9B%E9%98%B6/1.htm">Java进阶</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>Web中導入Excel文件ExtJs前端代碼://=========上傳Excel=============================uploadPanel=newExt.form.FormPanel({fileUpload:true,id:'fileUploadForm',frame:true,labelAlign:'right',buttonAlign:'center',labelWid</div> </li> <li><a href="/article/1833385487402889216.htm" title="所有vue相关问题" target="_blank">所有vue相关问题</a> <span class="text-muted">为_简而来</span> <div>http://blog.csdn.net/lhb_11/article/details/71478478</div> </li> <li><a href="/article/1833374017902440448.htm" title=".NetCore+vue3上传图片 Multipart body length limit 16384 exceeded." target="_blank">.NetCore+vue3上传图片 Multipart body length limit 16384 exceeded.</a> <span class="text-muted">鱼是一只鱼啊</span> <a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/.netcore/1.htm">.netcore</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0/1.htm">图片上传</a><a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/el-upload/1.htm">el-upload</a> <div>实现目标。点击图片上传头像效果图前端部分图片上传关键代码更换头像上传js部分import{ref,reactive,onMounted}from"vue";import{uploadAvatar}from"../../api/auth";import{ElMessage}from"element-plus";exportdefault{setup(){constfit=ref("cover");c</div> </li> <li><a href="/article/1833356121453195264.htm" title="Vue中使用pdfJs预览PDF、图片" target="_blank">Vue中使用pdfJs预览PDF、图片</a> <span class="text-muted">viceen</span> <a class="tag" taget="_blank" href="/search/vue3%2Bts-%E8%BF%90%E7%BB%B4/1.htm">vue3+ts-运维</a><a class="tag" taget="_blank" href="/search/vue%E9%A1%B9%E7%9B%AE-%E8%BF%90%E7%BB%B4/1.htm">vue项目-运维</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>Vue中使用pdfJs预览PDF、图片pdf.js是一个使用HTML5构建的可移植文档格式库。它可以帮助我们在浏览器中构建pdf文档，实现在线查看pdf文件的功能。实现步骤如下：1.下载pdfJs到本地（官网下载地址），放到项目根目录下的静态资源目录static文件夹内，将文件命名为pdfJs。如下图使用iframe打开或者需要注意的是：file参数中默认只允许传简单路径比如：http://www</div> </li> <li><a href="/article/1833349944921124864.htm" title="springboot-2.3.3+dubbo-2.7.8+nacos-1.3.2+gateway-Hoxton.SR8" target="_blank">springboot-2.3.3+dubbo-2.7.8+nacos-1.3.2+gateway-Hoxton.SR8</a> <span class="text-muted">qjyn1314</span> <a class="tag" taget="_blank" href="/search/dubbo/1.htm">dubbo</a><a class="tag" taget="_blank" href="/search/nacos/1.htm">nacos</a><a class="tag" taget="_blank" href="/search/spring-boot/1.htm">spring-boot</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>序言：此次介绍的实践是dubbo-2.7.8+nacos-1.3.2+gateway-Hoxton.SR81、升级注册中心，。其目的是项目中要从使用dubbo+zookeeper服务间调用升级为dubbo+nacos服务间调用。第一点可以参考：https://blog.csdn.net/lwb314/article/details/1082338632、升级网关，在升级之前有可能使用的是vue在前</div> </li> <li><a href="/article/1833349566871728128.htm" title="vue el-date-picker-or 自定义显示格式" target="_blank">vue el-date-picker-or 自定义显示格式</a> <span class="text-muted">java皮皮虫</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>translateDate就是方法输入你想要的返回格式就行</div> </li> <li><a href="/article/1833336078107504640.htm" title="vue点击按钮预览图片，pdf，文件" target="_blank">vue点击按钮预览图片，pdf，文件</a> <span class="text-muted">LW0512</span> <a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1/1.htm">小程序组件通信</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%97%B4%E6%88%B3/1.htm">时间戳</a> <div>vue点击按钮预览图片，pdf，文件上传图片//显示pdf<imgsrc="@/assets/images/pdf.jpg"alt=""class="imgsty"@click</div> </li> <li><a href="/article/1833324990422937600.htm" title="vue项目结构" target="_blank">vue项目结构</a> <span class="text-muted">手写冒泡排序</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>1.build目录用来存放对项目构建项目配置用来配置生产环境测试环境原始环境2.config目录用来修改生产配置和测试核心目录dev.env.js---开发环境变量index.js--项目配置文件prod.env.js--生产环境变量test.env.js--测试环境变量3.node_module目录用来存放当前项目的js依赖存放就是目录无序修改4.src目录用来存放日后自己开发代码的目录（重点）</div> </li> <li><a href="/article/1833323728986009600.htm" title="vue项目架构" target="_blank">vue项目架构</a> <span class="text-muted">影子信息</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>搭建项目框架,封装模块1.网络模块封装axios二次封装请求拦截器token是什么响应拦截器http协议2.动态权限菜单axios二次封装函数递归动态添加路由addRoutes刷新界面，菜单丢失问题，持久化存储技术实现点击菜单，不能找到路由组件问题,3.按钮资源权限根据登录用户角色获取能操作的资源列表，保存store自定义权限指令,封装有无操作该资源的权限v-permission=“[‘EditU</div> </li> <li><a href="/article/1833321835874316288.htm" title="Vue项目结构" target="_blank">Vue项目结构</a> <span class="text-muted">永远的12</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a> <div>Vue项目的结构可以比较灵活，但通常情况下会包含以下几个部分：public目录：这个目录包含项目的静态资源文件，例如index.html，图片等。src目录：这个目录包含项目的源代码。src/main.js：这个文件是项目的入口文件，用于初始化Vue应用。src/router目录：这个目录包含项目的路由配置文件。src/components目录：这个目录包含项目的组件文件。src/assets目录</div> </li> <li><a href="/article/1833321507116380160.htm" title="随笔记录git提交出错和原生js以JSON格式请求接口导出Excel" target="_blank">随笔记录git提交出错和原生js以JSON格式请求接口导出Excel</a> <span class="text-muted">山丘lemon</span> <div>GIT提交代码出错Fileexists.原文链接https://www.cnblogs.com/sweetbullet/p/9889997.html前端js导出,参数以json格式发送post请求原文链接https://www.cnblogs.com/sweetbullet/p/9843178.html</div> </li> <li><a href="/article/1833317957741146112.htm" title="2021-12-15 vue动态路由加载时 Cannot find module xxx 错误解决方法" target="_blank">2021-12-15 vue动态路由加载时 Cannot find module xxx 错误解决方法</a> <span class="text-muted">臭臭猫爱不爱吃鱼</span> <div>https://blog.csdn.net/longzhoufeng/article/details/106469115</div> </li> <li><a href="/article/1833302170250866688.htm" title="vue 项目代码架构" target="_blank">vue 项目代码架构</a> <span class="text-muted">王小工</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Vue项目的代码架构通常遵循一定的组织结构和约定，以提高项目的可维护性、可扩展性和可读性。以下是对Vue项目代码架构的详细解析：一、项目目录结构Vue项目的目录结构通常包括以下几个关键部分：根目录：package.json：npm包配置文件，定义了项目的npm脚本、依赖包等信息。README.md：项目的说明文档，markdown格式。.gitignore：git上传需要忽略的文件配置。其他配置文</div> </li> <li><a href="/article/1833297632810856448.htm" title="出现 [Vue warn]: Unhandled error during execution of component event handler 解决方法" target="_blank">出现 [Vue warn]: Unhandled error during execution of component event handler 解决方法</a> <span class="text-muted">码农研究僧</span> <a class="tag" taget="_blank" href="/search/BUG/1.htm">BUG</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>目录前言1.问题所示2.原理分析3.解决方法3.1第一次遇到3.2第二次遇到前言基本的知识推荐阅读：详细分析Js中的Promise.all基本知识（附Demo）1.问题所示点击按钮的时候，浏览器出现如下提示虽然它是warn，但是本着解决问题的本质还是理性分析下use-button.ts:57[Vuewarn]:Unhandlederrorduringexecutionofcomponenteven</div> </li> <li><a href="/article/1833279602013859840.htm" title="vue3知识总结" target="_blank">vue3知识总结</a> <span class="text-muted">软件技术NINI</span> <a class="tag" taget="_blank" href="/search/vue%E7%AC%94%E8%AE%B0/1.htm">vue笔记</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>Vue3是Vue.js的最新版本，相较于Vue2，它在性能、API设计、类型支持等多个方面都有显著的改进和创新。以下是对Vue3知识的总结：一、性能优化响应式系统升级：Vue3使用Proxy替代了Vue2中的Object.defineProperty，实现了对对象变化的更广泛监测，包括对象的添加和删除，以及数组的长度和索引变化。这使得Vue3的响应式系统更加高效和准确。虚拟DOM优化：Vue3优化</div> </li> <li><a href="/article/1833272472464617472.htm" title="Springboot+vue.js+协同过滤推荐+余弦相似度算法实现新闻推荐系统" target="_blank">Springboot+vue.js+协同过滤推荐+余弦相似度算法实现新闻推荐系统</a> <span class="text-muted">计算机程序优异哥</span> <div>针对海量的新闻资讯数据，如何快速的根据用户的检索需要，完成符合用户阅读需求的新闻资讯推荐？本篇文章主要采用余弦相似度及基于用户协同过滤算法实现新闻推荐，通过余弦相似度算法完成针对不同新闻数据之间的相似性计算，实现分类标签。通过协同过滤算法发现具备相似阅读习惯的用户，展开个性化推荐。本次新闻推荐系统：主要包含技术：springboot，mybatis，mysql，javascript，vue.js，</div> </li> <li><a href="/article/1833271281517162496.htm" title="修改打包后element-ui的字体文件名；JS文件名；CSS文件名" target="_blank">修改打包后element-ui的字体文件名；JS文件名；CSS文件名</a> <span class="text-muted">静纸~</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>修改这些静态文件名的原因是客户那边扫描出漏洞：字体文件名称不符合安全规则，就想办法给全部重新命名修改字体文件该方法不起作用——在vue.config.js里面配置打包时的fonts名称；其他场景下可能会适用记录一下constTimestamp=newDate().getTime();chainWebpack(config){config.module.rule("fonts").test(/\.(</div> </li> <li><a href="/article/1833270524688560128.htm" title="Dojo-CodeLab: JavaScript与Dojo框架学习与实践指南" target="_blank">Dojo-CodeLab: JavaScript与Dojo框架学习与实践指南</a> <span class="text-muted">陈马登Morden</span> <div>本文还有配套的精品资源，点击获取简介：Dojo-CodeLab是一个提供学习和实践JavaScript及其Dojo框架的项目，专注于为初学者提供无需特定环境限制的编程平台。通过开发一个简单的计算器应用，学习者将掌握JavaScript基础语法和Dojo工具集的使用，涵盖变量、数据类型、控制结构、函数、对象、数学运算、事件处理和DOM操作等关键概念。本项目通过实际编码练习帮助学习者加深对前端开发的理</div> </li> <li><a href="/article/1833268382229688320.htm" title="2023前端面试时遇到的面试题" target="_blank">2023前端面试时遇到的面试题</a> <span class="text-muted">No regrets, no return</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>2023前端面试时遇到的面试题1.数组有哪些方法push、pop、unshift、shift、join、forEach、filter、map、find…2.filter和some返回的分别是一个什么filter返回的是一个数组，some返回的是一个布尔值3.es6新增了哪些方法let和cconst、模板字符串（）、扩展运算符、for…of、解构、箭头函数、symbol数据类型、Set和Map方法等</div> </li> <li><a href="/article/1833257537026224128.htm" title="利用PHP和Selenium自动化采集数据、实现爬虫抓取" target="_blank">利用PHP和Selenium自动化采集数据、实现爬虫抓取</a> <span class="text-muted">IT大数据小助手</span> <a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">自动化</a> <div>随着互联网时代的到来，抓取互联网上的数据成为越来越重要的工作。在web前端开发领域，我们经常需要获取页面中的数据来完成一系列的交互操作，为了提高效率，我们可以将这个工作自动化。本文将介绍如何利用PHP和Selenium进行自动化数据采集和爬虫抓取。一、什么是SeleniumSelenium是一个免费的开源自动化测试工具，主要用于自动化测试Web应用程序，可以模拟真实的用户行为，实现自动交互。使用S</div> </li> <li><a href="/article/1833252619339001856.htm" title="【Uniapp】前端面试题" target="_blank">【Uniapp】前端面试题</a> <span class="text-muted">菜鸟una</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%85%AB%E8%82%A1%E6%96%87%E9%9D%A2%E8%AF%95%E9%A2%98/1.htm">前端八股文面试题</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>Uniapp部分文章目录Uniapp部分1.Uniapp的页面生命周期和Vue的生命周期有何区别？1）Vue的生命周期2）Uniapp的页面生命周期3）区别2.Uniapp的rpx转换px的公式？3.Uniapp的tabbar自定义，怎么实现突起home标？1）配置自定义tabBar2）创建自定义tabBar组件3）突出显示“home”标4.Uniapp的tabbar自定义，怎么实现隐藏原生tab</div> </li> <li><a href="/article/1833245435347693568.htm" title="「CSS思维」组件化VS原子化" target="_blank">「CSS思维」组件化VS原子化</a> <span class="text-muted">weixin_33810006</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ViewUI/1.htm">ViewUI</a> <div>废话从我两个月前，在掘金发第一篇文章到现在，关注数每天都在以至少20个人数的量持续增长，现在马上就要突破1000大关了。可是自己却断更了很久了，想想很对不起我的粉丝们（我是想当前端网红想疯了哈哈）。于是逼迫自己写了一篇这篇，我一直想写的文章。我是一个爱折腾设计的前端，我进公司的职位也是“偏体验的前端”。从这些标签可以看到我是一个以重构（“切图仔”）出道的前端。我喜欢的是所见即所得的代码体验，而不是</div> </li> <li><a href="/article/1833243541623631872.htm" title="【前端】如何在 Vue.js 中使用 Mock 数据：教程与技巧" target="_blank">【前端】如何在 Vue.js 中使用 Mock 数据：教程与技巧</a> <span class="text-muted">帅比九日</span> <a class="tag" taget="_blank" href="/search/%E8%B8%A9%E8%BF%87%E7%9A%84%E5%9D%91/1.htm">踩过的坑</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>如何在Vue.js中使用Mock数据：教程与技巧在开发过程中，为了测试和开发前端功能，你常常需要用到模拟（mock）数据。Vue.js提供了灵活的方式来处理数据请求和更新，但在没有真实后端的情况下，我们可以使用Mock数据来代替真实API请求。本文将介绍如何在Vue.js项目中设置和使用Mock数据。1.使用Mock数据的必要性Mock数据在以下场景中非常有用：前端开发阶段：在后端API尚未完成时</div> </li> <li><a href="/article/1833242407018262528.htm" title="项目架构设计" target="_blank">项目架构设计</a> <span class="text-muted">先熬半个月</span> <div>架构概述：架构共分为5层，访问层，接入层，网关层，服务层，数据层服务架构涉及26个技术点，部署架构7个技术点服务架构1.LVS：四层负载均衡，将用户分发到不同Nginx服务器上2.Nginx:是一个高性能的HTTP和反向代理的web服务器，用于部署前端应用3.Keepalived:高可用，此处指的是集群4.JWT:全称：JavaWebToken，用户身份校验，鉴权5.SpringCloudGetw</div> </li> <li><a href="/article/1833232572784668672.htm" title="基于Spring的消息推送实战（Websocket和前端轮询实现）" target="_blank">基于Spring的消息推送实战（Websocket和前端轮询实现）</a> <span class="text-muted">星月梦瑾</span> <a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/websocket/1.htm">websocket</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>基于Spring的消息推送实战（Websocket和前端轮询实现）本文介绍了基于Spring的消息推送实现方法，主要介绍了websocket实时消息推送方法（ServerEndpoint方式实现），以及前端客户端轮询方式的消息推送。一、消息推送常见的消息推送方式有轮询、websocket、jpush等。传统http协议需要客户端发起请求，不能服务端进行推送，且建立tcp连接需要多次握手（tcp三次</div> </li> <li><a href="/article/1833214167637651456.htm" title="Vue2组件间通信的14种方式详解" target="_blank">Vue2组件间通信的14种方式详解</a> <span class="text-muted">SqCheese</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>（本篇以Vue2为主，Vue3在写啦）开始（引用一张举例图，全文依据下图关系进行举例说明）A组件==1.props/$emit//父向子传值importaaafrom'./aaa.vue'{{msg}}---------------------------------//子向父组件传值send(val){val为接收的参}改变字符串change(){this.$emit('send','我是参数'</div> </li> <li><a href="/article/1833211517210816512.htm" title="【vue使用Sass报错】启动项目报错 Syntax Error: SassError: expected selector" target="_blank">【vue使用Sass报错】启动项目报错 Syntax Error: SassError: expected selector</a> <span class="text-muted">lxx-sissi</span> <a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/sass/1.htm">sass</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>出现的问题新项目启动的时候，提示：SyntaxError:SassError:expectedselector看了一下发现是sass使用样式穿透/deep/报的错/deep/其实是已经过期的写法，某个版本之后就不支持了但是我同事并没有出现同样的问题，不知道是为啥，也有可能是电脑（mac）的原因解决办法将/deep/更换为::v-deep但是这个项目是多人协作的，有大量页面使用，修改的话会涉及很多页</div> </li> <li><a href="/article/102.htm" title="xml解析" target="_blank">xml解析</a> <span class="text-muted">小猪猪08</span> <a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>1、DOM解析的步奏准备工作： 1.创建DocumentBuilderFactory的对象 2.创建DocumentBuilder对象 3.通过DocumentBuilder对象的parse(String fileName)方法解析xml文件 4.通过Document的getElem</div> </li> <li><a href="/article/229.htm" title="每个开发人员都需要了解的一个SQL技巧" target="_blank">每个开发人员都需要了解的一个SQL技巧</a> <span class="text-muted">brotherlamp</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/linux%E8%A7%86%E9%A2%91/1.htm">linux视频</a><a class="tag" taget="_blank" href="/search/linux%E6%95%99%E7%A8%8B/1.htm">linux教程</a><a class="tag" taget="_blank" href="/search/linux%E8%87%AA%E5%AD%A6/1.htm">linux自学</a><a class="tag" taget="_blank" href="/search/linux%E8%B5%84%E6%96%99/1.htm">linux资料</a> <div> 对于数据过滤而言CHECK约束已经算是相当不错了。然而它仍存在一些缺陷，比如说它们是应用到表上面的，但有的时候你可能希望指定一条约束，而它只在特定条件下才生效。使用SQL标准的WITH CHECK OPTION子句就能完成这点，至少Oracle和SQL Server都实现了这个功能。下面是实现方式： CREATE TABLE books ( id &</div> </li> <li><a href="/article/356.htm" title="Quartz——CronTrigger触发器" target="_blank">Quartz——CronTrigger触发器</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/quartz/1.htm">quartz</a><a class="tag" taget="_blank" href="/search/CronTrigger/1.htm">CronTrigger</a> <div>转载请出自出处：http://eksliang.iteye.com/blog/2208295 一.概述 CronTrigger 能够提供比 SimpleTrigger 更有具体实际意义的调度方案，调度规则基于 Cron 表达式，CronTrigger 支持日历相关的重复时间间隔（比如每月第一个周一执行），而不是简单的周期时间间隔。二.Cron表达式介绍 1）Cron表达式规则表 Quartz</div> </li> <li><a href="/article/483.htm" title="Informatica基础" target="_blank">Informatica基础</a> <span class="text-muted">18289753290</span> <a class="tag" taget="_blank" href="/search/Informatica/1.htm">Informatica</a><a class="tag" taget="_blank" href="/search/Monitor/1.htm">Monitor</a><a class="tag" taget="_blank" href="/search/manager/1.htm">manager</a><a class="tag" taget="_blank" href="/search/workflow/1.htm">workflow</a><a class="tag" taget="_blank" href="/search/Designer/1.htm">Designer</a> <div>1. 1）PowerCenter Designer：设计开发环境，定义源及目标数据结构；设计转换规则，生成ETL映射。 2）Workflow Manager：合理地实现复杂的ETL工作流，基于时间，事件的作业调度 3）Workflow Monitor：监控Workflow和Session运行情况，生成日志和报告 4）Repository Manager：</div> </li> <li><a href="/article/610.htm" title="linux下为程序创建启动和关闭的的sh文件，scrapyd为例" target="_blank">linux下为程序创建启动和关闭的的sh文件，scrapyd为例</a> <span class="text-muted">酷的飞上天空</span> <a class="tag" taget="_blank" href="/search/scrapy/1.htm">scrapy</a> <div>对于一些未提供service管理的程序每次启动和关闭都要加上全部路径，想到可以做一个简单的启动和关闭控制的文件下面以scrapy启动server为例，文件名为run.sh： #端口号，根据此端口号确定PID PORT=6800 #启动命令所在目录 HOME='/home/jmscra/scrapy/' #查询出监听了PORT端口</div> </li> <li><a href="/article/737.htm" title="人--自私与无私" target="_blank">人--自私与无私</a> <span class="text-muted">永夜-极光</span> <div> 今天上毛概课,老师提出一个问题--人是自私的还是无私的,根源是什么? 从客观的角度来看,人有自私的行为,也有无私的</div> </li> <li><a href="/article/864.htm" title="Ubuntu安装NS-3 环境脚本" target="_blank">Ubuntu安装NS-3 环境脚本</a> <span class="text-muted">随便小屋</span> <a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a> <div> 将附件下载下来之后解压，将解压后的文件ns3environment.sh复制到下载目录下（其实放在哪里都可以，就是为了和我下面的命令相统一）。输入命令： sudo ./ns3environment.sh >>result 这样系统就自动安装ns3的环境，运行的结果在result文件中，如果提示 com</div> </li> <li><a href="/article/991.htm" title="创业的简单感受" target="_blank">创业的简单感受</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/%E5%88%9B%E4%B8%9A%E7%9A%84%E7%AE%80%E5%8D%95%E6%84%9F%E5%8F%97/1.htm">创业的简单感受</a> <div> 2009年11月9日我进入a公司实习，2012年4月26日，我离开a公司，开始自己的创业之旅。今天是2012年5月30日，我忽然很想谈谈自己创业一个月的感受。当初离开边锋时，我就对自己说：“自己选择的路，就是跪着也要把他走完”，我也做好了心理准备，准备迎接一次次的困难。我这次走出来，不管成败</div> </li> <li><a href="/article/1118.htm" title="如何经营自己的独立人脉" target="_blank">如何经营自己的独立人脉</a> <span class="text-muted">aoyouzi</span> <a class="tag" taget="_blank" href="/search/%E5%A6%82%E4%BD%95%E7%BB%8F%E8%90%A5%E8%87%AA%E5%B7%B1%E7%9A%84%E7%8B%AC%E7%AB%8B%E4%BA%BA%E8%84%89/1.htm">如何经营自己的独立人脉</a> <div>独立人脉不是父母、亲戚的人脉，而是自己主动投入构造的人脉圈。“放长线，钓大鱼”，先行投入才能产生后续产出。现在几乎做所有的事情都需要人脉。以银行柜员为例，需要拉储户，而其本质就是社会人脉，就是社交！很多人都说，人脉我不行，因为我爸不行、我妈不行、我姨不行、我舅不行……我谁谁谁都不行，怎么能建立人脉？我这里说的人脉，是你的独立人脉。以一个普通的银行柜员</div> </li> <li><a href="/article/1245.htm" title="JSP基础" target="_blank">JSP基础</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/%E6%B3%A8%E9%87%8A/1.htm">注释</a><a class="tag" taget="_blank" href="/search/%E9%9A%90%E5%BC%8F%E5%AF%B9%E8%B1%A1/1.htm">隐式对象</a> <div> 1,JSP语句的声明 <%! 声明 %> 　　声明：这个就是提供java代码声明变量、方法等的场所。表达式 <%= 表达式 %> 　　这个相当于赋值，可以在页面上显示表达式的结果，程序代码段/小型指令　<% 程序代码片段 %> 2,JSP的注释  </div> </li> <li><a href="/article/1372.htm" title="web.xml之session-config、mime-mapping" target="_blank">web.xml之session-config、mime-mapping</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/web.xml/1.htm">web.xml</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a><a class="tag" taget="_blank" href="/search/session-config/1.htm">session-config</a><a class="tag" taget="_blank" href="/search/mime-mapping/1.htm">mime-mapping</a> <div>session-config 1.定义： <session-config> <session-timeout>20</session-timeout> </session-config> 2.作用：用于定义整个WEB站点session的有效期限，单位是分钟。 mime-mapping 1.定义： <mime-m</div> </li> <li><a href="/article/1499.htm" title="互联网开放平台（1）" target="_blank">互联网开放平台（1）</a> <span class="text-muted">Bill_chen</span> <a class="tag" taget="_blank" href="/search/%E4%BA%92%E8%81%94%E7%BD%91/1.htm">互联网</a><a class="tag" taget="_blank" href="/search/qq/1.htm">qq</a><a class="tag" taget="_blank" href="/search/%E6%96%B0%E6%B5%AA%E5%BE%AE%E5%8D%9A/1.htm">新浪微博</a><a class="tag" taget="_blank" href="/search/%E7%99%BE%E5%BA%A6/1.htm">百度</a><a class="tag" taget="_blank" href="/search/%E8%85%BE%E8%AE%AF/1.htm">腾讯</a> <div>现在各互联网公司都推出了自己的开放平台供用户创造自己的应用，互联网的开放技术欣欣向荣，自己总结如下： 1.淘宝开放平台(TOP) 网址：http://open.taobao.com/ 依赖淘宝强大的电子商务数据，将淘宝内部业务数据作为API开放出去，同时将外部ISV的应用引入进来。目前TOP的三条主线： TOP访问网站：open.taobao.com ISV后台：my.open.ta</div> </li> <li><a href="/article/1626.htm" title="【MongoDB学习笔记九】MongoDB索引" target="_blank">【MongoDB学习笔记九】MongoDB索引</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a> <div>索引可以在任意列上建立索引索引的构造和使用与传统关系型数据库几乎一样,适用于Oracle的索引优化技巧也适用于Mongodb 使用索引可以加快查询,但同时会降低修改,插入等的性能内嵌文档照样可以建立使用索引测试数据 var p1 = { "name":"Jack", "age&q</div> </li> <li><a href="/article/1753.htm" title="JDBC常用API之外的总结" target="_blank">JDBC常用API之外的总结</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a> <div> 做JAVA的人玩JDBC肯定已经很熟练了，像DriverManager、Connection、ResultSet、Statement这些基本类大家肯定很常用啦，我不赘述那些诸如注册JDBC驱动、创建连接、获取数据集的API了，在这我介绍一些写框架时常用的API，大家共同学习吧。 ResultSetMetaData获取ResultSet对象的元数据信息 </div> </li> <li><a href="/article/1880.htm" title="apache VelocityEngine使用记录" target="_blank">apache VelocityEngine使用记录</a> <span class="text-muted">bozch</span> <a class="tag" taget="_blank" href="/search/VelocityEngine/1.htm">VelocityEngine</a> <div>VelocityEngine是一个模板引擎，能够基于模板生成指定的文件代码。使用方法如下： VelocityEngine engine = new VelocityEngine();// 定义模板引擎 Properties properties = new Properties();// 模板引擎属</div> </li> <li><a href="/article/2007.htm" title="编程之美-快速找出故障机器" target="_blank">编程之美-快速找出故障机器</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B%E4%B9%8B%E7%BE%8E/1.htm">编程之美</a> <div> package beautyOfCoding; import java.util.Arrays; public class TheLostID { /*编程之美假设一个机器仅存储一个标号为ID的记录，假设机器总量在10亿以下且ID是小于10亿的整数，假设每份数据保存两个备份，这样就有两个机器存储了同样的数据。 1.假设在某个时间得到一个数据文件ID的列表，是</div> </li> <li><a href="/article/2134.htm" title="关于Java中redirect与forward的区别" target="_blank">关于Java中redirect与forward的区别</a> <span class="text-muted">chenbowen00</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a> <div>在Servlet中两种实现： forward方式：request.getRequestDispatcher(“/somePage.jsp”).forward(request, response); redirect方式：response.sendRedirect(“/somePage.jsp”); forward是服务器内部重定向，程序收到请求后重新定向到另一个程序，客户机并不知</div> </li> <li><a href="/article/2261.htm" title="[信号与系统]人体最关键的两个信号节点" target="_blank">[信号与系统]人体最关键的两个信号节点</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F/1.htm">系统</a> <div> 如果把人体看做是一个带生物磁场的导体,那么这个导体有两个很重要的节点,第一个在头部,中医的名称叫做百汇穴, 另外一个节点在腰部,中医的名称叫做命门如果要保护自己的脑部磁场不受到外界有害信号的攻击,最简单的</div> </li> <li><a href="/article/2388.htm" title="oracle 存储过程执行权限" target="_blank">oracle 存储过程执行权限</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E5%82%A8%E8%BF%87%E7%A8%8B/1.htm">存储过程</a><a class="tag" taget="_blank" href="/search/%E6%9D%83%E9%99%90/1.htm">权限</a><a class="tag" taget="_blank" href="/search/%E6%89%A7%E8%A1%8C%E8%80%85/1.htm">执行者</a><a class="tag" taget="_blank" href="/search/%E8%B0%83%E7%94%A8%E8%80%85/1.htm">调用者</a> <div>在数据库系统中存储过程是必不可少的利器，存储过程是预先编译好的为实现一个复杂功能的一段Sql语句集合。它的优点我就不多说了，说一下我碰到的问题吧。我在项目开发的过程中需要用存储过程来实现一个功能，其中涉及到判断一张表是否已经建立，没有建立就由存储过程来建立这张表。 CREATE OR REPLACE PROCEDURE TestProc IS fla</div> </li> <li><a href="/article/2515.htm" title="为mysql数据库建立索引" target="_blank">为mysql数据库建立索引</a> <span class="text-muted">dengkane</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%80%A7%E8%83%BD/1.htm">性能</a><a class="tag" taget="_blank" href="/search/%E7%B4%A2%E5%BC%95/1.htm">索引</a> <div>前些时候，一位颇高级的程序员居然问我什么叫做索引，令我感到十分的惊奇，我想这绝不会是沧海一粟，因为有成千上万的开发者（可能大部分是使用MySQL的）都没有受过有关数据库的正规培训，尽管他们都为客户做过一些开发，但却对如何为数据库建立适当的索引所知较少，因此我起了写一篇相关文章的念头。最普通的情况，是为出现在where子句的字段建一个索引。为方便讲述，我们先建立一个如下的表。</div> </li> <li><a href="/article/2642.htm" title="学习C语言常见误区如何看懂一个程序如何掌握一个程序以及几个小题目示例" target="_blank">学习C语言常见误区如何看懂一个程序如何掌握一个程序以及几个小题目示例</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>如果看懂一个程序，分三步 1、流程 2、每个语句的功能 3、试数如何学习一些小算法的程序尝试自己去编程解决它，大部分人都自己无法解决如果解决不了就看答案关键是把答案看懂，这个是要花很大的精力，也是我们学习的重点看懂之后尝试自己去修改程序，并且知道修改之后程序的不同输出结果的含义照着答案去敲调试错误 </div> </li> <li><a href="/article/2769.htm" title="centos6.3安装php5.4报错" target="_blank">centos6.3安装php5.4报错</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/centos6/1.htm">centos6</a> <div>报错内容如下: Resolving Dependencies --> Running transaction check ---> Package php54w.x86_64 0:5.4.38-1.w6 will be installed --> Processing Dependency: php54w-common(x86-64) = 5.4.38-1.w6 for </div> </li> <li><a href="/article/2896.htm" title="JSONP请求" target="_blank">JSONP请求</a> <span class="text-muted">flyer0126</span> <a class="tag" taget="_blank" href="/search/jsonp/1.htm">jsonp</a> <div> 使用jsonp不能发起POST请求。 It is not possible to make a JSONP POST request. JSONP works by creating a <script> tag that executes Javascript from a different domain; it is not pos</div> </li> <li><a href="/article/3023.htm" title="Spring Security（03）——核心类简介" target="_blank">Spring Security（03）——核心类简介</a> <span class="text-muted">234390216</span> <a class="tag" taget="_blank" href="/search/Authentication/1.htm">Authentication</a> <div>核心类简介目录 1.1 Authentication 1.2 SecurityContextHolder 1.3 AuthenticationManager和AuthenticationProvider 1.3.1 &nb</div> </li> <li><a href="/article/3150.htm" title="在CentOS上部署JAVA服务" target="_blank">在CentOS上部署JAVA服务</a> <span class="text-muted">java--hhf</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a><a class="tag" taget="_blank" href="/search/Java%E6%9C%8D%E5%8A%A1/1.htm">Java服务</a> <div> 本文将介绍如何在CentOS上运行Java Web服务，其中将包括如何搭建JAVA运行环境、如何开启端口号、如何使得服务在命令执行窗口关闭后依旧运行第一步：卸载旧Linux自带的JDK ①查看本机JDK版本 java -version 结果如下 java version "1.6.0"</div> </li> <li><a href="/article/3277.htm" title="oracle、sqlserver、mysql常用函数对比[to_char、to_number、to_date]" target="_blank">oracle、sqlserver、mysql常用函数对比[to_char、to_number、to_date]</a> <span class="text-muted">ldzyz007</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/SQL+Server/1.htm">SQL Server</a> <div>oracle &n</div> </li> <li><a href="/article/3404.htm" title="记Protocol Oriented Programming in Swift of WWDC 2015" target="_blank">记Protocol Oriented Programming in Swift of WWDC 2015</a> <span class="text-muted">ningandjin</span> <a class="tag" taget="_blank" href="/search/protocol/1.htm">protocol</a><a class="tag" taget="_blank" href="/search/WWDC+2015/1.htm">WWDC 2015</a><a class="tag" taget="_blank" href="/search/Swift2.0/1.htm">Swift2.0</a> <div>其实最先朋友让我就这个题目写篇文章的时候，我是拒绝的，因为觉得苹果就是在炒冷饭，把已经流行了数十年的OOP中的“面向接口编程”还拿来讲，看完整个Session之后呢，虽然还是觉得在炒冷饭，但是毕竟还是加了蛋的，有些东西还是值得说说的。通常谈到面向接口编程，其主要作用是把系统设计和具体实现分离开，让系统的每个部分都可以在不影响别的部分的情况下，改变自身的具体实现。接口的设计就反映了系统</div> </li> <li><a href="/article/3531.htm" title="搭建 CentOS 6 服务器(15) - Keepalived、HAProxy、LVS" target="_blank">搭建 CentOS 6 服务器(15) - Keepalived、HAProxy、LVS</a> <span class="text-muted">rensanning</span> <a class="tag" taget="_blank" href="/search/keepalived/1.htm">keepalived</a> <div>（一）Keepalived （1）安装 # cd /usr/local/src # wget http://www.keepalived.org/software/keepalived-1.2.15.tar.gz # tar zxvf keepalived-1.2.15.tar.gz # cd keepalived-1.2.15 # ./configure # make &a</div> </li> <li><a href="/article/3658.htm" title="ORACLE数据库SCN和时间的互相转换" target="_blank">ORACLE数据库SCN和时间的互相转换</a> <span class="text-muted">tomcat_oracle</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a> <div>SCN（System Change Number 简称 SCN）是当Oracle数据库更新后，由DBMS自动维护去累积递增的一个数字，可以理解成ORACLE数据库的时间戳，从ORACLE 10G开始，提供了函数可以实现SCN和时间进行相互转换；　　用途：在进行数据库的还原和利用数据库的闪回功能时，进行SCN和时间的转换就变的非常必要了；　　操作方法：　　1、通过dbms_f</div> </li> <li><a href="/article/3785.htm" title="Spring MVC 方法注解拦截器" target="_blank">Spring MVC 方法注解拦截器</a> <span class="text-muted">xp9802</span> <a class="tag" taget="_blank" href="/search/spring+mvc/1.htm">spring mvc</a> <div>应用场景，在方法级别对本次调用进行鉴权，如api接口中有个用户唯一标示accessToken,对于有accessToken的每次请求可以在方法加一个拦截器，获得本次请求的用户，存放到request或者session域。 python中，之前在python flask中可以使用装饰器来对方法进行预处理，进行权限处理先看一个实例,使用@access_required拦截： ? </div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>