VUE组件

雨点打透心脏的1/2处 2022-01-29 06:19 393阅读 0赞

# VUE Component #

## 一、概述 ##

**1. 作用**  
扩展HTML元素，封装可重用的代码。在需要使用的地方引用组件。

## 二、VUE前情回顾 ##

**使用：**

1.  页面中必须要有一个标签（不一定是div）。

1.  定义一个vue变量,绑定标签

Q:axios.get(‘url’,\{参数\})中的参数是做什么的？  
====> 第二个参数：请求体参数 第三个参数： 指定返回数据格式

**note:**

1.  methods:\{方法名:function()\{\}\}  
    axios.请求方法(‘url’,\{参数\}).then() 。 then()中可通过：response.data获取后端返回的数据。
2.  在标签中使用VUE中的变量

## 二、自定义VUE组件及使用 ##

### 1.全局组件 ###

1.  定义

vue.js  
2. 全局组件通过Vue.component注册，Vue.component()第一个参数指定组件名，第二个参数以\{\}形式传递，指定组件的属性。

1.  Vue.component(组件名，\{属性\})
2.  属性template：‘指定组件显示的html内容’
3.  使用  
    以标签的形式添加到div中，调用组件内容。

### 2.局部组件 ###

**1. 定义**

var Local_component = {属性}

**2. 使用**

1.  全局组件中调用局部组件：
    
    1.  在全局组件中注册局部组件：components:\{Local\_component1,Local\_component2\}
    2.  使用局部组件：template：’<component\_name> </component\_name>’
2.  组件的嵌套

### 3.组件中绑定数据 ###

**1. data**

data:function(){
        return {
            xx:'yy'
        }
    }

**2. props**  
父————>子：

# 子：props:['pos']   {
       {pos}}
    # 父：template:'<div>全局组件  <zujian_a v-bind:pos="name"></zujian_a>  </div>',
    
    data:function(){
             return {name:'python'}
                   }

**3. $emi**  
子————>父：  
通过事件的触发（页面进行）将子组件的内容传递给父组件。  
子：

template:'<div>  局部组件A  <button v-on:click="isupload"> 上传</button>  </div>',
    
     methods:{
                isupload:function(){
                this.$emit('isListen','hello') // 子元素上的点击事件成功后，通过 $emit 将事件和数据传递给父组件
                }
            }

父：

template:'<div>  全局组件   <zujian_a v-on:isListen="isShow"></zujian_a> </div>',
    
    methods:{
                isShow:function(data){
                    alert(data)  //data参数接受子组件传递的值
                }
            }

### 4.单文件组件 ###

**1. 概念**  
将一个组件相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件——单文件组件。

// 使用template标签来定义html部分
    <template>
        <div :class="{crumb:true,hot:isHot}" @click="isHot=!isHot">
            当前位置是：{
       { pos }}
        </div>
    </template>
    
    // javascript要写成模块导出的形式：
    <script>
        export default{
         
            props:['pos'],
            data:function(){
         
                return {
         
                    isHot:false                
                }
            }
        }
    </script>
    
    // 样式中如果有scope关键字，表示这些样式是组件局部的，不会影响其他元素
    <style scoped>
    .crumb{
         
        width:90%;
        line-height:50px;
        margin:0px auto;
        border-bottom:1px solid #ddd;
    }
    .hot{
         
        color:red;
        font-weight:bold;
        text-indent:10px;
    }
    </style>

**环境：** (了解)

背景：单文件组件不能直接运行，需要依赖node对项目进行解析打包，使用前需先要进行环境配置。

1.  安装node版本管理工具nvm  
    1.

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash
    // 更新配置
    source .bashrc

1.  安装最新版本的node  
    1.

nvm install node

1.  更新npm的安装源  
    1.

npm config set registry https://registry.npm.taobao.org

1.  创建项目目录  
    1.

mkdir project

1.  进入项目目录，初始化项目目录  
    1.

cd project
    npm init

初始化完成后在当前目录中会生成一个package.json文件，该文件指定项目所以依赖的模块

--------------------

1.  配置package.json文件  
    1.

{
        
        "name": "project",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
        
            "test": "echo \"Error: no test specified\" && exit 1",
            "build": "webpack"
        },
        "keywords": [],
        "author": "",
        "license": "ISC",
        "dependencies": {
        
            "babel-core": "^6.22.1",
            "babel-loader": "^7.1.1",
            "babel-preset-env": "^1.3.2",
            "babel-preset-stage-2": "^6.22.0",
            "babel-register": "^6.22.0",
            "css-loader": "^0.28.11",
            "element-ui": "^2.7.2",
            "file-loader": "^1.1.4",
            "lodash": "^4.17.4",
            "style-loader": "^0.23.1",
            "url-loader": "^1.1.2",
            "vue": "^2.6.10",
            "vue-loader": "^15.7.0",
            "vue-router": "^3.0.2",
            "vue-style-loader": "^3.0.1",
            "vue-template-compiler": "^2.5.2",
            "webpack": "^4.29.6",
            "webpack-cli": "^3.3.0",
            "webpack-dev-server": "^3.2.1"
        }
    }

g该文件定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。  
7. 安装项目依赖模块  
1.

npm install

1.  创建项目文件 main.js ,index.html, App.vue  
    1.

touch index.html main.js App.vue. 
    
    可以借助vscode编辑工具创建文件

index.html文件时项目的首页文件

main.js 文件定义vue及调用单文件组件，也是项目打包时所依赖的文件

App.vue文件为单文件组件文件

1.  创建webpacke打包的配置文件webpack.config.js  
    1.

const path = require('path')
    const VueLoaderPlugin = require('vue-loader/lib/plugin');
    
    module.exports = {
        
        entry: {
         main: "./main.js" }, //入口文件
        output: {
        
            filename: 'index.js', //出口文件名
            path: path.resolve(__dirname), //当前目录
            library: 'index' // 打包后模块的名称
        },
        plugins: [
            // make sure to include the plugin for the magic
            new VueLoaderPlugin()
        ],
        module: {
        
            rules: [ //定义不同类型的文件使用的loader
                {
        
                    test: /.vue$/,
                    loader: 'vue-loader'
                },
                {
        
                    test: /.js$/,
                    loader: 'babel-loader'
                },
                {
        
                    test: /.css$/,
                    loader: 'vue-style-loader',
                },
                {
        
                    test: /.css$/,
                    loader: 'css-loader',
                    options: {
        
                        minimize: true //添加
                    }
                }, 
                {
        
                    test: /.(eot|svg|ttf|woff|woff2)$/,
                    loader: 'file-loader'
                  },
            ]
        }
    }