Use of named slots
<!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>
Note: When supplementing the content of the label of the slot according to the name, it must be noted that a single label cannot be applied to multiple labels
compiled scope
- compiled scope
<!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>
Note: When Vue is searching for attributes. It will look up its own scope first. Pay attention to the code
Scoped slots
Purpose: The parent component replaces the label in the slot, but the content is provided by the child component
<!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>
Note:
- :data (the name is optional, the purpose is to obtain the data in the subcomponent)
- In the parent component, the data in the child component is obtained through slot-scope
- join() splits the collection in the array and joins it with something
Modularization (import and export)
Modularity in 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>
Note: type="module" is used for modularization to solve the problem of related naming conflicts, but after the module talk, it will cause other JS files to be unable to call the function when calling the function
Detailed explanation of Webpack
1. Definition
Essence: webpack is a static module packaging tool for modern JavaScript applications
The difference between grunt and glup and webpack
- grunt/gulp puts more emphasis on the automation of the front-end process, and modularization is not its core
- Webpack puts more emphasis on modular development management, and file compression and merging, preprocessing and other functions are its attached functions.
2. Installation of webpack
- Depends on the node environment
- In order to execute various codes normally, node has many dependent packages. Its own npm facilitates our management to a great extent.
The webpack download command, @ indicates the version, and -g indicates that it is installed in a global variable.
npm install [email protected] -g
Check the version of webpack
webpack --version
Install webpack locally Install webpack locally
npm install [email protected] --save-dev
3. Webpack packaging
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);
When packaging webpack, it needs to be in the same level directory as the packaged file
webapck 需要打包的文件名 输出的文件路径
The command in the terminal is the global running
4. What is a loader
Loader is a very core concept in webpack
The process of using the loader
- Step 1: Download and install the loader used by npm
- Step 2: Configure under the modules keyword in webpack.config.js
When processing css files through webpack, you need to introduce the relevant loader, webpack does not support the processing of css files
[External link picture transfer failed, the source site may have an anti-theft link mechanism, it is recommended to save the picture and upload it directly (img-0StYp1Em-1656243609672) (C:\Users\ZSGgoogosoft\AppData\Roaming\Typora\typora-user-images\ 1655347596956.png)]
webpack Chinese documentation (docschina.org) Official website address
When packaging css files through webpack, you need to download the corresponding loader
How to download css-loader
npm install --save-dev css-loader
How to download style-loader
npm install --save-dev style-loader
Configure in the webpack.config.js file
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
use: ["style-loader", "css-loader"],
},
],
},
};
Introduce css in the main.js file
import {
name,age,height} from "./js/aa";
console.log(name);
console.log(age);
console.log(height);
//将css文件看成一个模块，之后通过require进行引进
require('./css/test.css')
Execute the npm command to package the css file and js file
npm build
Webpack executes css file packaging error
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value.
solution
Make relevant configurations in the webpack.config.js file
mode: 'development'
5. Less file processing
- Write related less files
- Import the less file
- Download the corresponding configuration
$ npm install less less-loader --save-dev
- Configure in webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.less$/i,
loader: [
// compiles Less to CSS
'style-loader',
'css-loader',
'less-loader',
],
},
],
},
};
Vue Scaffolding
1. Installation of scaffolding
- CLI is Command-Line Interface translated to Command Line Interface
- It is an officially released scaffolding for a Vue.js project
- Use vue-cli to quickly build a Vue development environment and corresponding relatedRelated configuration of webpack
Prerequisites for the use of scaffolding
- With node environment
Global installation of vue scaffolding
npm install @vue/cli -g
Check the version of vue
vue --version
Extract the template of scaffolding 2 in scaffolding 3
npm install @vue/cli-init -g
scaffolding 2 create project
vue init webpack 项目名称
Scaffolding 3 for project creation
vue create 项目名称
2. Scaffolding 2 for project creation
Node can directly execute js files, which provides a running environment for the running of js
.eslintignore indicates where it can be ignored
The meaning of the symbol in the package.json file
- ^ indicates that the version since the installation is the current version or is greater than the current version but the major version remains unchanged
- ~Indicates that the current version installed is or is smaller than the current version, and the major version remains unchanged
package-lock.json
package-lock.json is the mapping file of package.json, and the version of the installed dependencies is the specific and accurate version.
When the pictures and other files in the static file are packaged, they will be directly packaged into the dist file without any modification.
tignore indicates where it can be ignored
The meaning of the symbol in the package.json file
- ^ indicates that the version since the installation is the current version or is greater than the current version but the major version remains unchanged
- ~Indicates that the current version installed is or is smaller than the current version, and the major version remains unchanged
package-lock.json
package-lock.json is the mapping file of package.json, and the version of the installed dependencies is the specific and accurate version.
When the pictures and other files in the static file are packaged, they will be directly packaged into the dist file without any modification.