11.6 v-model结合selcet

• 选择一个

  • 
        
        
            苹果
            香蕉
            草莓
            菠萝
            榴莲
        
        
    您选择的水果是: {{fruit}}
    
    
    
    

  • 

• 多选

  •  
    
            苹果
            香蕉
            草莓
            菠萝
            榴莲
        
        
    您选择的水果是: {{fruits}}
        
    
    
    
    

  • 

11.7 v-model值绑定

动态的给 value 赋值而已

• 我们前面的 value 中的值，可以回头去看一下，都是在定义 input 的时候直接给定的。
• 但是真实开发中，这些 input 的值可能是从网络获取或定义在 data 中的。
• 所以我们可以通过 v-bind:value 动态的给 value 绑定值。

    
        {{item}}
    
    
您选择的是: {{fruits}}

11.8 v-model修饰符的私用

1. lazy 修饰符：

   • 默认情况下，v-model 默认是在 input 事件中同步输入框的数据的。

   • 也就是说，一旦有数据发生改变对应的 data 中的数据就会自动发生改变。

   • lazy 修饰符可以让数据在失去焦点或者回车时才会更新：

   • 
         
         
         
     {{message}}
     
     
     
     

2. number 修饰符：

   • 默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。

   • 但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。

   • number 修饰符可以让在输入框中输入的内容自动转成数字类型：

   • 
         
         
         
     {{age}} ---- {{typeof age}}
     
     
     
     

3. trim 修饰符：

   • 如果输入的内容首尾有很多空格，通常我们希望将其去除

   • trim 修饰符可以过滤内容左右两边的空格

   • 
         
         
         
     您输入的name是：{{name}}
     
     
     
     

12. 组件化开发

12.1 认识组件化

12.1.1 什么是组件化

• 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展。
• 但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。

12.1.2 Vue.js组件思想

组件化是 Vue.js 中的重要思想

• 它提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
• 任何的应用都会被抽象成一颗组件树。

组件化思想的应用：

• 有了组件化的思想，我们在之后的开发中就要充分的利用它。
• 尽可能的将页面拆分成一个个小的、可复用的组件。
• 这样让我们的代码更加方便组织和管理，并且扩展性也更强。

12.2 注册组件

12.2.1 注册组件的基本步骤

组件的使用分成三个步骤：

• 创建组件构造器
• 注册组件
• 使用组件。

12.2.2 注册组件步骤解析

1. Vue.extend()：
   • 调用 Vue.extend() 创建的是一个组件构造器。
   • 通常在创建组件构造器时，传入 template 代表我们自定义组件的模板。
   • 该模板就是在使用到组件的地方，要显示的 HTML 代码。
   • 事实上，这种写法在 Vue2.x 的文档中几乎已经看不到了，它会直接使用下面我们会讲到的语法糖，但是在很多资料还是会提到这种方式，而且这种方式是学习后面方式的基础。
2. Vue.component()：
   • 调用 Vue.component() 是将刚才的组件构造器注册为一个组件，并且给它起一个组件的标签名称。
   • 所以需要传递两个参数：1、注册组件的标签名 2、组件构造器。
3. 组件必须挂载在某个 Vue 实例下

12.3 其他组件补充

12.3.1 全局组件和局部组件

• 当我们通过调用 Vue.component() 注册组件时，组件的注册是全局的
  • 这意味着该组件可以在任意 Vue 示例下使用。
• 如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件

12.3.2 父组件和子组件的区分

    
    
------
    

12.3.3 注册组件的语法糖写法

• 全局组件的语法糖

• 局部组件的语法糖

12.3.4 组件模板分离

• 方式一：

• 方式二：

12.4 组件不能访问Vue实例数据

• 组件是一个单独功能模块的封装：
  • 这个模块有属于自己的 HTML 模板，也应该有属性自己的数据 data 。

组件是不能直接访问 Vue 实例中的数据的

12.4.1 组件的 data 属性

Vue 组件应该有自己保存数据的地方

• 组件对象也有一个 data 属性(也可以有 methods等属性，下面我们有用到)
• 只是这个 data 属性必须是一个函数
• 而且这个函数返回一个对象，对象内部保存着数据

