Vue2 概述

什么是Vue

 

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

• VUE是一款由数据驱动视图的前端框架，它基于MVVM(Model View View Model)模式,实现数据与视图的双向绑定。
• MVVM：Model表示数据模型，View表示视图,指由数据驱动视图，当数据发生改变时，视图会自动改变，当视图变化时，所对应的数据也随之改变，通过MVVM实现数据与视图的双向绑定。
• VUE是渐进式框架，VUE提供了一个核心库，用于渲染视图，它占空间小，能完成VUE中的常规基础操作。同样VUE根据需求不同还提供多个插件，以方便实现不同的功能。这种在核心库基础上可以根据需要递增使用不同的插件这种方式称为渐进式。
• VUE是做单页面应用的最佳选择。
• VUE在内存中构建DOM结构，并一次性进行渲染，在效率上要比jQuery这类操作DOM的库高很多，另外VUE让开发人员减少了DOM操作，使用起来要比jQuery类的库方便很多。
• VUE语法简单，比较容易上手，且功能强大。

Vue的基本使用

VUE有两种使用方式：

• 直接使用VUE.js，该方式以常规编码的形式实现VUE中各个功能，便于理解VUE各个功能的实现，适合学习阶段。
• VUE-CLI，使用VUE脚手架的方式构建VUE环境，该方式基于node实现，能快速搭建VUE模块开发环境。使用方便，适合生产阶段(提高开发效率)

我们先使用VUE.js的方式构建VUE项目，通过常规编码使用了解VUE中各个模块的使用；最后在通过VUE-CLI的方式构建VUE开发环境。

Vue.js的基本使用步骤

Vue官网下载vue.js文件 官网地址

两个版本：

• vue.js开发版，其中有vue的完整代码，格式方便查看源代码，想研究源代码的可以使用此版本
• vue.min.js生产版，压缩后的版本，代码中删除了无效的字符和空格，代码紧凑，体积较小,不便于查看源码

在HTML页面中引入vue.js文件

创建Vue实例，并设置相关选项

• el：指定Vue要渲染的元素，在vue.js中只有放在渲染元素中vue才起作用,渲染的元素可以是div、body等任意HTML元素，开发中一般使用div。

• data：VUE的数据属性区，在此区域中定义VUE中要使用的相关属性数据。

• methods：VUE的方法区，在此区域中定义VUE中要使用的方法(函数)。

• template：用于定义组件模板，VUE中的HTML元素标签、VUE相关指令都可以在此区域定义，运行时会进行渲染并在页面中显示，template的渲染优先级高于el指定的渲染元素，也就是说如果在template中和el渲染元素中都定义的内容，则显示的结果为template中的内容，而el中指定的渲染元素不会显示，如果没有template则会显示el指定的渲染元素。

• created:created()函数是VUE实例创建后自动执行的函数,可以在该函数中初始化data属性、发送ajax请求等操作。

在页面或模板中使用属性

VUE中通过插值运算符{{}}来访问data区中的属性

  
  
{{name}}
  
  
{{"西安欢迎您"}}
  
  
{{10+2}}

VUE 中的插值运算符不但可以获取data中的属性还可以进行计算并显示,如果要显示字符串常量则需要加上单引号或双引号否则vue会当成属性名获取该属性的值 。

VUE 通过事件调用方法 

VUE 中通过 v-on:事件="函数()"来调用函数也可以通过缩写形式@事件名调用函数

    姓名：{{name}}

    年龄：{{age}}
    

    
    缩写函数调用
    标准函数调用
    操纵属性
    操纵属性

Vue 中的选项

根实例中的 data 选项

Vue 的数据属性区，在此区域中定义 VUE 中要使用的相关属性数据。也可以看成是变量定义区域。

    {{name}}

Vue 指令

什么是 Vue 的指令

• 在 VUE 中在页面上提供了一套便于页面和数据交互的操作，这些操作就叫做指令，VUE 中的指令都是以"v-xxx"的形式表示。如:

• 每个 VUE 指令完成一个功能，VUE 指令中封装了一些 DOM 行为，通过指令的属性赋值，根据不同的值，VUE 会进行相应的 DOM 操作，以完成既定的功能。

Vue 中常用的指令

v-text:等同于 DOM 中的 innerText 属性,用于向标签体中写入文本，该指令和{{}}的功能一样，使用较少(注:该指令不会对 HTML 元素进行解释执行,而是原样输出)。

v-html:等同于 DOM 中的 innerHTML 属性,用于向标签体中写入文本(注:该指令会对HTML元素进行解释执行)。

v-bind:设置元素属性指令,如：v-bind:href="数据属性|表达式",一般使用简写方式:href="数据属性|表达式"，其实简单的说，就是给属性赋予定义变量的值。

    
基本写法
    
    绑定文本框：

    
    绑定文本框：

    
    非绑定文本框：
    

    
动态绑定对象
    {{i}}

    

    点击我改变i的值
    

    
{{content}}
    
