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的基础上,涌现出了一大批的前端框架:

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

三种架构的介绍

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上。

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

而我们今天要学习的,就是一款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/

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

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

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

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

Node和NPM

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

NPM的简单使用

安装

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

为什么要使用

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

简单的增删改

安装
  1. 使用命令行进入需要存放js的目录,执行npm -init -y进行初始化-y是省的问一大堆的问题
  2. 命令执行完毕后就会在文件夹下生成package.json文件,这个文件和maven的pom文件类似,这里记录着下载过的依赖
  3. 使用 npm i 名称 安装 就会把所有的依赖文件拉下来 注意:是i不是-i
  4. 安装指定版本的模块npm i 名称@版本号
  5. 然后就可以在页面把下载下来的js文件引入
  6. 下载的所有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的方式

  1. 创建一个空文件夹vue-learning,然后打开命令行进入该文件夹

  2. 使用 npm init -y 进行初始化

  3. 安装Vue,输入命令:npm install vue

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

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

然后就会在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属性。

打开页面查看效果:

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

双向绑定

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

<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-modelnum进行绑定。
  • 同时通过{{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的完整学习笔记(介绍,基础语法,组件开发与通信,模块化概念,webpack,vue-cli,vue-router,vuex,axios)_第7张图片

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的完整学习笔记(介绍,基础语法,组件开发与通信,模块化概念,webpack,vue-cli,vue-router,vuex,axios)_第8张图片

生命周期钩子

生命周期

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

生命周期:

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

钩子函数

  • 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():反转

响应式注意点

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

如果在对象中没有定义并且初始化值的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>

插值闪烁现象

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

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

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

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

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: "华哥"
},

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

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

v-pre

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

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

div>

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

v-cloak

css:


html:


<p>{{message}}p>




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

<p v-text="message">信息p>
div>

js

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

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

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: []
},

效果:

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

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

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

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

多选使用数组来存储,比如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: ""
},

原理

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

修饰符

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'

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

事件修饰符

在事件处理程序中调用 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">
js

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,是不是很没有效率?

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

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

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

所以一句话,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会进行渲染,仅仅是设置不显示罢了

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

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 用于 classstyle 时,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>

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

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要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的完整学习笔记(介绍,基础语法,组件开发与通信,模块化概念,webpack,vue-cli,vue-router,vuex,axios)_第24张图片

组件

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

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

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

注册组件的基本步骤

使用Vue.extend()方法创建组件构造器
调用Vue.component()方法注册组件
在Vue实例的作用范围内使用组件

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

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

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

template

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

编译作用域

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

插槽

组件的插槽:

  • 组件的插槽也是为了让我们封装的组件更加具有扩展性。

  • 让使用者可以决定组件内部的一些内容到底展示什么。

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

  • 移动开发中,几乎每个页面都有导航栏。
  • 导航栏我们必然会封装成一个插件,比如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>

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

作用域插槽

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

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

数据在子组件中


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

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

组件通信

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

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

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

props(父向子通信)

  1. 父组件使用子组件时,自定义属性(属性名任意,属性值为要传递的数据)
  2. 子组件通过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>

js

//全局组件
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

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

$ref

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

$parent

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

模块化

匿名函数方式

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

CommonJS

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

Export

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

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

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

import

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

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文件夹中。

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

什么时候用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

创建一个脚本

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

创建一个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值进行存储的,太乱了

解决:指定命名规则

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

文件格式请求的url

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

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"
    }
})

打包后页面报错

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

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

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

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

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

runtime-only和runtime-compiler的区别

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

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

Vue的完整学习笔记(介绍,基础语法,组件开发与通信,模块化概念,webpack,vue-cli,vue-router,vuex,axios)_第48张图片Vue的完整学习笔记(介绍,基础语法,组件开发与通信,模块化概念,webpack,vue-cli,vue-router,vuex,axios)_第49张图片

我们需要先理解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后缀

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

Plugin

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

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

添加版权的Plugin

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

效果

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

打包Html的Plugin

引入依赖

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

配置

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

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

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

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

js压缩的Plugin

引入依赖

npm install [email protected] --save-dev

配置插件

效果

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

搭建本地服务器

引入依赖

npm install --save-dev [email protected]

配置文件

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

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

  • contentBase:为哪一个文件夹提供本地服务,默认是根文件夹,我们这里要填写./dist

  • port:端口号

  • inline:页面实时刷新

  • historyApiFallback:在SPA页面中,依赖HTML5的history模式

配置脚本

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

配置文件的抽离