12.4.2 组件不能访问Vue示例数据的原因

在于 Vue 让每个组件对象都返回一个新的对象，因为如果是同一个对象的，组件在多次使用后会相互影响

13. 父子组件通信

子组件是不能引用父组件或者Vue实例的数据的。

但是，在开发中，往往一些数据确实需要从上层传递到下层：

• 比如在一个页面中，我们从服务器请求到了很多的数据。
• 其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。
• 这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件(父组件)将数据传递给小组件(子组件)。

如何进行父子组件间的通信呢

• 通过 props 向子组件传递数据
• 通过事件向父组件发送消息

13.1 父传子 props

13.1.1 使用方法

在组件中，使用选项 props 来声明需要从父级接收到的数据。

props 的值有两种方式：

• 方式一：字符串数组，数组中的字符串就是传递时的名称。
• 方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。推荐

方式一：

传对象

支持的数据类型：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

13.1.2 props驼峰标识

不支持驼峰标识

解决方法

? cInfo 改为 c-info

13.2 子传父

• props 用于父组件向子组件传递数据，还有一种比较常见的是子组件传递数据或事件到父组件中。
• 我们应该如何处理呢？这个时候，我们需要使用自定义事件来完成。
• 什么时候需要自定义事件呢？
  • 当子组件需要向父组件传递数据时，就要用到自定义事件了。
  • 我们之前学习的 v-on 不仅仅可以用于监听 DOM 事件，也可以用于组件间的自定义事件。
• 自定义事件的流程：
  • 在子组件中，通过 $emit() 来触发事件。
  • 在父组件中，通过 v-on 来监听子组件事件。

13.3 父子间通信案例1

• 父组件通过 props 将 counter 传递给子组件；
• 子组件通过自定义事件 add-counter 和 decrement-counter 将点击事件传递给父组件。

13.4 父子间通信案例2

注意：

• 子组件中 number1 和 number2 的值初始来源于 num1 和 num2，将 number1 和 number2与 双向绑定的时候不能直接绑定 number1 和 number2，需要找一个中间值。

13.5 父子组件的访问方式

有时候我们需要父组件直接访问子组件，子组件直接访问父组件，或者是子组件访问根组件。

• 父组件访问子组件：使用 $children 或 $refs
• 子组件访问父组件：使用 $parent

13.5.1 children 方式（不推荐）

• 
      
      按钮
  
  
  
  
  

• 

13.5.2 refs方式

14. 插槽slot

组件的插槽

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

14.1 插槽的基本使用

1. 插槽的基本使用
2. 插槽的默认值 xxxxx
3. 如果有多个值，同时放入到组件中进行替换时，一起作为替换元素

    按钮
    哈哈
    呵呵
    按钮2
    
        hahahaha
        yiyiyiyi
        
divdiv
        
ppppppppp
    
    
    
    
    

14.2 具名插槽

给 slot 元素一个 name 属性即可

    
        标题
    
    
        按钮
    

14.3 编译作用域

父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。

14.4 作用域插槽的使用

目的：父组件替换插槽的标签，但是内容由子组件来提供。

我们先提一个需求：

• 子组件中包括一组数据，比如：Languages: ['JavaScript', 'Python', 'Swift', 'Go', 'C++']
• 需要在多个界面进行展示：
  • 某些界面是以水平方向一一展示的，
  • 某些界面是以列表形式展示的，
  • 某些界面直接展示一个数组
• 内容在子组件，希望父组件告诉我们如何展示，怎么办呢？
  • 利用 slot 作用域插槽就可以了

15. webpack

15.1 什么是webpack

webpack是一个现代的JavaScript应用的静态 模块打包 工具。

从图中我们可以看出，Webpack 可以将多种静态资源 js、css、less 转换成一个静态文件，减少了页面的请求。

cnpm install webpack@3.6.0 -g

webpack --version

15.2 webpack基本使用

webpack 3.6.0 的打包命令：

webpack ./src/main.js ./dist/bundle.js

