Vue组件

最新推荐文章于 2024-02-08 10:28:07 发布
最新推荐文章于 2024-02-08 10:28:07 发布
阅读量164 收藏
点赞数
分类专栏： Web # Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45651336/article/details/105377199
版权
Web 同时被 2 个专栏收录
34 篇文章 1 订阅
订阅专栏
Vue
3 篇文章 0 订阅
订阅专栏

目录

1.Vue基础回顾

1.1 基本使用

1.1.1 Vue的基本使用

1）使用PyCharm新建空白项目vue，在vue目录下新建src目录，并将提供的vue.js和axios.js放到src目录下。

2）在vue目录下新建01-vue基本使用的.html，并在其中编写以下内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue基本使用</title>
    <script src="./src/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 使用数据 -->
        {{ name }}
    </div>
</body>
<script>
    // 创建Vue对象
    var vm = new Vue({
        // 接管app对应的div区域
        el: "#app",
        data: {
            // 定义数据
            name: "itcast"
        }
    });
</script>
</html>
1.1.2 methods方法的定义与使用

1）修改01-vue基本使用的.html文件，在vue中定义methods方法change_name。

<script>
    // 创建Vue对象
    var vm = new Vue({
        // 接管app对应的div区域
        el: "#app",
        data: {
            // 定义数据
            name: "itcast"
        },
        methods: {
            // 定义方法
            change_name: function () {
                // 修改name变量数据
                this.name = 'itheima';
            }
        }
    });
</script>

2）修改01-vue基本使用的.html文件，在其中添加button按钮并绑定click事件时调用change_name方法。

<body>
    <div id="app">
        <!-- 使用数据 -->
        {{ name }}
        <input type="button" @click="change_name" value="改变name">
    </div>
</body>

1.2 axios请求

1.2.1. axios请求的基本使用

在vue中，可以使用axios发起异步请求。