问题:

  • 我们的devServer只在开发时使用,而在部署时不需要这个配置

  • 而我们的js压缩只在项目部署时使用,而在开发时不需要使用

下载依赖

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

npm install webpack-merge

进行分离

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

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

  • 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的完整学习笔记(介绍,基础语法,组件开发与通信,模块化概念,webpack,vue-cli,vue-router,vuex,axios)_第58张图片

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

选择配置

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

目录结构

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

cli3详解

vue create my-project #vue cli3/4

选择配置

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

删除预处理(preset)

删掉就可以了

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

别名问题

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

路由和Vue-router

场景模拟

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

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

填写父组件

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

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

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:

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

login.js内容如下:

const loginFrame={  //组件template中只能有一个根标签
    template:`   
      

登录页

用户名:
密 码:
`
, }

register.js内容:

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

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

在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值会随之改变

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

注意

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

  • 事实上,我们总共就一个HTML:index.html

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

脚手架中使用路由

前端路由阶段

  • 后端分离阶段:

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

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

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

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

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

  • 单页面富应用阶段:

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

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

不刷新改变url的几种方式

hash方式

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

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

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

pushState

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

history.pushState()

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

replaceState

history.replaceState()

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

go

history.go()

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

补充说明

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

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

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

使用History模式

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

  • URL的hash
  • HTML5的history

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

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

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

router-link

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

还有一些其他属性:

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

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

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

修改linkActiveClass

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

路由代码跳转

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

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

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

动态路由

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

/user/aaaa或/user/bbbb

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

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

跳转

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

编写路由

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

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

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

效果

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

路由的懒加载

官方给出了解释:

  • 当打包构建应用时,Javascript 包会变得非常大,影响页面加载。

  • 如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了

官方在说什么呢?

  • 首先, 我们知道路由中通常会定义很多不同的页面.

  • 这个页面最后被打包在哪里呢? 一般情况下, 是放在一个js文件中.

  • 但是, 页面这么多放在一个js文件中, 必然会造成这个页面非常的大.

  • 如果我们一次性从服务器请求下来这个页面, 可能需要花费一定的时间, 甚至用户的电脑上还出现了短暂空白的情况.

  • 如何避免这种情况呢? 使用路由懒加载就可以了.

路由懒加载做了什么?

  • 路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.

  • 只有在这个路由被访问到的时候, 才加载对应的组件

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

方式一结合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访问一些内容.

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

路径和组件的关系如下:

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

定义两个组件

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

编写路由

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

路有点击

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

效果

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

参数的传递

params

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

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

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

例子,跳转

query

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

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

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

发送请求

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

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

路由

跳转的组件

效果

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

$router和​$route的区别

$route和$router是有区别的

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

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

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

query为query类型的请求参数

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