// 1.使用commonjs的模块化规范
const {add, mul} = require('./mathUtil.js')

console.log(add(20, 30));
console.log(mul(20, 30));

// 2. 使用ES6的模块化规范
import {
    name, age, height
} from "./info";

console.log(name);
console.log(age);
console.log(height)

15.3 webpack.config.js 和 package.json 配置

如果每次使用 webpack 的命令都需要写上入口和出口作为参数，就非常麻烦，有没有一种方法可以将这两个参数写到配置中，在运行时，直接读。

1. npm init

   • 会创建 package.json 文件

2. 新建 webpack.config.js 文件

   • const path = require('path')
     
     module.exports = {
         entry: './src/main.js',/*入口*/
         output: {
             path: path.resolve(__dirname, 'dist'),/*路径  这里只能填绝对路径*/
             filename: 'bundle.js', /*文件名*/
         },/*出口*/
     }
     

3. 进阶：使用 npm run build 命令代替 webpack

   • 配置 package.json

   • {
       "name": "meetwebpack",
       "version": "1.0.0",
       "description": "",
       "main": "index.js",
       "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "build": "webpack" // 添加命令  默认先运行本地的webpack 而非全局webpack
       },
       "author": "",
       "license": "ISC"
     }
     
     

15.4 webpack中使用css文件的配置

1. webpack 主要是用来处理编写的 js 代码
   • 但是开发中不仅仅需要处理 js 文件，还需要加载 css、图片等。这个时候就需要给 webpack 扩展对应的 loader 即可。
2. loader 使用过程
   1. 通过 npm 安装需要使用的 loader
   2. 在 webpack.config.js 中的 mudule 关键字下进行配置

15.4.1 css-loader

• 新建一个 css 文件 normal.css

  • body {
        background-color: antiquewhite;
    }
    

• main.js 中引入该 css文件

  • // 3. 依赖css文件
    require('./css/normal.css')
    

• 安装 css-loader 和 style-loader

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

• 配置 webpack.config.js

  • const path = require('path')
    
    module.exports = {
        /*处理Js文件*/
        entry: './src/main.js',/*入口*/
        output: {
            path: path.resolve(__dirname, 'dist'),/*路径  这里只能填绝对路径*/
            filename: 'bundle.js', /*文件名*/
        },/*出口*/
        /*处理CSS文件*/
        module: {
            rules: [
                {
                    test: /\.css$/i,
                    /*css-loader只负责加载css文件
                    style-loader负责将样式添加到DOM中
                    使用多个loader的时候 读取顺序：从右向左
                    * */
                    use: ["style-loader", "css-loader"],
                },
            ],
        },
    }
    

• css-loader 只负责加载 css 文件
• style-loader 负责将样式添加到 DOM 中
• 使用多个 loader 的时候 读取顺序：从右向左

15.4.2 less文件使用

1. 新建 special.less 文件

   • @fontSize: 50px;
     @fontColor: orange;
     
     body {
       font-size: @fontSize;
       color: @fontColor;
     }
     
     

2. main.js 中引入该 less文件

   • // 4. 依赖less文件
     require('./css/special.less')
     

3. 安装 less-loader

   • npm install less less-loader --save-dev
     # 注意对应版本号
     

4. 配置 webpack.config.js

   • const path = require('path')
     
     module.exports = {
         /*处理Js文件*/
         entry: './src/main.js',/*入口*/
         output: {
             path: path.resolve(__dirname, 'dist'),/*路径  这里只能填绝对路径*/
             filename: 'bundle.js', /*文件名*/
         },/*出口*/
         /*处理CSS文件*/
         module: {
             rules: [
                 {
                     test: /\.css$/i,
                     /*css-loader只负责加载css文件
                     style-loader负责将样式添加到DOM中
                     使用多个loader的时候 读取顺序：从右向左
                     * */
                     use: ["style-loader", "css-loader"],
                 },
                 {
                     test: /\.less$/i,
                     use: [
                         {
                             loader: 'style-loader',
                         },
                         {
                             loader: 'css-loader',
                         },
                         {
                             loader: 'less-loader',
                         },
                     ],
                 },
             ],
         },
     }
     

