开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue学习Day6 插槽slot使用、编译作用域、作用域插槽、模块化开发、webpack介绍、安装 -> 正文阅读

[JavaScript知识库]Vue学习Day6 插槽slot使用、编译作用域、作用域插槽、模块化开发、webpack介绍、安装

想利用暑假时间好好学习一下vue，会记录每一天的学习内容。
今天是学习vue的第6天！

起起伏伏乃人生常态，继续加油～

1. 插槽slot

生活中很多地方都有插槽，电脑的USB插槽，插板当中的电源插槽
插槽的目的是让我们原来的设备具备更多的扩展性

组件的插槽：

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

如何封装这类组件呢？

它们有很多区别，也有很多共性

如何封装合适呢？抽取共性，保留不同

最好的封装方式是将共性抽取到组件中，将区别暴露为插槽
一旦我们预留了插槽，就可以让使用者根据自己的需求，决定插槽中插入什么内容

slot基本使用

如何使用slot？

在子组件中，使用特殊的元素<slot>可以为子组件开启一个插槽
该插槽插入什么内容取决于父组件如何使用

我们通过一个简单的例子，来给子组件定义一个插槽：

<slot>中的内容表示：如果没有在该组件中插入任何其他内容，就默认显示该内容
有了这个插槽，父组件如何使用呢？

在这里插入图片描述

具名插槽slot

当子组件的功能复杂时，子组件的插槽可能并非是一个

比如我们封装一个导航栏的子组件，可能就需要三个插槽，分别代表左边、中间、右边
那么，在给插槽插入内容时，我们需要区分插入的是哪一个插槽
这时，需要给插槽起一个名字

如何使用具名插槽呢？

给slot元素添加一个name属性
<slot name="center"><slot>

在这里插入图片描述

2. 编译作用域

在这里插入图片描述
可以渲染出来，也就是<cpn v-show="isShow"></cpn>使用的是Vue实例的属性

为什么呢？

官方给出了一条准则：
父组件模版的所有东西都会在父级作用域内编译；
子组件模版的所有东西都会在子级作用域内编译
我们在使用<cpn v-show="isShow"></cpn>时，整个组件的使用过程是在父组件Vue实例的模版中出现的
那么他的作用域就是父组件，使用的属性也是属于父组件的属性
因此，isShow使用的是Vue实例中的属性，而不是子组件的属性

比如：

<div id="app">
	<cpn v-show="isShow"></cpn>
	<cpn v-for="item in names"></cpn>
</div>

查找isShow、names变量，会看其是在哪一个模版中使用的，这里就是在属于Vue实例的模版中使用，那么就会在Vue实例中查找isShow、names变量。这里的isShow、names变量就是在Vue实例的作用域内

<template id="cpn">
	<div>
		<h2>我是子组件</h2>
        <p v-show="isShow">我是内容</p>
	</div>
</template>

此处查找isShow变量，则会在该模版(id=“cpn”)对应的组件中查找

3. 作用域插槽

父组件替换插槽标签，但是内容由子组件来提供
我们先提一个需求：

子组件中包含一组数据，比如:
pLanguages: ['JavaScript', 'c++', 'Python', 'Java', 'c#', 'Swift']
需要在多个页面进行展示：
- 某些页面是以水平方向展示的
- 某些页面是以列表形式展示的
- 某些页面直接展示一个数组…
数据在子组件，但是希望父组件告诉我们如何展示，但是父组件不能直接拿到子组件中的数据，怎么办呢？
- 使用slot作用域插槽

作用域插槽：准备
在这里插入图片描述
在父组件使用我们的子组件时，从子组件如何拿到数据：

我们通过<template slot-scope=slot">获取slot属性
（目前vue的版本已支持，这里不是非要写template）
再通过slot.data就可以获取到刚才我们传入的data了

在这里插入图片描述

4.模块化开发

