VUE组件

最新推荐文章于 2024-09-10 16:28:36 发布

原创最新推荐文章于 2024-09-10 16:28:36 发布 · 477 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue组件 #template #web

本文围绕VUE组件展开，先介绍其扩展HTML元素、封装代码的作用，回顾VUE使用要点。接着详细阐述自定义VUE组件的使用，包括全局组件、局部组件的定义与使用，组件中数据绑定方式，还介绍了单文件组件概念及环境配置、项目搭建过程。

VUE Component

一、概述

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

二、VUE前情回顾

使用：

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

<div id=app>
</div>

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

<script> 
new Vue({
    el:'#app',
    data:{
        name:'python'
    },
    methods:{
        dianji:function(){
            axios.get('url',{参数}).then（response =>{
                this.name = response.data
            }).catch(
                error =>{
                    
                }
            )
        }
    }
 })
</script>

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

note:

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

<div id=app>
    {{name}}
</div>

二、自定义VUE组件及使用

1.全局组件

定义

<script>
    Vue.component(
        'Global_component',
    )
</script>

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

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

2.局部组件

1. 定义

var Local_component = {属性}

2. 使用

全局组件中调用局部组件：
1. 在全局组件中注册局部组件：components:{Local_component1,Local_component2}
2. 使用局部组件：template：’<component_name> </component_name>’
组件的嵌套

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对项目进行解析打包，使用前需先要进行环境配置。

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

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

安装最新版本的node
1.

nvm install node

更新npm的安装源
1.

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

mkdir project

cd project
npm init

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

配置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

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

touch index.html main.js App.vue. 

可以借助vscode编辑工具创建文件

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

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

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

创建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'
              },
        ]
    }
}