5. 

15.4.3 webpack图片文件的处理

1. 添加 图片 文件

2. 修改 css 文件

   • body {
         background: url("../img/avatar.jpg");
     }
     

3. 安装 file-loader

   • npm install file-loader --save-dev
     

4. 配置 webpack.config.js

   • const path = require('path')
     
     module.exports = {
         /*处理Js文件*/
         entry: './src/main.js',/*入口*/
         output: {
             path: path.resolve(__dirname, 'dist'),/*路径  这里只能填绝对路径*/
             filename: 'bundle.js', /*文件名*/
             publicPath: 'dist/', /*配置上这个以后涉及到url的操作会自动把这个路径添加进去*/
         },/*出口*/
         /*处理CSS文件*/
         module: {
             rules: [
                 {
                     test: /\.css$/i,
                     /*css-loader只负责加载css文件
                     style-loader负责将样式添加到DOM中
                     使用多个loader的时候 读取顺序：从右向左
                     * */
                     use: ["style-loader", "css-loader"],
                 },
                 {
                     test: /\.less$/i,
                     use: [
                         {
                             loader: 'style-loader',
                         },
                         {
                             loader: 'css-loader',
                         },
                         {
                             loader: 'less-loader',
                         },
                     ],
                 },
                 {
                     test: /\.(png|jpg|gif)$/,
                     use: [
                         {
                             loader: 'file-loader',
     
                             options: {
                                 name: 'img/[name].[hash:8].[ext]' /*文件的路径已经名字*/
                             },
                             // mode: 'development',
                         },
                     ],
                 },
             ],
         },
     }
     

   • 

15.4.4 ES6语法处理

如果希望将ES6的语法转成ES5，那么就需要使用 babel

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

配置 webpack.config.js

15.4.5 wepack配置vue

• cnpm install vue@2.5.21 --save
  '@2.5.21' 指的是vue的版本号 
  

• main.js

  • // 5. 使用Vue进行开发
    import Vue from 'vue'
    
    const app = new Vue({
        el: '#app',
        data: {
            message: 'Hello webpack',
        }
    })
    

• 出现问题

  • 

• 解决方法

  • webpack.config.js

  • const path = require('path')
    
    module.exports = {
        /*处理Js文件*/
        entry: './src/main.js',/*入口*/
        output: {
            path: path.resolve(__dirname, 'dist'),/*路径  这里只能填绝对路径*/
            filename: 'bundle.js', /*文件名*/
            publicPath: 'dist/', /*配置上这个以后涉及到url的操作会自动把这个路径添加进去*/
        },/*出口*/
        /*处理CSS文件*/
        module: {
            rules: [
                {
                    test: /\.css$/i,
                    /*css-loader只负责加载css文件
                    style-loader负责将样式添加到DOM中
                    使用多个loader的时候 读取顺序：从右向左
                    * */
                    use: ["style-loader", "css-loader"],
                },
                {
                    test: /\.less$/i,
                    use: [
                        {
                            loader: 'style-loader',
                        },
                        {
                            loader: 'css-loader',
                        },
                        {
                            loader: 'less-loader',
                        },
                    ],
                },
                {
                    test: /\.(png|jpg|gif)$/,
                    use: [
                        {
                            loader: 'file-loader',
    
                            options: {
                                name: 'img/[name].[hash:8].[ext]' /*文件的路径已经名字*/
                            },
                            // mode: 'development',
                        },
                    ],
                },
            ],
        },
        /*指明vue使用runtime-compile版本*/
        resolve: {
            alias: {
                'vue$': 'vue/dist/vue.esm.js',
            }
        }
    }
    

15.4.6 el与template的区别

• 在前面的 Vue 实例中，我们定义了 el 属性，用于和 index.html 中的 #app 进行绑定，让 Vue 实例之后可以管理它其中的内容
• 这里，我们可以将 div 元素中的 {{message}} 内容删掉，只保留一个基本的 id 为 div 的元素
• 但是如果我依然希望在其中显示 {{message}} 的内容，应该怎么处理呢？
• 我们可以再定义一个 template属性，代码如下：

