[JavaScript知识库] vue第三版

开发: 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第三版 -> 正文阅读

[JavaScript知识库]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>

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

编译的作用域

编译的作用域

<!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 webpack@3.6.0 -g

检查webpack的版本

webpack --version

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

npm install webpack@3.6.0 --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',
        ],
      },
    ],
  },
};