vue的原型

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

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

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

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

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> <!--PC和WAP自适应版--> <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"> <!-- 文章页-右侧1 动态广告位 --> <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> <!-- 文章页-右侧2 动态广告位 --> <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> <!-- 文章页-右侧3 动态广告位 --> <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/1835512920797179904.htm" title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a> <span class="text-muted">软件技术NINI</span> <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/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> <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件,它用于显示当前页面的路径,帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中,如果你已经安装了ElementUI,就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例:安装ElementUI(如果你还没有安装的话):你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div> </li> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题,尤其是当后端使用Java的Long类型(64位)与前端JavaScript的Number类型(最大安全整数为2^53-1,即16位)进行数据交互时,很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业:【HTML5网页期末作业(1000套)】程序员有趣的告白方式:【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> <span class="text-muted">加密社</span> <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中,事件(Events)是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更,还能够让外部系统(如前端应用)监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时,该事件会被记录在区块链的交易收据中。具体而言,事件</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业,Web大学生网页HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript:做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> <span class="text-muted">小猿L</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js,node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础,三大框架vuereactangular离不开node.jsnode.js是什么官网:node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835453535777550336.htm" title="vue3中el-table中点击图片放大时,被表格覆盖" target="_blank">vue3中el-table中点击图片放大时,被表格覆盖</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>问题:vue3中el-table中点击图片放大时,被表格覆盖。解决方法:el-image添加preview-teleported</div> </li> <li><a href="/article/1835452528599330816.htm" title="vue项目element-ui的table表格单元格合并" target="_blank">vue项目element-ui的table表格单元格合并</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/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'</div> </li> <li><a href="/article/1835450384655675392.htm" title="Vue中table合并单元格用法" target="_blank">Vue中table合并单元格用法</a> <span class="text-muted">weixin_30613343</span> <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>地名结果人名性别{{item.name}}已完成未完成{{item.groups[0].name}}{{item.groups[0].sex}}{{item.groups[son].name}}{{item.groups[son].sex}}exportdefault{data(){return{list:[{name:'地名1',result:'1',groups:[{name:'张三',sex</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> <span class="text-muted">苹果酱0567</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</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/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>这段时间抽空给女朋友搭建一个个人博客,想着记录一下建站的过程,就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站,或者用cms系统,三四个小时就可以做出一个前后台都有的网站,而且想做成啥样也都行。但是就是要从新做,自己做的意义不一样,更何况,俺就是专门干这个的,嘿嘿嘿要做一个网站,而且从零开始,首先呢就是技术选型了,经过一番思量决定选择-SpringBoot做后端,前端使用Vue做一</div> </li> <li><a href="/article/1835443569528238080.htm" title="Vue( ElementUI入门、vue-cli安装)" target="_blank">Vue( ElementUI入门、vue-cli安装)</a> <span class="text-muted">m0_l5z</span> <a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>一.ElementUI入门目录:1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> <span class="text-muted">2401_85194651</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架:后端:Java+SpringBoot数据库:MySQL前端:Vue.js数据库连接:JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835435885760442368.htm" title="vue+el-table 可输入表格使用上下键进行input框切换" target="_blank">vue+el-table 可输入表格使用上下键进行input框切换</a> <span class="text-muted">以对_</span> <a class="tag" taget="_blank" href="/search/vue%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>使用上下键进行完工数量这一列的切换-->//键盘触发事件show(ev,index){letnewIndex;letinputAll=document.querySelectorAll('.table_inputinput');//向上=38if(ev.keyCode==38){if(index==0){//如果是第一行,回到最后一个newIndex=inputAll.length-1}elsei</div> </li> <li><a href="/article/1835435885122908160.htm" title="vue + Element UI table动态合并单元格" target="_blank">vue + Element UI table动态合并单元格</a> <span class="text-muted">我家媳妇儿萌哒哒</span> <a class="tag" taget="_blank" href="/search/element/1.htm">element</a><a class="tag" taget="_blank" href="/search/UI/1.htm">UI</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>一、功能需求1、根据名称相同的合并工作阶段和主要任务合并这两列,但主要任务内容一样,但要考虑主要任务一样,但工作阶段不一样的情况。(枞向合并)2、落实情况里的定量内容和定性内容值一样则合并。(横向合并)二、功能实现exportdefault{data(){return{tableData:[{name:'a',address:'1',age:'1',six:'2'},{name:'a',addre</div> </li> <li><a href="/article/1835431726982197248.htm" title="vue 创建项目报错:command failed: npm install --loglevel error" target="_blank">vue 创建项目报错:command failed: npm install --loglevel error</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/vue-cli3/1.htm">vue-cli3</a> <div>这个问题其实很好解决,只是很多种情况,逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0,(永远不要尝试最新版本)node各种版本下载地址:以往的版本|Node.js(nodejs.org)vue/cli@3.12.1npminstall-g@vue/cli@3.12.1(注意vue/cli2和vue/cli3的下载命名有所改变,2是-形式,3是/形式)其实报错</div> </li> <li><a href="/article/1835428821877223424.htm" title="计算机毕业设计PHP仓储综合管理系统(源码+程序+VUE+lw+部署)" target="_blank">计算机毕业设计PHP仓储综合管理系统(源码+程序+VUE+lw+部署)</a> <span class="text-muted">java毕设程序源码王哥</span> <a class="tag" taget="_blank" href="/search/php/1.htm">php</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a> <div>该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流项目运行环境配置:phpStudy+Vscode+Mysql5.7+HBuilderX+Navicat11+Vue+Express。项目技术:原生PHP++Vue等等组成,B/S模式+Vscode管理+前后端分离等等。环境需要1.运行环境:最好是小皮phpstudy最新版,我们在这个版本上开发的。其他版本理论上也可以。2.开发</div> </li> <li><a href="/article/1835428317084348416.htm" title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a> <span class="text-muted">全能全知者</span> <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了,所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态:sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器:安装Apache:sudoyuminstallhttpd启动Apache:sudosystemctl</div> </li> <li><a href="/article/1835427057752961024.htm" title="补充元象二面" target="_blank">补充元象二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.请尽可能详细地说明,防抖和节流的区别,应用场景?你的回答中不要写出示例代码。防抖(Debounce)和节流(Throttle)是两种常用的前端性能优化技术,它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明:防抖和节流的定义防抖:在一段时间内,多次执行变为只执行最后一次。防抖的原理是,当事件被触发后,设置一个延迟定时器。如果在这个延迟时间内事件再次被触发,则重</div> </li> <li><a href="/article/1835420753252675584.htm" title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a> <span class="text-muted">jun778895</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务(可选)以及微信小程序平台特性的综合性项目。这里,我将详细介绍一个典型的小程序开发项目的全过程,包括项目规划、设计、开发、测试及部署上线等各个环节,并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序,旨在为学生提供一站式校园生活服务,包括课程表查询、图书馆座位预约、食堂</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人,面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中,我获得了宝贵的实践经验和深刻的行业洞察,以下是我的主要收获和感悟:一、专业技能提升框架应用熟练度:通过实际项目,我深入掌握了React、Vue等前端框架的使用,不仅提升了编码效率,还学会了如何根据项目需求选择合适的框架。问题解决能力:在实习期间,我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835401975269781504.htm" title="vue render 函数详解 (配参数详解)" target="_blank">vue render 函数详解 (配参数详解)</a> <span class="text-muted">你的眼睛會笑</span> <a class="tag" taget="_blank" href="/search/vue2/1.htm">vue2</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>vuerender函数详解(配参数详解)在Vue3中,`render`函数被用来代替Vue2中的模板语法。它接收一个h函数(或者是`createElement`函数的别名),并且返回一个虚拟DOM。render函数的语法结构如下:render(h){returnh('div',{class:'container'},'Hello,World!')}在上面的示例中,我们使用h函数创建了一个div元素</div> </li> <li><a href="/article/1835398064727224320.htm" title="前端代码上传文件" target="_blank">前端代码上传文件</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><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div> </li> <li><a href="/article/1835393400380157952.htm" title="VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。" target="_blank">VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。</a> <span class="text-muted">焚木灵</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a> <div>可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料:xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS):1、安装依赖:npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块,</div> </li> <li><a href="/article/1835390752381825024.htm" title="详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因" target="_blank">详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因</a> <span class="text-muted">hw_happy</span> <a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/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文件中需要引入定义的b.vue文件,但是提示b文件没有默认导出,对于vue2文件来说有exportdefault,在中,所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此,不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误,原来是我的项目使用了ts和vite\webpack,因为TypeScript和Vue的默认导出</div> </li> <li><a href="/article/1835385458356482048.htm" title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a> <span class="text-muted">2401_85123349</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢?比如说上面gif图中的这些人物对象,有一些已被该用户添加为关心,那么当用户下一次进入该页面时,这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大,只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先,整体的思路是利用动态类名对不同的元素进行选择。</div> </li> <li><a href="/article/1835376631733121024.htm" title="Vue 项目运行时,报错 Error: Cannot find module ‘node:path‘" target="_blank">Vue 项目运行时,报错 Error: Cannot find module ‘node:path‘</a> <span class="text-muted">周bro</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/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a> <div>node-v是否显示nodenpm-v报错Error:Cannotfindmodule‘node:path'是因为node版本和npm版本不匹配安装相对应的版本node版本10.16.0对应npm版本6.9.0npminstallnpm@6.14.17-g执行该命令即可匹配版本官网https://nodejs.org/en/about/previous-releases</div> </li> <li><a href="/article/1835376632366460928.htm" title="vue2实现复制,粘贴功能" target="_blank">vue2实现复制,粘贴功能</a> <span class="text-muted">周bro</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>一、需求说明在项目中点击按钮复制某行文本是很常见的应用场景,在Vue项目中实现复制功能需要借助vue-clipboard2插件。二、代码实现1、安装vue-clipboard2依赖(出现错误的话,可以试试切换成淘宝镜像源npmconfigsetregistryhttps://registry.npm.taobao.org)npminstall--savevue-clipboard22、在main.</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> <span class="text-muted">马小蜗</span> <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点:灵活度、可控性、性能</div> </li> <li><a href="/article/1835370074102394880.htm" title="【vite 自动配置路由】" target="_blank">【vite 自动配置路由】</a> <span class="text-muted">CODER-V</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/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/%E8%BD%AF%E4%BB%B6%E6%9E%84%E5%BB%BA/1.htm">软件构建</a> <div>手动配置路由,是一个没有技术含量又浪费时间的工作。本文将介绍vite构建的vue3项目如何编写一个自动配置路由的脚本。约定大于配置要想使用脚本完成路由的自动配置,我们就需要遵循以下目录规则:每一个页面对应一个包,当前包下的主页面命名为index.vue;每个包里必须配置一个page.js;在每一个page.js里边配置,额外的路由信息,比如:exportdefault{title:'商品',men</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. <!-- <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>--> </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>