// 5. 使用Vue进行开发
import Vue from 'vue'

const app = new Vue({
    el: '#app',
    template:
        `

          
{{message}}
        按钮
        
{{name}}
        
`,
    data: {
        message: 'Hello webpack',
        name: '刘云杰',
        methods : {
            btnClick() {
                console.log('lyj ');
            }
        }
    }
})

15.4.7 vue的终极使用方式

• 优化第一步：

  • // 5. 使用Vue进行开发
    import Vue from 'vue'
    
    const App = {
        template:
            `
    
              
    {{message}}
            按钮
            
    {{name}}
            
    `,
        data() {
            return {
                message: 'Hello webpack',
                name: '刘云杰',
            }
        },
        methods: {
            btnClick() {
            }
        }
    }
    
    const app = new Vue({
        el: '#app',
        template: ``,
        data: {
        },
        components: {
            App
        }
    })
    

• 优化第二步：

  • 新建 app.js

    • export default {
          template:
              `
      
                
      {{message}}
              按钮
              
      {{name}}
              
      `,
          data() {
              return {
                  message: 'Hello webpack',
                  name: '刘云杰',
              }
          },
          methods: {
              btnClick() {
              }
          }
      }
      

  • 修改 main.js

    • // 5. 使用Vue进行开发
      import Vue from 'vue'
      import App from './vue/app'
      
      const app = new Vue({
          el: '#app',
          template: ``,
          data: {
          },
          components: {
              App
          }
      })
      
      

• 优化第三步：

  • 新建 App.vue文件

15.4.8 webpack的plugin的使用

什么是 plugin

• plugin 是插件的意思，通常是用于对某个现有的架构进行扩展。
• webpack 中的插件，就是对 webpack 现有功能的各种扩展，比如打包优化，文件压缩等等。

loader 和 plugin 区别

• loader 主要用于转换某些类型的模块，它是一个转换器。
• plugin 是插件，它是对 webpack 本身的扩展，是一个扩展器。

plugin 的使用过程：

• 步骤一：通过 npm 安装需要使用的 plugins (某些webpack已经内置的插件不需要安装)
• 步骤二：在 webpack.config.js 中的plugins中配置插件。

1. 添加版权的 plugin

   • 插件名字叫 BannerPlugin，属于 webpack 自带的插件。

   • 修改 webpack.config.js 文件

   • const webpack = require('webpack')
     
     module.exports = {
         /*......*/
         /*插件*/
         plugins : [
             new webpack.BannerPlugin('版权问题'),
         ]
     }
     

2. HtmlWebpackPlugin

   • 将 index.html 文件打包到 dist 文件夹中

   • HtmlWebpackPlugin 插件可以为我们做这些事情：

     • 自动生成一个 index.html 文件(可以指定模板来生成)
     • 将打包的 js 文件，自动通过 script 标签插入到 body 中

   • 安装命令 npm install html-webpack-plugin --save-dev

   • 配置 webpack.config.js 文件

     • const path = require('path')
       const webpack = require('webpack')
       const HtmlWebpackPlugin = require('html-webpack-plugin')
       
       module.exports = {
           /*插件*/
           plugins : [
               new webpack.BannerPlugin('版权问题'),
               new HtmlWebpackPlugin({
                  template: 'index.html',
               }),
           ]
       }
       

3. uglifyjs-webpack-plugin

   • 对 js 等文件进行压缩处理
   • npm install uglifyjs-webpack-plugin@1.1.1 --save-dev
   • 修改 webpack.config.js 文件
     • 

4. webpack-dev-server

   • 作用：搭建本地开发服务器
   • npm install --save-dev webpack-dev-server@2.9.1
     • contentBase：为哪一个文件夹提供本地服务，默认是根文件夹，我们这里要填写./dist
     • port：端口号
     • inline：页面是否实时刷新
     • historyApiFallback：在SPA页面中，依赖HTML5的history模式
   • webpack.config.js 文件配置
     • 
     • --open 参数表示直接打开浏览器
     • 

