具名插槽的使用
<!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>
注：在根据名字对插槽进行标签的内容补充的时候，注意一定是单标签不能是多个标签套用
编译的作用域
- 编译的作用域
<!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>
注：当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>
注：
- :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>
注：type="module"进行模块化，解决相关的命名冲突的问题，但是在进行模块话之后，会导致其他的JS文件在进行函数的调用的时候无法进行函数的调用
Webpack详解
1、定义
本质：webpack是一个现代的JavaScript应用的静态模块打包工具
grunt与glup和webpack的不同
- grunt/gulp更加强调的是前端流程的自动化，模块化不是他的核心
- webpack更加强调模块化开发管理，而文件压缩合并，预处理等功能是他附带的功能。
2、webpack的安装
- 依赖于node环境
- node为正常执行各种代码，其中具有很多的依赖包。其自带的npm在很大程度上方便了我们的管理。
webpack下载命令，@后边表示的是版本，-g表示的是在全局变量中进行安装。
npm install [email protected] -g
检查webpack的版本
webpack --version
局部安装webpack在本地进行webpack的安装
npm install [email protected] --save-dev
3、webpack打包
export const name="张三";
export const age=23;
export const height=50;
import {
name,age,height} from "./aa";
console.log(name);
console.log(age);
console.log(height);
在进行webpack打包的时候，需要在被打包的文件的同一级目录
webapck 需要打包的文件名 输出的文件路径
终端中的命令便是运行的全局
4、什么是loader
loader是webpack中一个非常核心的概念
loader的使用过程
- 步骤一：通过npm进行下载安装使用的loader
- 步骤二：在webpack.config.js中的modules关键字下进行配置
通过webpack进行处理css文件的时候，需要引进相关的loader，webpack不支持css文件的处理
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0StYp1Em-1656243609672)(C:\Users\ZSGgoogosoft\AppData\Roaming\Typora\typora-user-images\1655347596956.png)]
webpack 中文文档 (docschina.org) 官网地址
在通过webpack对css文件进行打包的时候需要需要下载相应的loader
css-loader的下载方式
npm install --save-dev css-loader
style-loader的下载方式
npm install --save-dev style-loader
在webpack.config.js文件中进行配置
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
};
在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')
执行npm命令对css文件以及js文件进行打包
npm build
webpack执行css文件打包错误
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value.
解决方案
在webpack.config.js文件中进行相关配置
mode: 'development'
5、less文件的处理
- 编写相关的less文件
- 对less文件进行引入
- 下载相应的配置
$ npm install less less-loader --save-dev
- 在webpack.config.js进行配置
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
loader: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',
],
},
],
},
};
Vue脚手架
1、脚手架的安装
- CLI是Command-Line Interface翻译为命令行界面
- 其是官方发布的一个Vue.js项目脚手架
- 使用vue-cli可以快速的搭建Vue开发环境以及对应相关的webpack的相关的配置
脚手架使用的前提
- 具有node环境
vue脚手架的全局安装
npm install @vue/cli -g
查看vue的版本
vue --version
在脚手架3中抽取脚手架2的模板
npm install @vue/cli-init -g
脚手架2创建项目
vue init webpack 项目名称
脚手架3进行项目的创建
vue create 项目名称
2、脚手架2进行项目创建
node可以直接执行js文件，其为js的运行提供了一个运行环境
.eslintignore表示可以进行忽略的地方
在package.json文件中符号所表示的意思
- ^表示的安装的以来的版本是当前的版本或者是大于现在的版本但是大版本是不变的
- ~表示安装的当前版本或者是小于当前版本，大版本不变
package-lock.json
package-lock.json为package.json的映射文件，其中所安装的依赖的版本为具体准确的版本。
在static文件中存在的图片等文件在进行打包的时候，会原封不动的直接被打包进dist文件中而不会做任何的修改。
tignore表示可以进行忽略的地方
在package.json文件中符号所表示的意思
- ^表示的安装的以来的版本是当前的版本或者是大于现在的版本但是大版本是不变的
- ~表示安装的当前版本或者是小于当前版本，大版本不变
package-lock.json
package-lock.json为package.json的映射文件，其中所安装的依赖的版本为具体准确的版本。
在static文件中存在的图片等文件在进行打包的时候，会原封不动的直接被打包进dist文件中而不会做任何的修改。