vue第二版

具名插槽的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>具名插槽的基本使用</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <cpn>
<!--        根据插槽的名字对标签的内容进行一个填写和补充-->
<!--        注：在进行插槽的使用的时候，一定是单个的标签，不能是多个标签的套用-->
        <p slot="left">我在左边</p>
        <p slot="center">我在中间</p>
        <p slot="right">我在右边</p>
    </cpn>
</div>
<template id="cpn">
    <div>
        <p>你好我是一个组件</p>
        <a>点击我一下</a>
        <slot name="left">左边</slot>
        <slot name="center">中间</slot>
        <slot name="right">右边</slot>
    </div>
</template>
<script>
    const app=new Vue({
        el:"#app",
        components:{
            cpn:{
                template:"#cpn"
            }
        }
    })
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

注：在根据名字对插槽进行标签的内容补充的时候，注意一定是单标签不能是多个标签套用

编译的作用域

编译的作用域

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编译作用域</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!--    isShow使用的是vue实力中的isShow-->
    <cpn v-show="isShow"></cpn>
</div>
<template id="cpn">
    <div>
        <p>我是子组件</p>
    </div>
</template>
<script>
    const app=new Vue({
        el:"#app",
        data:{
          isShow: true
        },
        components:{
            cpn:{
                template: "#cpn",
                data(){
                    return{
                        isShow:false
                    }
                }
            }
        }
    })
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

注：当Vue在进行属性的查找的时候。他会首先查找自己的作用域。注意看代码

作用域插槽

目的：父组件替换插槽中的标签，但是内容有子组件来进行提供

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作用域插槽</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <cpn></cpn>
    <cpn>
<!--        通过slot-scope获取子组件中的数据-->
        <template slot-scope="slot">
            <span>{{slot.data.join(' - ')}}</span>
        </template>
    </cpn>
</div>
<template id="cpn">
    <div>
        <p>你好，我是一个子组件</p>
<!--        通过:data进行子组件数据的获取-->
        <slot :data="langue">
            <ul>
                <li v-for="item in langue">{{item}}</li>
            </ul>
        </slot>
    </div>
</template>
<script>
    const app=new Vue({
        el:"#app",
        components:{
            cpn:{
                template:"#cpn",
                data() {
                    return {
                        langue:["Java","JavaScript","C++","C#","Go","switch"]
                    }
                }
            }
        }
    })
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

注：

:data(名字随便去，目的是为获取子组件中的数据)
在父组件中通过slot-scope进行子组件中数据的获取
join()对数组中的集合进行分割，并通过某些东西进行连接

模块化（导入导出）

ES6中的模块化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6中的模块化</title>
</head>
<body>
<!--type="module"进行模块化，解决相关的命名冲突的问题，但是在进行模块话之后，会导致其他的js文件在进行函数的调用的时候无法进行函数的调用-->
<script src="04ES6中的模块化.js" type="module"></script>
<script src="04ES6中的模块化1.js"></script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12

注：type="module"进行模块化，解决相关的命名冲突的问题，但是在进行模块话之后，会导致其他的JS文件在进行函数的调用的时候无法进行函数的调用

Webpack详解

1、定义

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

grunt与glup和webpack的不同

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

2、webpack的安装

依赖于node环境
node为正常执行各种代码，其中具有很多的依赖包。其自带的npm在很大程度上方便了我们的管理。

webpack下载命令，@后边表示的是版本，-g表示的是在全局变量中进行安装。

npm install webpack@3.6.0 -g
1

检查webpack的版本

webpack --version
1

局部安装webpack在本地进行webpack的安装

npm install webpack@3.6.0 --save-dev
1

3、webpack打包

export const name="张三";
export const age=23;
export const height=50;
1
2
3

import {name,age,height} from "./aa";

console.log(name);
console.log(age);
console.log(height);
1
2
3
4
5

在进行webpack打包的时候，需要在被打包的文件的同一级目录

webapck 需要打包的文件名  输出的文件路径
1