16. vue-cli 脚手架

16.1 vue-cli介绍

CLI是什么意思?

• CLI 是 Command-Line Interface , 翻译为命令行界面, 但是俗称脚手架.
• Vue CLI 是一个官方发布 vue.js 项目脚手架
• 使用 vue-cli 可以快速搭建 Vue 开发环境以及对应的webpack 配置

使用vue cli的前提

• Node.js
• webpack

安装vue脚手架

• npm install -g @vue/cli
  • 上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目时不可以的。
• cnpm install @vue/cli-init -g
• Vue CLI2初始化项目
  • vue init webpack my-project
• Vue CLI3初始化项目
  • vue create my-project

16.2 vue-cli2

1. 安装过程：
2. 目录结构详情

16.3 Runtime-Compiler和Runtime-only的区别

• 简单总结
  • 如果在之后的开发中，你依然使用 template，就需要选择 Runtime-Compiler；
  • 如果你之后的开发中，使用的是 .vue 文件夹开发，那么可以选择 Runtime-only。
• 项目对比
  • 
• Vue程序运行过程
  • 

16.3.1 render函数

1. // The Vue build version to load with the `import` command
   // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
   import Vue from 'vue'
   import App from './App'
   
   Vue.config.productionTip = false
   
   /* eslint-disable no-new */
   new Vue({
     el: '#app',
   
     /*render函数*/
     render: function (createElement) {
       // 1. createElement('标签', {标签的属性}, ['标签的内容'])
       return createElement('h2',
         {class: 'box'},
         ['Hello World', createElement('button', ['按钮'])]);
     }
     // components: { App },
     // template: ''
   })
   
   

   • 

2. // The Vue build version to load with the `import` command
   // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
   import Vue from 'vue'
   import App from './App'
   
   Vue.config.productionTip = false
   
   const cpn = {
     template: `
   {{message}}
   `,
     data() {
       return {
         message : '我是组件',
       }
     }
   }
   
   /* eslint-disable no-new */
   new Vue({
     el: '#app',
     /*render函数*/
     render: function (createElement) {
       // 2. 传入组件
       return createElement(cpn);
     }
     // components: { App },
     // template: ''
   })
   
   

   • 

   • 进阶

   • // The Vue build version to load with the `import` command
     // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
     import Vue from 'vue'
     import App from './App'
     
     Vue.config.productionTip = false
     
     /* eslint-disable no-new */
     new Vue({
       el: '#app',
       /*render函数*/
       render: function (createElement) {
         // 2. 传入组件
         return createElement(App);
       }
       // components: { App },
       // template: ''
     })
     
     

   • 

16.3 vue-cli3

16.3.1 基础介绍

• vue-cli 3 与 2 版本有很大区别
  • vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
  • vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
  • vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
  • 移除了static文件夹，新增了public文件夹，并且index.html移动到public中

配置相关

16.3.2 图像化界面

1. vue ui
2. 
3. 
4. 

16.3.2 自定义配置

1. 创建 vue.config.js
2. 添加自定义的配置

16.3.3 箭头函数和 this指向

const 函数名 = (参数列表)=>{}

• 例子1：

• 例子2：只有一个参数

this 指向

16.4 路由与映射

16.4.1 认识路由

路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科

• 路由器提供了两种机制: 路由和转送.
  • 路由是决定数据包从来源到目的地的路径.
  • 转送将输入端的数据转移到合适的输出端.
• 路由中有一个非常重要的概念叫路由表.
  • 路由表本质上就是一个映射表, 决定了数据包的指向.

前端渲染与后端渲染

• 后端路由是指后端处理 URL 和 页面之间的映射关系。
  • 早期的网站开发整个HTML页面是由服务器来渲染
    • 一个页面有自己对应的网址, 也就是URL.
    • URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理.
    • Controller进行各种处理, 最终生成HTML或者数据, 返回给前端.
    • 这就完成了一个IO操作.
  • 后端路由的缺点:
    • 一种情况是整个页面的模块由后端人员来编写和维护的.
    • 另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码.
    • 而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情