{{content}}
    
    动态连接

    动态连接
    改变class

v-if:等同于JavaScript中的if判断，当条件为true时显示页面内容，为false时不显示。

        {{number}}是偶数

v-show:该指令与v-if的效果一样，当值为true时显示内容，为false时不显示，但底层实现有区别。

    {{number}}大于60！

v-if 和 v-show 的区别？

• v-if是"真正"的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
• v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。
• 相比之下，v-show就简单多了，它不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换(通过修改display样式来进行显示或隐藏)。
• 一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

v-else-if:等同于JavaScript中的else if判断，当条件为true时显示条件块中的内容,v-else-if一般和v-if搭配使用。
v-else:等同于JavaScript中else判断，当if条件不成立时自动显示else中的元素,v-else和v-if|或v-if-else搭配使用。

    {{number}}，完美！


    {{number}}，优秀！


    {{number}}，良好！


    {{number}}，及格！


    {{number}}，很差！

v-on:事件绑定指令,如v-on:click="方法"，一般使用简写方式@click="方法"。

缩写函数调用
标准函数调用

v-for:遍历指令，主要用于遍历集合或对象中的属性。

    
    
        {{i}} 
    
    

    
    
        {{name}} 
    
    

    
    
        {{index}}->{{name}} 
    
    

    
    
        {{value}} 
    
    

    
    
        {{key}}--->{{value}} 
    
    

    
    
        {{key}}--->{{value}}--->{{index}} 
    

v-model:该指令用于实现数据与视图的双向绑定,当数据改变时视图发生改变，视图改变时数据也同时发生改变,v-model只能在带有value属性的HTML元素中使用。

    
    
    
    
    {{val}}

v-bind 和 v-model 的区别？ 

• v-bind是单向绑定，用来绑定数据和属性以及表达式，只能将vue中的数据同步到页面。
• v-model是双向绑定，不只能将vue中的数据同步到页面，而且可以将用户数据的数据赋值给vue中的属性。
• v-bind可以给任何属性赋值，v-model只能给具备value属性的元素进行数据双向绑定。

Vue 组件

组件系统是 Vue 的一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

组件用于封装页面的部分功能，将功能的结构、样式、逻辑代码封装为整体。这样，当我们页面的某一个功能出现问题，只需要将这个功能进行维护就行。提高功能的复用性与可维护性，更好的专注于业务逻辑。

从形式来说，Vue组件其实就是自定义的HTML标签，通过组件名来作为自定义标签名。我们可以把页面的一些功能封装成自定义的HTML标签，也就是Vue组件的形式，当使用时，只需要调用Vue组件就行。

    HTML的b标签
    
    

这里面的标签就是Vue组件，它是封装好的功能，使用时，只需调用这个标签就行。 

组件注册

1. 全局组件

1.1 全局组件的基本使用

全局注册的组件在注册后可以用于任意实例或组件中。

Vue.component('组件名', {/*选项对象*/});

注意：

• 全局注册必须设置在根Vue实例创建之前。
• 全局组件只能使用在根Vue绑定的标签内。 

    HTML的b标签
    
    

1.2 组件命名规则

无论全局组件还是局部组件都具有两种命名规则：

• kebab-case：'guan-wei'
• PascalCase：'GuanWei'

// kebab-case写法
Vue.component('guan-wei1', {/*组件选项*/});
// PascalCase写法
Vue.component('GuanWei2', {/*组件选项*/});

注意：无论采用哪种命名方式，在DOM中都只能通过kebab-case可以使用。因为HTML中不区分大小写。

2. 组件基础

本职上，组件是可重复的Vue实例，所以它们可与new Vue接收相同的选项，例如data、methods以及生命周期钩子等。

注意：el这个选项是根实例特有的，组件中不能进行设置。

2.1 template选项

template选项用于设置组件的结构，最终被引入根实例或其他组件中。

Vue.component('guan-wei1', {
     template: `
          

               我是组件内的标签1
          
     `
});

注意：template中不能有平级的根实例，如果有多个平级的div，只会显示第一个div的内容。 

2.2 data选项

data选项用于存储组件的数据，与根实例的data不同，组件的data选项必须为函数，数据设置在返回值对象中。

Vue.component('guan-wei1',{
    template:'{{name}}',
    data:function (){
        return {
            name:'关为'
        }
    }
})

使用函数写法的目的是因为data中定义的每一个变量都是独立的存在，不同的实例()都有各自独立的变量name，其中一个name的值发生改变，其他实例的name值不受干扰。 

例如，如下实例：

3. 局部组件

局部注册的组件只能用在当前实例或组件中。

3.1 直接书写组件选项

new Vue({
    el: '#app',
	....
    components: {
        '组件名': {/*组件选项*/},
        '组件名': {/*组件选项*/},
		....
    }
});

3.2 单独配置组件的选项对象 

// 单独配置组件的选项对象
let guanwei = {/*组件选项*/};
new Vue({
    el: '#app',
    components: {
        '组件名': guanwei
    }
});