在这里插入图片描述

终端中的命令便是运行的全局

4、什么是loader

loader是webpack中一个非常核心的概念

loader的使用过程

步骤一：通过npm进行下载安装使用的loader
步骤二：在webpack.config.js中的modules关键字下进行配置

通过webpack进行处理css文件的时候，需要引进相关的loader，webpack不支持css文件的处理
在这里插入图片描述

webpack 中文文档 (docschina.org) 官网地址

在通过webpack对css文件进行打包的时候需要需要下载相应的loader

css-loader的下载方式

npm install --save-dev css-loader
1

style-loader的下载方式

npm install --save-dev style-loader
1

在webpack.config.js文件中进行配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10

在main.js文件中引进css

import {name,age,height} from "./js/aa";

console.log(name);
console.log(age);
console.log(height);
//将css文件看成一个模块，之后通过require进行引进
require('./css/test.css')
1
2
3
4
5
6
7

执行npm命令对css文件以及js文件进行打包

npm build
1

webpack执行css文件打包错误

The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value.

解决方案

在webpack.config.js文件中进行相关配置

mode: 'development'
1

5、less文件的处理

编写相关的less文件
对less文件进行引入
下载相应的配置

$ npm install less less-loader --save-dev
1

在webpack.config.js进行配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        loader: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
  },
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Vue脚手架

1、脚手架的安装

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

脚手架使用的前提

具有node环境

vue脚手架的全局安装

npm install @vue/cli -g
1

查看vue的版本

vue --version
1

在脚手架3中抽取脚手架2的模板

npm install @vue/cli-init -g
1

脚手架2创建项目

vue init webpack 项目名称
1

脚手架3进行项目的创建

vue create 项目名称
1

2、脚手架2进行项目创建

项目中不允许存在中文

node可以直接执行js文件，其为js的运行提供了一个运行环境

.editorconfig中的代码约束规范

在这里插入图片描述

.eslintignore表示可以进行忽略的地方

在package.json文件中符号所表示的意思

^表示的安装的以来的版本是当前的版本或者是大于现在的版本但是大版本是不变的
~表示安装的当前版本或者是小于当前版本，大版本不变

package-lock.json

package-lock.json为package.json的映射文件，其中所安装的依赖的版本为具体准确的版本。

在static文件中存在的图片等文件在进行打包的时候，会原封不动的直接被打包进dist文件中而不会做任何的修改。

在这里插入图片描述

C:/user/administrator/AppData/Roaming/npm-cache

3、理解runtime+compiler与runtime-only的区别

在创建项目的更加推荐使用runtime-only

原因

第二个的运行效率更高
runtime-only中的代码量更少

createElement函数的使用方法：

createElement('标签名')
//creatElement会将标签创建出来，之后将之前的父级组件中的组件进行一个替换
createElement('h2',{class:'box'},['hello word'])
//h2表示要创建的标签
//{}表示的标签中要设置的class属性
//[]中的内容表示的标签中的内容
render(函数()) 
1
2
3
4
5
6
7

注：.vue文件中的组件是由vue-template-compiler进行的解析

在进行脚手架创建的时候我们只是用runtime-only

4、脚手架3的创建

npm在执行时候的流程

在这里插入图片描述

脚手架3与脚手架2的区别

脚手架3是基于webpack 4进行打造，脚手架是基于webpack 3
脚手架3的设计原则是0配置，移除的配置文件跟，目录下的build和config等目录
脚手架3提供了vue ui命令，提供了可视化配置，更加的人性化
移除了static文件夹，增加了public文件夹，并且index.html移动到了public中

VCS->version control system() 版本控制系统

脚手架3各个文件夹表示的意思

node_modules library root 存储npm下载的各种的依赖
public类似于static，进行打包的时候，其中内容原封不动被进行打包。
src进行代码的编写
.browserslistrc 其中放置浏览器的一些配置
.gitignore 在进行上传的时候忽略的文件，配置一些可以进行忽略的文件
babel.congif.js配置babel的一些配置
postcss.config.js对于css文件转化的一些配置文件