• 前后端分离
  • 后端只提供API来返回数据, 前端通过获取数据, 并且可以通过JavaScript将数据渲染到页面中
  • 前端渲染：浏览器中网页内的大部分内容，都是由前端编写的 JS 代码在浏览器中执行，最终渲染出来的网页。
• 单页面富应用阶段
  • 在前后端分离的基础上加了一层前端路由，即维护前端来维护一套路由规则。
  • 整个网页中只有一个 html 页面。

url 的 hash

• URL 的 hash 也就是锚点(#), 本质上是改变 window.location 的 href 属性；
• 可以通过直接赋值 location.hash 来改变 href , 但是页面不发生刷新。

16.4.2 vue-router基础

vue-router是基于路由和组件的

• 路由用于设定访问路径, 将路径和组件映射起来.
• 在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.

1. 步骤一: 安装 vue-router
   1. npm install vue-router --save
2. 步骤二: 在模块化工程中使用它(因为是一个插件, 所以可以通过 Vue.use() 来安装路由功能)
   1. 第一步：导入路由对象，并且调用 Vue.use(VueRouter)
   2. 第二步：创建路由实例，并且传入路由映射配置
   3. 第三步：在 Vue 实例中挂载创建的路由实例

/*配置路由的相关信息*/
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

// 1.通过Vue.use(插件) 安装插件
Vue.use(Router)

// 2. new Router({}) 创建 VueRouter对象 3. export 导出路由
export default new Router({
  // 配置路由和组件之间的应用关系
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

16.4.3 路由映射配置

第一步: 创建路由组件

第二步: 配置路由映射: 组件和路径映射关系

第三步: 使用路由: 通过 和

: 该标签是一个 vue-router 中已经内置的组件, 它会被渲染成一个 标签.

: 该标签会根据当前的路径, 动态渲染出不同的组件.

网页的其他内容, 比如顶部的标题/导航, 或者底部的一些版权信息等会和 处于同一个等级.

在路由切换时, 切换的是 挂载的组件, 其他内容不会发生改变.

/*配置路由的相关信息*/
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import about from "../components/about";

// 1.通过Vue.use(插件) 安装插件
Vue.use(Router)

// 2. new Router({}) 创建 VueRouter对象 3. export 导出路由
export default new Router({
  // 配置路由和组件之间的应用关系
  routes: [
    /*一个映射关系一个对象*/
    {
      path: '',
      redirect: '/',
    },
    {
      path: '/home',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/about',
      name: 'about',
      component: about,
    }
  ]
})

/*配置路由的相关信息*/
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import about from "../components/about";

// 1.通过Vue.use(插件) 安装插件
Vue.use(Router)

// 2. new Router({}) 创建 VueRouter对象 3. export 导出路由
export default new Router({
  // 配置路由和组件之间的应用关系
  routes: [
    /*一个映射关系一个对象*/
    {
      path: '',
      redirect: '/home',
    },
    {
      path: '/home',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/about',
      name: 'about',
      component: about,
    }
  ],
  mode: 'history',
})

• 在前面的 中, 我们只是使用了一个属性: to, 用于指定跳转的路径.
• 还有一些其他属性:
  • tag: tag可以指定 之后渲染成什么组件, 比如 会被渲染成一个
  • 元素, 而不是 。
  • replace: replace不会留下 history 记录, 所以指定 replace 的情况下，后退键返回不能返回到上一个页面中。
  • active-class: 当 对应的路由匹配成功时, 会自动给当前元素设置一个 router-link-active 的 class 。
    • 设置 active-class 可以修改默认的名称.在进行高亮显示的导航菜单或者底部 tabbar 时, 会使用到该类；
    • 但是通常不会修改类的属性, 会直接使用默认的 router-link-active 即可。

import Vue from "vue"
import Vuex from 'vuex'

// 1. 安装插件
Vue.use(Vuex)

// 2. 创建对象
const store = new Vuex.Store({
  /*一共有以下5个参数，每个参数都是对象*/
  state: {
    // 状态
    counter: 1000,
    student: [
      {id: 110, name: 'lyj0', age: 18},
      {id: 111, name: 'lyj1', age: 19},
      {id: 112, name: 'lyj2', age: 20},
      {id: 113, name: 'lyj3', age: 21},
    ],
  },
  mutations: {
    // 方法  默认有一个参数state
    increment(state) {
      state.counter++;
    },
    decrement(state) {
      state.counter--;
    }
  },
  actions: {},

  getters: {
    powerCount(state) {
      return state.counter * state.counter;
    },
    more20Stu(state) {
      return state.student.filter(s=>s.age>=20);
    },
      // getters默认是不能传递参数的, 如果希望传递参数, 那么只能让getters本身返回另一个函数.
    more20StuLength(state, getters) {
      return getters.more20Stu.length;
    }
  },
  modules: {},
})

// 3.导出
export default store

const store = new Vuex.Store({
  /*一共有以下5个参数，每个参数都是对象*/
  state: {
    // 状态
    counter: 1000,
    student: [
      {id: 110, name: 'lyj0', age: 18},
      {id: 111, name: 'lyj1', age: 19},
      {id: 112, name: 'lyj2', age: 20},
      {id: 113, name: 'lyj3', age: 21},
    ],
  },
  mutations: {
    // 方法  默认有一个参数state
    increment(state) {
      state.counter++;
    },
    decrement(state) {
      state.counter--;
    }
  },
  actions: {},

  getters: {
    powerCount(state) {
      return state.counter * state.counter;
    },
    more20Stu(state) {
      return state.student.filter(s=>s.age>=20);
    },
    more20StuLength(state, getters) {
      return getters.more20Stu.length;
    },
    moreAgeStu(state) {
      return function (age) {
        return state.student.filter(s=>s.age>=age);
      }
    },
  },
  modules: {},
})

    addStudent() {
      // 1. 普通的提交风格
      const student = {id: 115, name: '刘云杰', age: 20};
      // this.$store.commit('addStudent', student);

      //2. 特殊的提交风格
      this.$store.commit({
        type: 'addStudent',
        student,
      })
    }

import Vue from 'vue'
import App from './App'
import axios from 'axios'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

axios({
  url: 'http://123.207.32.32:8000/home/multidata',
  // methods: 'post', 请求方式
}).then(res=>{
  console.log(res);
})

import Vue from 'vue'
import App from './App'
// import router from './router'
import axios from 'axios'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // router,
  // axios,
  render: h => h(App)
})

/* 1基本使用*/
// axios({
//   url: 'http://123.207.32.32:8000/home/multidata',
//   // methods: 'post', 请求方式
// }).then(res => {
//   console.log(res);
// })

/*2 并发请求*/
axios.all([axios({
  url: 'http://123.207.32.32:8000/home/multidata',
}), axios({
  url: 'http://123.207.32.32:8000/home/data',
  params: {
    type: 'sell',
    page: 2,
  }
})]).then(axios.spread((res1, res2)=>{
  console.log(res1);
  console.log(res2);
}))

// 公共配置
axios.defaults.baseURL = 'http://123.207.32.32:8000',
axios.defaults.timeout = 1000

/*2 并发请求*/
axios.all([axios({
  url: '/home/multidata',
}), axios({
  url: '/home/data',
  params: {
    type: 'sell',
    page: 2,
  }
})]).then(axios.spread((res1, res2)=>{
  console.log(res1);
  console.log(res2);
}))

  // 2. axios 的拦截器
  /*拦截请求*/
  /*请求拦截的作用：
  * 1. config中的一些信息不符合服务器的要求
  * 2. 每次发送网络请求时，希望在界面中显示一个请求的图标
  * 3. 某些网络请求(比如登录 token)必须携带一些特殊的信息
  * */
  axios.interceptors.request.use(config=>{
    console.log('axios拦截请求成功');
  }, error => {
    console.log('axios拦截请求失败');
  });
  /*拦截响应*/

  axios.interceptors.response.use(result=>{
    console.log('axios拦截响应成功');
  }, error => {
    console.log('axios拦截响应失败');
  });