3.3 ES6 简写形式

let guanwei = {/*组件选项*/};
// ES6简写形式 兼容性较差
new Vue({
    el:'#app',
    components: {
        // 这里直接引入变量名就行，那么组件名也是guanwei，自定义标签 
        guanwei
    }
})

4. 全局注册和局部注册的区别 

全局注册的组件能够被不同根实例所使用，而局部组件只能在当前根实例中使用。

组件通信

在组件间传递数据的操作，称为组件通信。

1. 父组件向子组件传值

通过子组件的 props 选项接收父组件的传值。

注意：

1. 子组件 props 不要与子组件的 data 存在同名属性。
2. props 选项是一个数组形式，其中的值(prop)可以看成是组件(自定义标签)的属性。
3. 父子组件间的所有 prop 都是单向下行绑定的，只能从父组件向子组件传值。
4. 动态绑定以 :prop 或者 v-bind:prop 命名。
5. 动态绑定时，如果要传递常量字符串需要使用''将字符串给包含，如果不加''认为是父组件中的变量名。

Props 命名规则 

建议 prop 命名使用 camelCase ，父组件绑定时使用 kebab-case 。因为 props 中定义的 prop 是书写在 JavaScript 中的，是区分大小写的，而页面中标签的引用是 HTML 效果，HTML 不区分大小写。

Vue.component('guan-wei', {
        // prop 的命名以驼峰形式书写
        props: ['userId', 'userName', 'userAge', 'userSex']
})

2. 子组件向父组件传值

子组件通过自定义事件的方式向父组件传值。

    {{number1}}
    

练习

通过子组件向父组件传值的方式完成如下效果

 

一共有四个子组件，当点击每一个按钮时，子组件的数量自增1，同时父组件书籍总量的值也会自增1。 

刚才的案例中，我们了解到了当子组件触发事件时，父组件可以监控到子组件的触发，那么如何直接在子组件中向父组件传递具体的值呢？

子组件触发事件时可以向父组件传值。

// 触发了自定义事件guan 并且传递了当前文本框的值和一个常量字符串
this.$emit('guan',e.target.value,'aa');

父组件在监听事件时需要接受子组件传递的数据。

// 这里的的参数a和b就是事件传递过来的值
addNumber1(a,b) {
     this.number1 = a + ',' + b;
}

3. 非父子组件传值

非父子组件指的是兄弟组件或完全无关的两个组件。

3.1 兄弟组件传值

兄弟组件之间可以通过父组件进行数据中转。

    组件1：
    
    

    父组件：{{value}}

    组件2：

3.2 EventBus 传值

当组件嵌套关系复杂时，根据组件关系传值会较为繁琐。组件为了数据中转，data 中会存在许多与当前组件功能无关的数据。

有没有一种方式能够让任意组件直接进行传值，而不需要找到组件与组件之间的关系在进行中转操作呢？

EventBus（事件总线）是一个独立的事件中心，用于管理不同组件间的传值问题。

好处是：

• 组件和组件之间不需要设置多余的 data 数据。
• 组件和组件不需要找到之间的关系，只需要 EventBus 中心中进行处理就行。

EventBus 仅仅存储的用来进行传值操作的事件功能，而不会真正的通过 EventBus 来存储数据。它只是一个中转操作。

EventBus 通过一个新的 Vue 实例来管理组件传值操作，组件通过给实例注册事件、调用事件来实现数据传递。

// EventBus 通过一个新的 Vue 实例来管理，新的 Vue 实例不需要设置事件选项。空的 Vue 实例。
let bus = new Vue();

EventBus 实现步骤

1. 发送数据的组件触发 bus 事件，接收的组件给 bus 注册对应事件。
2. 接收事件的组件给 bus 注册对应事件通过 $on() 操作。

//传值的组件中
函数(){
    bus.$emit('事件名',参数列表);
}
// 接收的组件中 一般写入到组件选项的 created 中
created(){
    bus.$on('事件名',(参数列表)=>{函数体});
}

完整的代码内容

3.3 其他传值方式

4. 其他通信方式

组件插槽

组件插槽可以快捷的设置组件内容。

    
    
        我是一段内容
    

1. 单个插槽

如果我们希望组件标签可以像 HTML 标签一样设置内容，那么组件的使用灵活度会很高。

但问题是平常我们书写的组件，组件内部书写的内容会被抛弃。这时候我们如果需要内容生效，就需要组件插槽来实现。

1.1 可以通过 进行插槽设置。

    
        自己书写的内容
    
    
        另一段内容

        组件的主体内容
    
    
        
        {{ content }}
    


Vue.component('guanwei',{
    template:`
       

           我是组件的内容
           
       
    `
});

代表的是组件的内容区域， 标签内部书写的内容会自动替换 位置的内容，这样在多次使用 自定义标签时，可以传递不同的内容来达到快速传值的目的。有点像我们在 Java 中学习的占位符效果， 就是占位符，自定义中的内容就是要传递的值。