5、脚手架3配置文件的修改与查看

第一种方式

启动本地服务 vue ui

在这里插入图片描述

第二种方式：node-module-@vue-cli-server-webpack.config.js

箭头函数的使用和this的指向

箭头函数的基本使用

也是一种定义函数的一种方式

//函数中两个参数
const sum=(num1,num2)=>{
    return num1*num2
}
//放入一个参数 
//在放一个参数的时候，小括号可以进行省略
const power = num=>{
    return num* num
}
//函数中的代码数量问题
const test=()=>{
    //打印hello word
    console.log('aaaaaa');
    console.log('bbbbbbb');
}

//函数中只有一行代码
const mul=(num1,num2)=>{
    return num1*num2;
}
//还可以写成
const mul1=(num1,num2)=>num1*num2
console.log(num1*num2)

//在对象中进行函数的编写的时候
const obj={
    aaa(){
        console.log();
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

路由（Vue-Router）

1、路由

路由是一个网络工程中的术语

面试问题

前端渲染：映射关系是由前端进行处理，不是通过服务器进行渲染。
**后端渲染：**后端在处理URL和页面之前的映射关系。

2、认识vue-router

目前三大前端主流框架

Angular的ngRouter
React的ReactRouter
Vue的vue-router

安装和使用vue-router

npm的安装命令

在进行相关的依赖进行下载的时候，只有加上–save才能将相关的配置写进核心的配置文件，例如packages-json

nom install vue-router --save
1

使用路由的步骤

创建路由组件
配置路由的映射：组件和路径的映射关系
使用路由，通过和

router中index.js文件中的内容配置

import Vue from 'vue'
import Router from 'vue-router'
//当需要进行页面的跳转的时候，进行相关页面的引用
import Home from "../components/Home";
import About from "../components/About";
//通过Vue调用路由这个插件
Vue.use(Router)
//实例化router进行使用
export default new Router({
    //配置路由
  routes: [
    {
      path:'/home',
      component:Home
    },
    {
      path:'/about',
      component:About
    }
  ]
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

App.vue

<template>
<div id="app">
<!--  router-link全局组件可以在任何的地方使用，进行url的修改-->
    
  <router-link to="/home">首页</router-link>
  <router-link to="/about">关于</router-link>
<!--  设置渲染的位置,放置的位置表示这内容的显示的位置-->
  <router-view></router-view>
</div>
</template>

<script>
export default {
  name: 'App'
}
</script>



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注：

:该标签是vue-router中已经被内置的组件，他会被渲染成一个标签
：该标签会根据当前的路径，动态渲染出不同的组件
网页的其他的内容，比如顶部的标题，导航，或者是底部的一些版权信息等会和处于同一个等级
在路由切换的时候，切换的是挂载的组件，其他的内容不会发生改变。

设置路由的重定向

 {
      path:'/',
      redirect:'/home'
    },
1
2
3
4

如何改成HTML5的history模式

const router=new VueRouter({
    route,
    mode:'history'
})
1
2
3
4

3、router-link补充

在中的to属性是用于指定跳转的路径

router-link的其他的属性

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

//表示将其生成一个li标签
<router-link to='/home' tag='li'></router-link>
1
2

4、代码控制路由

$router.replace

<template>
<div id="app">
<!--  全局组件可以在任何的地方使用-->
<!--  <router-link to="/home">首页</router-link>-->
<!--  <router-link to="/about">关于</router-link>-->
<!--  设置渲染的位置,放置的位置表示这内容的显示的位置-->

  <button @click="test()">首页</button>
  <button @click="test1()">关于</button>
  <router-view></router-view>
</div>
</template>

<script>
export default {
  name: 'App',
  methods:{
    test:function (){
        //vue内置router，可以进行获取router对象
      this.$router.replace('/home');

    },
    test1:function (){
      this.$router.replace('/about');
    }
  }
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

5、动态路由的使用

获取访问路径中的参数问题

<template>
<div id="app">
<!--  全局组件可以在任何的地方使用-->
<!--  <router-link to="/home">首页</router-link>-->
<!--  <router-link to="/about">关于</router-link>-->
<!--  设置渲染的位置,放置的位置表示这内容的显示的位置-->

  <router-link to="/home">首页</router-link>
  <router-link to="/about">关于</router-link>
  <router-link v-bind:to="'/user/'+name">用户</router-link>
  <router-view>

  </router-view>

</div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      name:'lisi'
    }
  },
  
}
</script>

<style>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

<template>
<div>
  <p>我是一个用户</p>
  <P>谢谢大家的欢迎</P>
  <p>{{userid}}</p>
</div>
</template>

<script>
export default {
  name: "User",
  computed:{
    userid(){
      //获取路径访问时所携带的参数
      //获取活跃状态下路由的参数
      console.log(this.$route.params.abc);
      return this.$route.params.abc;
    }
  },

}
</script>

<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

在这里插入图片描述

注：在vue的路由中的route与router的区别

route的作用是为了检测系统中活跃的路由，通过检测获取路由访问路径中的一些相关的信息
router是vue中内置的一个路由插件，可以对访问路径进行相关的设置。

6、vue-router的懒加载

核心思想，当用到的时候在进行加载，从而进行速度的提高

//路由懒加载的写法，只有当用到页面的时候才会进行页面的加载
const routes={
    path:'/home'
    component:()=>import('../components/Home')
}
1
2
3
4
5

7、路由嵌套

实现嵌套路由的两个步骤

创建对应的子组件，并且在路由映射中配置对应的子路由
在组件内部使用标签

const router=new Router({
    route:[
       {
      path:'/home',
      component:Home,
      children:[
          //设置默认重定向
          {
            path:'',
            rediect:'news'  
          },
        {
          path:'news',
          component:()=>import('../components/HomeNews')
        },
        {
          path:'message',
          component:()=>import('../components/HomeMessage')
        }
      ]
    } 
    ]
    
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

8、路由参数传递

参数传递的两种方式

传递参数主要的两种类型：params和query
params的类型
- 配置路由的格式：/router/:id
- 传递的方式：在path后面跟上对应的值
- 传递后形成的路径：/router/123,router/abc
query类型（是一个对象）
- 配置路由的格式：/router，也就是普通配置
- 传递的方式：对象中使用query的key多为传递方式
- 传递后形成的路径：/router?id=123,/router?id=abc

URL的组成：协议://主机:端口/路径？查询

全局导航首位

常见的生命周期函数

created
mounted

component:Home,
children:[
//设置默认重定向
{
path:‘’,
rediect:‘news’
},
{
path:‘news’,
component:()=>import(‘…/components/HomeNews’)
},
{
path:‘message’,
component:()=>import(‘…/components/HomeMessage’)
}
]
}
]

})


### 8、路由参数传递

==参数传递的两种方式==

- 传递参数主要的两种类型：params和query
- **params的类型**
  - 配置路由的格式：/router/:id
  - 传递的方式：在path后面跟上对应的值
  - 传递后形成的路径：/router/123,router/abc
- **query类型（是一个对象）**
  - 配置路由的格式：/router，也就是普通配置
  - 传递的方式：对象中使用query的key多为传递方式
  - 传递后形成的路径：/router?id=123,/router?id=abc

==URL的组成：协议://主机:端口/路径？查询==

## 全局导航首位

常见的生命周期函数

- created
- mounted



















































1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74

相关阅读:
破防了，原来这才是机房运维的正确方法
 【Redis 常用五大数据类型】
DBLINK 数据推送
 ChatGPT王炸升级GPT-4 Turbo：更强大还更便宜
 回文链表判断
 7.Prism框架之对话框服务
 理解GBASE LDAP认证方法
 LVS+Keepalived群集
 计算机网络（第一章概述）
STL常用容器的模拟实现
原文地址：https://blog.csdn.net/qq_46524280/article/details/125456176