axios.get(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.delete(url[, config])

以get请求为例：

axios.get(url[, config]).then(response => {
  // 请求成功执行的代码
}).catch(error => {
  // 请求失败时执行的代码
})
1.2.2. 案例(Vue获取所有图书的数据并展示)

1）在vue目录下新建02-axios请求.html，并在其他编写以下内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios基本使用</title>
    <script src="./src/vue.js"></script>
    <script src="./src/axios.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="获取所有图书数据" @click="show_books">
    </div>
</body>
<script>
    // 创建Vue对象
    var vm = new Vue({
        // 接管app对应的div区域
        el: "#app",
        data: {
            // 定义数据
            books: []
        },
        methods: {
            // 定义方法
            show_books: function () {

            }
        }
    })
</script>
</html>

2）在show_books.html文件中编写show_books方法的内容，使用axios访问DRF框架编写的/books/接口来获取数据。

<script>
    // 创建Vue对象
    var vm = new Vue({
        // 接管app对应的div区域
        el: "#app",
        data: {
            // 定义数据
            books: []
        },
        methods: {
            // 定义方法
            show_books: function () {
                axios.get('http://127.0.0.1:8000/books/')
                .then(response => {
                    // 请求成功：通过`response.data`可以获取API接口的响应数据
                    this.books = response.data;

                }).catch(error => {
                    // 请求失败：通过`error.response.data`可以获取API接口响应的错误信息
                    console.log(error.response.data);
                })
            }
        }
    })
</script>

3）修改show_books.html文件内容，使用v-for遍历展示所有图书的数据。

<body>
    <div id="app">
        <input type="button" value="获取所有图书数据" @click="show_books">
        <table>
            <tr v-for="book in books">
                <td>{{ book.id }}</td>
                <td>{{ book.btitle }}</td>
                <td>{{ book.bpub_date }}</td>
                <td>{{ book.bread }}</td>
                <td>{{ book.bcomment }}</td>
            </tr>
        </table>
    </div>
</body>

注：GET /books/接口直接使用DRF框架所讲的图书管理案例项目运行即可，但是默认点击获取所有图书数据按钮时，会有以下错误：
在这里插入图片描述

这是CORS跨域请求错误，在美多商城后台项目中会进行详细讲解，此处按如下方式解决此错误即可：

1）安装django-cors-headers扩展包

pip install django-cors-headers

2）在MIDDLEWARE中间件配置中注册中间件。

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # 此处为注册的中间件
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

3）在settings.py中进行如下配置。

CORS_ORIGIN_ALLOW_ALL=True
CORS_ALLOW_CREDENTIALS = True  # 允许携带cookie

4）再次点击获取所有图书数据按钮，结果如下：
在这里插入图片描述

2.Vue组件

2.1 基本使用

  1. Vue组件的基本使用

vue的组件分为全局注册组件和局部注册组件。

1.1 全局注册组件
1）在vue目录下新建03-vue组件(全局注册).html文件，编写以下内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件(全局注册)</title>
    <script src="./src/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script>
    // 创建Vue对象
    var vm = new Vue({
        // 接管app对应的div区域
        el: "#app"
    })
</script>
</html>

2）在03-vue组件(全局注册).html文件中全局注册一个Vue组件并使用。

<body>
    <div id="app">
        <!-- 使用组件时，直接将组件名当做标签使用即可 -->
        <login></login>
    </div>
</body>
<script>
    // 定义组件并注册
    Vue.component('login', {
        // login组件的模板内容
        template: '<div>登录组件内容</div>'
    });

    // 创建Vue对象
    var vm = new Vue({
        // 接管app对应的div区域
        el: "#app"
    })
</script>

3）在浏览器中查看03-vue组件(全局注册).html，显示内容如下：
在这里插入图片描述

注：使用Vue.component创建的组件是全局注册的，它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。

2. 局部注册组件
1）在vue目录下新建04-vue组件(局部注册).html文件，编写以下内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue组件(局部注册)</title>
    <script src="./src/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script>
    // 创建Vue对象
    var vm = new Vue({
        // 接管app对应的div区域
        el: "#app"
    })
</script>
</html>

2）在04-vue组件(局部注册).html定义一个Vue组件并进行局部注册。

<body>
    <div id="app">
        <!-- 使用组件 -->
        <login></login>
    </div>
</body>
<script>
    // 定义login组件
    var login = {
        // 定义组件的模板内容
        template: '<div>登录组件内容</div>'
    };

    // 创建Vue对象
    var vm = new Vue({
        // 接管app对应的div区域
        el: "#app",
        components: {
            // 组件名: 组件
            'login': login
        }
    })
</script>

3）在浏览器中查看03-vue组件(全局注册).html，显示内容如下：
在这里插入图片描述

注：局部注册的组件在其子组件中不可用。

2.2 组件data属性

一个组件的 data 选项必须是一个函数。

1）在vue目录下新建05-组件的data属性.html文件，编写以下内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件的data属性</title>
    <script src="./src/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script>
    // 创建Vue对象
    var vue = new Vue({
        // 接管app对应的div区域
        el: "#app"
    })
</script>
</html>

2）在05-组件的data属性.html文件中定义注册组件component_a并使用。

<body>
    <div id="app">
        <!-- 使用组件 -->
        <component-a></component-a>
    </div>
</body>
<script>
    // 创建component_a组件
    var component_a = {
        template: "<div>组件内容：{{ count }}</div>",
        // 组件的data选项必须是一个函数
        data: function () {
            // 返回一个字典，字典中包含定义的各个参数
            return {
                count: 1
            }
        }
    };

    // 创建Vue对象
    var vue = new Vue({
        // 结果app对应的div区域
        el: "#app",
        components: {
            // 组件名：组件
            'component-a': component_a
        }
    })
</script>

3）在浏览器中查看05-组件的data属性.html，显示内容如下：
在这里插入图片描述

2.3 父子组件

  1. 父组件和子组件
    1）在vue目录下新建06-父子组件.html文件，编写以下内容。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件</title>
    <script src="./src/vue.js"></script>
</head>
<body>
    <div id="app">

    </div>
</body>
<script>
    // 创建Vue对象
    var vue = new Vue({
        // 接管app对象对应的div区域
        el: "#app"
    })
</script>
</html>

2）在06-父子组件.html文件中定义注册两个组件：父组件parent，子组件child。

<body>
    <div id="app">
        <!-- 使用组件 -->
        <parent></parent>
    </div>
</body>
<script>
    // 子组件
    var child = {
        template: "<div>子组件</div>"
    };

    // 父组件
    Vue.component("parent", {
        template: "<div>父组件<child></child></div>",
        data: function () {
            return {
                count: 1
            }
        },
        components: {
            // child组件是parent组件的子组件
            "child": child
        }
    });


    // 创建Vue对象
    var vue = new Vue({
        // 接管app对象对应的div区域
        el: "#app"
    })
</script>

3）在浏览器中查看06-父子组件.html页面，效果如下：
在这里插入图片描述

  1. 父子组件之间的传值

2.1 父组件向子组件传值-props属性

1）拷贝06-父子组件.html页面，修改名称为07-父组件向子组件传值.html。

2）在07-父组件向子组件传值.html中编写以下代码，让父组件parent将其data中的count数据传递给child子组件并在child子组件中进行使用。

<script>
    // 子组件
    var child = {
        template: "<div>子组件：{{ num }}</div>",
        props: ['num'] // 用于接收父组件传递的值
    };

    // 父组件
    Vue.component("parent", {
        // <child :num='count'></child>：表示在使用子组件时，将父组件中count数据的值传递给子组件的num
        template: "<div>父组件<child :num='count'></child></div>",
        data: function () {
            return {
                count: 1
            }
        },
        components: {
            // child组件是parent组件的子组件
            "child": child
        }
    });


    // 创建Vue对象
    var vue = new Vue({
        // 接管app对象对应的div区域
        el: "#app"
    })
</script>

3）在浏览器中查看07-父组件向子组件传递.html，效果如下：
在这里插入图片描述

2.2 子组件向父组件传递-$emit

1）拷贝06-父子组件.html页面，修改名称为08-子组件向父组件传值.html。

2）在08-子组件向父组件传值.html中编写以下代码，让child子组件传递数据给父组件parent。

<script>
    // 子组件
    var child = {
        // 2. 点击子组件的a标签，触发send_data向父组件传值
        template: "<div>子组件<br/><a href='#' @click='send_data'>传值给父组件</a></div>",
        methods: {
            send_data: function () {
                // 1. 调用$emit('事件名', '传递的值')将值传递给父组件
                this.$emit('send', 'hello')
            }
        }

    };

    // 父组件
    Vue.component("parent", {
        template: "<div>父组件<child v-on:send='receive_data'></child></div>",
        data: function () {
            return {
                count: 1
            }
        },
        components: {
            // child组件是parent组件的子组件
            "child": child
        },
        methods: {
            // 3. 定义receive_data用于获取子组件传递的数据
            'receive_data': function (input) {
                // input即为子组件传递的数据
                alert(input);
            }
        }
    });


    // 创建Vue对象
    var vue = new Vue({
        // 接管app对象对应的div区域
        el: "#app"
    })
</script>

3）在浏览器中查看08-子组件向父组件传值.html，点击传值给父组件a标签，效果如下：
在这里插入图片描述

3.单文件组件

将一个组件相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件，这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用，这种文件的扩展名为“.vue”，比如：“Hello.vue”。

// 使用template标签来定义html部分
<template>
    <p>{{ greeting }} World!</p>
</template>

// javascript要写成模块导出的形式：
<script>
    export default{
        data:function(){
            return {
                greeting: 'Hello'                
            }
        }
    }
</script>

// 样式中如果有scope关键字，表示这些样式是组件局部的，不会影响其他元素
<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

4.Vue-cli的使用

我们的项目文件都是手动创建出来，在实际开发中我们可以借助vue-cli创建出所有的项目文件。

  1. 基本使用

1）在终端全局安装vue-cli。

npm install --global vue-cli

2）使用vue-cli创建一个前端项目。

vue init webpack 项目名
如：
vue init webpack meiduo_mall_admin

创建出的项目目录结构如下：
在这里插入图片描述

  • src：主开发目录，要开发的单文件组件全部在这个目录下
  • static：静态资源目录，所有的css，js文件放在这个文件夹
  • components：组件目录，vue格式的单文件组件都存在这个目录中
  • router：路由目录，在此文件夹中配置组件路由
还有node_modules目录是node的包目录，config是配置目录，build是项目打包时依赖的目录。

3）运行调试项目。

// 进入项目目录下，执行下面指令
npm run dev

效果如下：
在这里插入图片描述

4）通过浏览器访问http://localhost:8080，效果如下：
在这里插入图片描述

  1. Vue单文件组件项目页面结构说明

在这里插入图片描述

整个项目是一个主文件index.html，index.html中会引入src文件夹中的main.js，main.js中会导入顶级单文件组件App.vue，App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。

鞋子不会飞
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue组件
sjs1766349405的博客
12-03 1450
一、组件化 1.简介 组件（component）是vue.js最强大的功能之一。组件的作用就是封装可重用的代码，通常一个组件就是一个功能体，便于在多个地方都能够调用这个功能体。 每个组件都是Vue的实例对象。 我们实例化的Vue对象就是一个组件，而且是所有组件的根组件 2.全局注册组件 <body> <div id="app"> <my-header></my-header> <my-header>&l
VUE——组件
Euniceing的博客
11-13 966
vue之组件
Vue组件详解
月光晒了很凉快的博客
09-07 1万+
组件 (Component) 是 Vue.js 最强大的功能之一，它是html、css、js等的一个聚合体，封装性和隔离性非常强。组件化：组件注册分为：全局注册和局部注册语法：，第1个参数是标签名称，第2个参数是一个选项对象。全局组件注册后，任何vue实例都可以用。组件注意事项： 应用：现在我们想要自定义一个标签，并且显示“我是一个标题”的内容，该怎么做呢？ 使用模板字符串生成组件，并且实现组件嵌套： 这种方式，可以使得组件的使用更加灵活，当需要使用全局组件时，就通过插件插入，不用时，就移除。 初始化阶
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏） 、动画组件库、文本编辑器，富文本、Markdown，3D组件库】
热门推荐
程序员猫爪
11-29 2万+
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏） 、动画组件库、文本编辑器，富文本Markdown，3D组件库】
【Vue组件详解（一）】
小田是个程序员的博客欢迎你的到来呀~
04-07 1万+
卷起来兄弟们！本篇文章主要介绍了Vue中组件的详细知识，以图形和实例相结合的方式带你一步一步入手Vue组件！！！
vue组件如何被其他项目引用
01-19
自己写的vue组件怎么才能让其他人引用呢，或者是共用组件如何让其他项目引用。本文就粗细的介绍下，如有疑问欢迎共同讨论。在这里你能了解下如下知识点： 1. 如何发布一个包到npmjs仓库上 2.如何引用一个npm包，尤其...
vue组件培训ppt
01-09
vue组件培训ppt VUE组件基础、组件交互、路由、vuex等
vue组件-自定义滚动条
06-30
vue组件-自定义滚动条
vue组件编写之todolist组件实例详解
08-28
Vue 组件编写之 TodoList 组件实例详解 本文将详细介绍 Vue 组件编写之 TodoList 组件的实例讲解，主要包括组件注册、模板编写、样式设计、事件处理等方面的知识点。 组件注册 在 Vue 中，组件注册是指将一个组件...
封装canvas各种方法的vue组件
09-07
在本例中，“封装canvas各种方法的vue组件”意味着开发者已经将常见的Canvas操作（如绘图、文字处理等）封装在一个自定义的Vue组件里，方便在项目中多次使用，提高了代码的复用性和可维护性。 其次，`Canvas API`...
vue组件（全局，局部，动态加载组件）
12-08
vue组件有两种，一种是全局组件，一种是局部组件。整个项目经常用到的用全局写法，用到比较少的专供特定页面用的使用局部组件。 one—-全局组件引入写法：在项目的main.js中： 第一种，在main.js直接写template：’ ...
VUE组件练习：VUE.rar
11-30
在"VUE.rar"这个压缩包中，我们有两个关键文件：vue.js 和 VUE08，它们分别代表Vue.js的核心库文件和一个可能是第八个练习的Vue组件。 首先，让我们深入了解Vue.js的核心特性： 1. **组件化**：Vue.js 的核心理念...
Vue组件（Component）
最新发布
leva的博客
02-08 8493
在正式介绍组件前，先看一个Vue组件的简单示例感受一下，代码如下：组件是可复用的Vue实例，且带有一个名字，在这个示例中组件名字是button-counter。可以在一个通过new Vue创建的Vue根实例中，把这个组件作为自定义标签来使用，代码如下：Web的组件其实就是页面组成的一部分，好比是计算机中的每一个硬件（如硬盘、键盘、鼠标等），它具有独立的逻辑和功能或界面，同时又能根据规定的接口规则进行相互融合，从而变成一个完整的应用。
VUE笔记（四）vue的组件
m0_74343097的博客
08-26 1126
整个项目都是由组件组成可以让代码复用：相似结构代码可以做成一个组件，直接进行调用就可以使用，提高代码复用性可以让代码具有可维护性（只要改一处，整个引用的部分全部都变）注意点：组件和模块区别模块仅对逻辑进行复用组件针对与结构、逻辑、样式进行复用的UI控件所谓的生命周期是指该组件对象从开始创建到销毁回收的整个全过程。
Vue -组件
张锦的博客
04-12 4640
1、组件的作用： 组件（Component）是Vue.js最强大的功能之一。. 组件可以扩展HTML元素，封装可以重复使用的代码。. 在较高层次上，组件就是自定义元素，Vue.js的编辑器为它添加特殊功能。 2、组件的分类： 在vue中组件可以分为全局组件和局部组件。 全局组件：所谓的全局组件就是不仅仅可以在一个vue实例中使用，在其他vue实例中也可以使用 的组件。 局部组件：所谓的局部组件就是只能在某个vue实例中使用的组件，在其他的vue实例中不能使 ...
vue基础学习-组件
weixin_40017062的博客
06-05 1872
vue基础学习-组件
Vue组件精讲
《Vue组件精讲》是一本关于Vue.js框架的前端开发技术小册，主要介绍了Vue.js组件的核心思想和使用技巧。作者在本小册中着重分享了自己在3年的Vue.js开发和两年的iView开源项目中所积累和沉淀的关于Vue.js组件的见解...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值