1.2 可以在 中为插槽设置默认值

Vue.component('guanwei',{
    template:`
       

           我是组件的内容
           我是插槽的默认值
       
    `
});

2. 具名插槽

如果组件中有多个位置需要设置插槽，需要给 设置name，这种具有名称的插槽，称为具名插槽。

2.1 具名插槽的写法

      
      
      
      


Vue.component('guanwei', {
    template: `
         

              
我是头部部分
              
              
我是中间部分
              我的默认名字是default
              
我是底部部分
              
         
     `
});

2.2 具名插槽的缩写形式

    
    
    {{content}}
    

3. 作用域插槽

前边所学到的插槽中只能使用父组件的 data 数据，那么如何能够在插槽中使用子组件的数据呢？

这时候我们就会用到作用域插槽。那么如何设置呢？

组件将需要被插槽使用的数据通过 v-bind:要传递的变量名="要传递的变量名" 绑定给 ，这种用于给插槽传递数据的属性称为插槽 prop 。

内置组件

动态组件

动态组件适用于多个组件频繁切换的处理。

用于将一个“元组件”渲染为动态组件，以 is 属性值决定渲染那个组件，类似于 v-if 或 v-show 的效果。

用于实现多个组件的快速切换，例如选项卡效果。 

    {{name}}
    

    guanwei01
    guanwei02
    guanwei03

is 属性会在每次切换组件时，Vue 都会创建一个新的组件实例。在组件进行切换时都会销毁原有组件，在新建(重新渲染)新的组件。