我们通常会将代码组织在多个js文件中，进行维护，但是这种维护方式，依然不能避免一些灾难性的问题

比如全局变量同名问题

// a.js文件中，小明定义了一个变量
flag = true

// b.js文件中，小红定义了一个变量
flag = false

// main.js文件中，小明想通过flag进行一些判断，完成后续的事情
if (flag) {
	console.log(1);
}

但小明会发现代码不能正常运行。
我们可以使用匿名函数来解决这里的flag重名问题
在小明的a.js中，使用匿名函数

(function(){
	var flag = true
})()

但是如果我们希望在main.js文件中用到flag，就不容易使用了，因为flag此时定义在匿名函数的作用域中，是一个局部变量，无法在别处访问到

这时我们可以将需要暴露到外面的变量，使用一个模块作为出口

var ModuleA = (function() {
	// 1.定义一个对象
	var obj = {}
	// 2.在对象内部添加变量和方法
	obj.flag = true
	obj.func = function (param) {
		// 
	}
	// 3.将对象返回
	return obj
})()

我们在匿名函数的内部，定义了一个对象，给对象添加了一些需要暴露到外面的属性和方法，最后将这个对象返回，并且使用了一个ModuleA变量接收
接下来就可以在main.js中使用属于自己模块的属性和方法了

if (ModuleA.flag){
	console.log(1);
}
ModuleA.func('111')；

这就是模块最基础的封装
前端模块化开发已经有了很多既有的规范，以及对应的实现方案

常见的模块化规范

CommonJs、AMD、CMD、ES6的Modules

CommonJs (了解)

模块化有两个核心：导出和导入

CommonJs的导出：

// 后接一个对象，对象中放需要导出的属性和方法
module.exports = {
	flag: true,
	test(a,b){
		return a+b
	}
}

CommonJs的导入：

let {flag,test} = require('./a.js');
// 等同于
let obj = require('./a.js');
let flag = obj.test;
let test = obj.test;

5.ES6模块化的导入和导出

export 使用

??：export后必须跟语句

非法：export name;

export指令用于导出变量

export let name = 'AIpoem';
export let age = 18;
export let height = 180;

另一种写法：

let name = 'AIpoem';
let age = 18;
let height = 180;
export {name, age, height}

export指令用于导出函数或类

export function test(content) {
	console.log(content)
}

export default
某些情况下，一个模块中包含某个功能，我们并不希望给这个功能命名，而且让导入者可以自己来命名

export default function () {
	console.log("default function");
}

对应的导出：

// 这里的myFunc可以根据需要来命名
import myFunc from './a.js'

??： export default在整个模块中只能存在一个

import使用

首先我们需要在HTML中引入两个js文件，并且type需要设置为module

<script src="./a.js" type="module"></script>
<script src="./main.js" type="module"></script>

main.js中可以利用import指令导入a.js中的内容

import {name, age, height} from './a.js'
// 使用
console.log(name,age,height);

导入所有信息：

通过*可以导入模块中所有的export变量
给*起一个别名，方便后续使用

import * as info from './a.js'
console.log(info.name);
console.log(info.height):
...

6.Webpack介绍

从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具

模块化：

在ES6之前，如果我们想要进行模块化开发，必须借助于其他的工具
并且在通过模块化开发完成了项目后，还需要处理模块间的各种依赖，并将其进行整合打包
webpack其中一个核心就是让我们可以进行模块化开发，并且会帮助我们处理模块间的依赖关系
不仅是JavaScript文件，我们的css 、图片、json文件在webpack中都可以被当作模块来使用
这就是webpack中模块化的概念

打包：

就是将webpack中的各种资源模块进行打包，合并成一个或多个包
并且在打包的过程中，还可以对资源进行处理，比如压缩图片，将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文件夹中

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('js', () => 
	gulp.src('src/*.js')
		.pipe(babel({
			presets: ['es2015']
		}))
		.pipe(gulp.dest('dist'))
);