// 输入框在每次切换时 值都会消失，因为切换组件会导致原有组件销毁并新建新的组件（重新渲染）
Vue.component('guanwei01', {template: '
我是组件关为01
'});
Vue.component('guanwei02', {template: '
我是组件关为02
'});
Vue.component('guanwei03', {template: '
我是组件关为03
'});

keep-alive 组件

主要用于保留组件状态或避免组件重新渲染。

  {{name}}

include 属性可以指定哪些组件会被缓存。 

  {{name}}

exclude 属性指定哪些组件不会被缓存。

  {{name}}

过渡组件

用于在 Vue 插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡、动画效果。

过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。

过滤器的基本使用

定义过滤器

new Vue({
     el: '#app',
     data: {
         content: 'Hello,World!'
     },
     filters: {
         guanwei(value) {
             return value.toLowerCase();
         }
     }
});

使用过滤器

{{ 变量名 | 过滤器名}}

过滤器函数总接收表达式的值 (之前的操作链的结果) 作为第一个参数。在上述例子中，guanwei 过滤器函数将会收到 变量名 的值作为第一个参数。 

过滤器的分类

局部过滤器：只能在当前实例中使用的过滤器。

filters: {
  capitalize: function (value) {
    if (!value) return '';
    value = value.toString();
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
}

全局过滤器：定义在根实例书写之前，可以被所有实例使用。

Vue.filter('capitalize', function (value) {
  if (!value) return '';
  value = value.toString();
  return value.charAt(0).toUpperCase() + value.slice(1);
})

注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器。 

传入多个参数

在定义过滤器时，我们可以接受多个参数值，其中第一个参数永远是固定的，它都是要过滤的文本信息，其他参数值根据需要可以灵活设置。

定义过滤器

Vue.filter('guanwei', function (value, a, b) {
    if (!value) {
        return '';
    }
    return value.substr(a, b);
});

其中，这里的 value 就是要过滤的文本信息，a 和 b 是传递过来的其他值。 

使用过滤器

    {{ content | guanwei(begin,count) }}

content 是要传递过去的第一个参数，而 being 和 count 是传递过去的第二个和第三个参数。 

过滤器链

过滤器还可以串联：

{{ content|guanwei01|guanwei02}}

在这个例子中，guanwei01 被定义为接收单个参数的过滤器函数，表达式 content 的值将作为参数传入到函数中。然后继续调用同样被定义为接收单个参数的过滤器函数 guanwei02，将 guanwei01 的结果传递到 guanwei02 中。 

监听器

VUE 中的监听器 watch 用于监听 data 中的各个属性，当所监听的属性值发生改变时，监听器就会被自动执行。

监听单个属性

监听对象属性

监听复杂类型就需要使用到”深度监听“(deep:true) 。 

new Vue({
    el: '#app',
    data: {
        stu: {
            id: 1,
            name: '张三'
        }
    },
    watch: {
        stu: {
            deep: true,  //深度监听,消耗性能
            handler: function (newValue) {
                // 这里的 newValue 都是代表 stu 对象 只能获取到新值
                console.log('修改了stu对象的值，name的新值：' + newValue.name);
            }
        }

    }
});

还有其他几种方式，这里就不一一讲解了。 

计算属性 

计算属性也属于监听的一种，单独的监听器只能监听一个属性，当我们在一个功能中需要监听多个属性时，我们就可以使用“计算属性”来实现，计算属性中可以监听多个属性，当所监听的属性中任意一个被修改时，计算属性就会自动执行。

    
    {{getName}}
    

        

            
编号：{{item.id}}-介绍：{{item.name}}
            
路径：{{item.src}}
        
    

Vue 路由

Vue-Router 路由是 VUE 中的一个核心插件，该插件用于组件间的切换,在 VUE 中路由是用于选择或指定组件。

Vue-Router 中默认使用的是 hash 模式( VUE 支持多种模式，如 history 和 Abstract 模式，此处只讲 hash 模式)，也就是当出现如下的 URL：http://localhost:8080/#/login 在 URL 中带有#号，#号后面的称为 hash 值，它使用 hash 值做为路由使用。

当 hash 值改变时会执行 onhashchange 事件，根据路由指定的组件重新构建 DOM 结构并显示指定的视图。

下边通过一个 JavaScript 的原生案例，理解 Vue 路由的原理。

    
    


用户登录
用户注册

Vue 路由的使用

1. 由于 vue-router 是 Vue 的插件，需要单独下载 vue-router，在 Vue-Router 官网中可以直接下载，官网地址。注意下载对应版本，这里需要3.X版本。

2. 由于 vue-router 是基于 Vue 的一个核心插件，所有在引入时先引入 Vue 在引入 vue-router。

3. 使用 router-link 组件来导航。

guanwei01
guanwei02
guanwei03

4. 定义路由组件。

// 定义组件
// 这里要使用局部组件
let guanwei01 = {
    template: `
            

                关为01
            
            `
};
let guanwei02 = {
    template: `
            

                关为02
            
            `
};
let guanwei03 = {
    template: `
            

                关为03
            
            `
};

5. 创建路由实例。

// 创建VueRouter实例对象
let router = new VueRouter({
    /*
        在routers中配置路由
        匀速配置多个路由所以此处是一个数组
    */
    routes: [
        {
            //配置一个路由
            path: '/gw01',//配置路由的访问路径
            component: guanwei01//配置当前路由使用的组件 注意没有''
        },
        {
            path:'/gw02',
            component: guanwei02
        },
        {
            path:'/gw03',
            component: guanwei03
        }
    ]
})

 6. 注册路由实例。

new Vue({
    el:'#app',
    // 在路由中注册组件后 这里可以不用注册
    components: {
            guanwei01, guanwei02, guanwei03
    },
    router:router // 注册路由实例
});

7. 设置路由出口。

//写到根实例渲染的 div 中

vue-router 提供了两个在视图中使用路由的标签。

    router-link 等同于超链接，在执行时，VUE 会将该标签渲染为 a 标签。
    to:等同于超链接中的 href 属性，在执行时，VUE 会将该属性渲染为 href 属性。

    router-view:该标签时 vue 组件视图的出口，该标签会自动将 vue 组件渲染到视图中。

Vue 命名路由

我们开发时可以使用路由配置中的 path 进行访问，Vue 路由会根据 path 找到对应 component 组件渲染，在 Vue 中除了可以使用 path 访问外还可使用 name 进行访问，此时我们称为命名路由。

html 部分

关为01
关为02
关为03

VueRouter 中的设置

let router = new VueRouter({
    routes: [
        {
            path: '/gw01',
            name: 'gw01',   // 给路由起了一个名字
            component: guanwei01
        },
        {
            path: '/gw02',
            name: 'gw02',
            component: guanwei02
        },
        {
            path: '/gw03',
            name: 'gw03',
            component: guanwei03
        }
    ]
});

Vue 路由传参

在路由跳转时，我们可以借助路由将参数传递到某个组件，在 Vue 中路由传参数的方式有以下几种:

1. 路由路径参数传递。

此传参方式需要在路由配置的路径配置中设置参数占位符，格式":变量名"。

1.1 在路由调用中需要将该参数使用 params 属性传入,格式 :to="{name:'名称',params:{参数名:值}}"。

关为01
关为02
关为03

1.2 在路由配置的路径配置中设置参数占位符，格式":变量名"。

routes: [
    {
        path: '/gw01/:id',  //:id为路径传参的占位符
        component: guanwei01,
        name: 'gw01'
    },
    {
        path: '/gw02/:id',
        component: guanwei02,
        name: 'gw02'
    },
    {
        path: '/gw03/:id',
        component: guanwei03,
        name: 'gw03'
    }
]

1.3 在组件中接收参数,使用 vue 的 router 属性中的 params 接收参数。

let guanwei01 = {
    template: `
          

          关为01的组件
          
        `,
    mounted() {
        // this.$route.params.参数名
        console.log(this.$route.params.id);
    }
};

2. 查询参数传递

此传参方式无需在路由配置中进行任何修改,只要在路由调用时使用query将参数加入即可，加入参数的方式:

关为

在组件中接收参数,使用vue的router属性中的query接收参数

created(){
     console.log(this.$route.query.参数名);
}

Vue 路由嵌套

通过路由可以在视图上显示一个组件，如果在一个组件中又要去动态的显示其他组件，此时我们就要使用嵌套路由来实现。

嵌套路由又称子路由，顾名思义，指在一个路由中又定义了一个或多个路由，外部的路由称为主路由，内部的路由称为子路由。

子路由在主路由的配置中通过 children 属性进行配置，子路由的渲染也需要使用 进行渲染，在显示子路由的位置使用该标签来进行渲染。

动态路由

在静态路由中要求每个路由对应一个视图组件，如果多个视图显得的风格一致，只是内容不同，那么这时我们可以使用动态路由来共享一个视图组件(组件复用)。

定义组件(这里就定义一个组件)

let guanwei = {
    template: `
        

            动态信息内容是：{{ $route.params.参数名 }}
        
      `
};

定义路由

let router = new VueRouter({
    routes: [
        {
            path: '/gw/:参数名',
            name: 'gw',
            component: guanwei
        }
    ]
});

路由调用 

关为01

关为02
关为03

动态路由所共享的组件实例只会被创建一次，如果想在路由切换时要发送ajax请求、处理逻辑等操作就不能使用created函数完成(该函数在组件实例创建后自动执行一次)，此时就需要使用watch来监控路由的变化(使用watch监控$route对象)

let guanwei = {
    template: `
          

          动态信息内容是：{{ $route.params.message }}，{{ $route.params.message2 }}
          
        `,
    //监控路由的变化，当路由改变时自动触发$route(to,from)函数
    watch: {
        /*路由变化触发函数
             * 参数1：新的路由对象
             * 参数2：原来的路由对象
             * 通过这两个参数可以获得路由的参数值
         */
        $route(to, from) {
            console.log("to：", to);
            console.log("from：", from);
        }

    }
};

组件缓存

在切换组件视图时，组件会不断的被创建和销毁，此时就没有办法保存组件的状态，如果需要保存组件状态，则就要将组件缓存起来，让组件只被创建一次，以保持组件的状态。使用keep-alive将处于某个视图上的组件缓存起来。

全局导航守卫和meta属性的使用

全局导航守卫指当路由的路径发生改变时，它就会监控到，并执行其中的函数。全局导航守卫和 watch 的功能类似，不同之处在于 watch 只负责监控某个组件内部的路由路径变化，而全局导航守卫监控所有组件路由路径的变化导航守卫中的函数会在导航路径发生变化时自动被触发，函数的参数有一下几个:

1. to:新路径。
2. form:原路径。
3. next:next 是一个函数，用于继续执行执行链中下一个地址，如果在函数中不调用 next() 函数，则当前请求就停留在全局导航函数中，而不会继续向下执行，通过 next() 函数还可以指定下一个指定地址的路径。

Axios 的使用

axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 axios 的主要用于向服务器发送请求和接收响应，也可以称 axios是一个 Ajax 库，其中封装了 Ajax 的相关操作，方便我们使用 Ajax 与服务器交互。axios 是一个轻量级的 Ajax 库，axios 只负责交互不支持 DOM 的生成，VUE 中没有提供 Ajax 库，在 VUE 中要与服务端交互都会使用第三方 Ajax 进行，一般情况下 VUE 与服务端交互使用Axios 库实现。

Axios 的相关文档请参阅官方网站。

Axios 的一些特点：

• 从浏览器中创建 XMLHttpRequests。
• 从 node.js 创建 http 请求。
• 支持 Promise API。
• 拦截请求和响应。
• 转换请求数据和响应数据。
• 取消请求。
• 自动转换 JSON 数据。
• 客户端支持防御 XSRF。 

Axios 的搭建

使用 CDN 方式引入 js 文件

执行 get 请求 

// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

// 可选地，上面的请求可以这样做
axios.get('/user', {
    params: {
        ID: 12345
    }
})
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

执行 post 请求

let data = new URLSearchParams();
data.append("type", "c");
data.append("a", _this.a);
axios({
     method: 'post',
     url: 'url',
     data: data
}).then((response) => {
     console.log(response);
})

执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

关于对 Vue 实例的 data 区域变量赋值问题

getUser() {
    // 在 axios 有自身的 this 所以这里需要对外部 this 进行重命名操作
    let _this = this;
    axios.get('../json/user.json').then(function (response) {
        console.log(response.data.users[0].username);
        // 这里将获取到的数据赋予了 data 中的 message 变量
        _this.message = response.data.users[0].username;
    });
}

axios 返回的 response 对象属性分析 

1. config：是配置部分。
2. data：是服务器返回的结果数据，也是我们一般使用的内容，axios 一般会自动将内容转换成 json 字符串。
3. headers： 响应的头信息。
4. request：原生的 ajax 对象，XMLHttpRequest 对象。
5. status：响应状态码。
6. statusText：响应文本信息。

Vue 脚手架的搭建

VueCLI 是一个基于 Vue.js 进行快速开发的完整系统，是官方提供的一个标准化开发平台。在实际前端开发中都会使用 VUE-CLI 构建前端项目。

搭建步骤

1. 在安装 VueCLI 之前需要查看是否安装了 node ，查看方式

如果安装后会显示对应版本，未安装会提示未找到命令，可以到 node 官网去自行下载安装。 

2. 安装 npm 

#安装NPM
npm install -g cnpm --registry=https://registry.npm.taobao.org
#设置淘宝镜像
npm config set registry https://registry.npm.taobao.org
#查看镜像安装是否成功
npm config get registry

3. 全局安装 VueCLI 

npm install -g @vue/cli

4. 测试 VueCLI 是否安装成功

一些基本命令

• 安装：npm install -g @vue/cli
• 升级：npm update -g @vue/cli
• 卸载：npm uninstall -g @vue/cli
• 查看版本 vue -V 或  vue --version 

通过脚手架创建 Vue 项目

1. 通过以下命令创建 Vue 脚手架项目

vue create 项目名

注意：

• 项目名不要使用中文和大写形式，建议 kabeb-case 写法。 
• 在 cmd 中一定要切换到具体目录下执行 create 操作，这个项目会创建到当前目录下。

2. 执行上边命令后进入选择界面

3. 使用空格键可以选择我们需要的模块, 小括号有*的就是我们选择的模块, 按回车键切换下一步 。

注意：TypeScript 选项也可以不选择，如果选择会创建多个文件，并且入口文件格式会变为  main.ts（原始是 main.js）。 

4. 选择 Vue 版本。

5. 是否使用Class风格装饰器？no

原本是：home = new Vue()创建vue实例
使用装饰器后：class home extends Vue{}

6. 使用Babel与TypeScript一起用于自动检测的填充? yes 

7. 路由使用历史模式? yes

8. 使用什么css预编译器？Less

9. sss校验格式(只进行报错提醒、不严谨模式、正常模式、严格模式)？第一个

10. 代码检查方式？第一个

11. vue-cli 一般来讲是将所有的依赖目录放在 package.json 文件里。

12. 是否在以后的项目中使用以上配置？no

---

出现如下效果就创建成功！

按照步骤该启动这个项目

1. cd guanwei01
2. npm run serve 

启动成功后

打开浏览器就能看到 HelloWorld 页面

提示：关闭项目只需要 ctrl + C 就行。 

Vue 项目结构解析

Vue 项目结构

绿色区域文件：

• .gitignore：git 的忽略文件，哪些文件或者文件夹不想接受 git 的管理在这里配置。
• babel.config.js：babel 的控制文件，涉及 ES6 --> ES5 类型转换，一般我们不用管理。
• package.json：包含了项目依赖模块的列表，类似于 pom.xml 文件。
• package-lock.json：包版本控制文件，包含了项目依赖模块的一些限制信息（限制版本号，限制下载地址，限制哈希值）
• README.md：是一个项目的入门手册，里面介绍了整个项目的使用、功能等等。
• tsconfig.json：如果目录下存在一个 tsconfig.json 文件，那么意味着此目录是 TypeScript 项目的根目录。 tsconfig.json 文件中指定了用来编译这个项目的根文件和编译选项。
• vue.config.js：当前 vue 项目的配置文件，启动的时候会自动加载。 

文件夹讲解：

public 文件夹：任何放置在 public 文件夹的静态资源都会被简单的复制，而不经过 webpack。你需要通过绝对路径来引用它们。一般这里存放网站的页签图标和 index.html 页面。

src 文件夹：

选择 TypeScript 时会出现 shims-tsx.d.ts 和 shims-vue.d.ts 两个文件

• shims-tsx.d.ts，允许你以.tsx结尾的文件，在Vue项目中编写jsx代码
• shims-vue.d.ts 主要用于 TypeScript 识别.vue 文件，Ts默认并不支持导入 vue 文件，这个文件告诉ts 导入.vue 文件都按VueConstructor处理。

main.ts(main.js)： 入口文件，类似于 main 方法，当执行完毕 npm run serve 后会执行这个文件。

App.vue：根实例组件，类似于 new Vue({}) 的写法。

router：路由文件夹。

components：组件文件夹，除过 App.vue 根组件外其他组件都在这里书写。

assets：静态资源文件夹，图片、视频等静态内容都在这里。

views： 3.x 后新引进来的文件夹，对 components 文件夹进行了更详细的区分，views是页面级组件，components是小组件，小组件可被引用在views中，一般views组件不被复用。

注意：因为创建时选择的模块不同，每次产生的文件会有所不同。 

main.js 文件详解

// 这个文件是整个项目的入口文件
// 引入Vue
import Vue from 'vue'
// 引入 App 组件，它是所有组件的父组件，对应普通Vue的那个


  
    
    
    
    
    
    
    
    
    
  
  
    
    
    
    

    
  

Xxx.vue 文件详解

.vue文件就是一个（或局部）组件。 里面包括三个部分template、js 和 css。

vue.config.js 文件详解

module.exports = {
    // publicPath:process.env.NODE_ENV === 'production' ? '/vue_workspac/aihuhuproject/' : '/',

    //基本路径
    publicPath: './',//默认的'/'是绝对路径，如果不确定在根路径，改成相对路径'./'
    // 输出文件目录
    outputDir: 'dist',
    assetsDir: 'static',
    indexPath: 'index.html',
    // eslint-loader 是否在保存的时候检查
    lintOnSave: true,
    // 生产环境是否生成 sourceMap 文件
    productionSourceMap: false,
    // css相关配置
    css: {
        // 是否使用css分离插件 ExtractTextPlugin
        extract: true,
        // 开启 CSS source maps?
        sourceMap: false,
    },
    // webpack-dev-server 相关配置
    devServer: {
        open: false,//open 在devServer启动且第一次构建完成时，自动用我们的系统的默认浏览器去打开要开发的网页
        host: '0.0.0.0',//默认是 localhost。如果你希望服务器外部可访问，指定如下 host: '0.0.0.0'，设置之后之后可以访问ip地址
        port: 8080,//设置端口号
        hot: true,//hot配置是否启用模块的热替换功能，devServer的默认行为是在发现源代码被变更后，通过自动刷新整个页面来做到事实预览，开启hot后，将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。
        https: false,
        hotOnly: false,// hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败
        proxy: {
            '/': {
                target: 'http://guanwei:8080', //目标接口域名
                secure: false, //false为http访问，true为https访问
                changeOrigin: true, //是否跨域
                pathRewrite: {
                    '^/': '/' //重写接口
                }
            }
        }, // 设置代理
        before: app => { }
    },
    // 第三方插件配置
    pluginOptions: {
        // ...
    }
};

npm run serve 命令执行完毕后脚手架做了什么？

1. 执行 main.ts(或main.js) 文件。
2. main.ts 中加载了 Vue、路由等依赖，引入了 App 组件，将这个组件放入 app 容器。
3. App 组件(App.vue)引入了其他组件。
4. 访问了 index.html 页面，显示 
   容器的内容。

VueCLI 中整合 ElementUI

安装element ui组件,在项目目录下使用一下命令安装。

npm i element-ui -S

在 main.js 中引入 element ui 功能。

import Vue from "vue";
import App from "./App.vue";
import router from "./router";

/**************引入ElementUI组件*****************/
//导入ElementUI组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);//设置在Vue中使用ElementUI
/****************************************/

Vue.config.productionTip = false;
new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

VueCLI 中整合 Axios 

安装Axios，在项目目录下输入一下命令完成axios的安装。

npm install axios

在 main.js 中引入 Axios 功能。

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
//导入ElementUI组件
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

/************引入axios****************/
//导入axios组件
import axios from 'axios'
//创建axios实例对象，并进行通用配置
var axiosInstance = axios.create({
  //设置axios进行ajax请求的基础路径
  baseURL:'http://localhost:3000/',
  //设置请求头，指定请求为ajax请求
  headers:{'X-Requested-With': 'XMLHttpRequest'}
});
//将axios设置为Vue的原型属性
Vue.prototype.$axios=axiosInstance;
/***********************************/

Vue.use(ElementUI);//设置在Vue中使用ElementUI
Vue.config.productionTip = false;
new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

注意：axios 做为 Vue 的原型属性被引入，属性名为 $axios，在 vue 视图中通过 this.$axios 来使用 axios，也可以直接通过 axios 来调用。

Vue 脚手架跨域

什么是跨域 

浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。在前后端分离的模式下，前后端的域名是不一致的，此时就会发生跨域访问问题。跨域出于浏览器的同源策略限制。

同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）。

如何解决跨域

处理跨域我们有多重方案可供选择：

1. 使用 ajax 的 jsonp 方案。

2. 使用 cors 方案。

3. 设置 document.domain 解决无法读取非同源网页的 Cookie 问题.

4. 跨文档通信 API：window.postMessage()。

5. Vue 脚手架中的配置方案。

其实跨域的方案有很多种，这里只罗列了5种方式，在这里我们不探讨前4种方案，有兴趣的童鞋可以下来自行了解。我们来说一说 VueCLI 的跨域处理。

VueCLI 的跨域处理

1. 配置 vue.config.js 文件

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    lintOnSave: false,  // 关闭语法检查 如果为true要求命名规范为驼峰
    devServer: {
        proxy: {
            '/api': {
                // 后台服务器的网址，到项目名称就行 具体路径由axios请求
                target: 'http://guanwei:8080/guanwei_war',
                // 是否开启本地代理 默认true
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
})

2. axios 中进行跨域请求

// 必须以 /api开头 这样代理会被触发 guanwei/find 是具体资源名称
axios.get('/api/guanwei/find')
    .then(function (response) {
      // 具体的一些操作
    });