Vue实战项目开发--深入理解vue组件

最新推荐文章于 2024-07-30 16:34:14 发布
最新推荐文章于 2024-07-30 16:34:14 发布
阅读量1.4k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wo_921110/article/details/80636420
版权

项目的源代码在GitHub上：点击查看


组件使用的细节点

  • 使用is属性解决模板标签上出现bug的情况
  • 在子组件定义data时，data必须是一个函数，而不能是一个对象（因为子组件会多次调用，每个子组件享用自己的数据，而不是像根组件享有一套数据，通过函数来返回数据，就是让每个子组件拥有独立的数据）
  • ref：可以在子组件上定义不同的ref，然后就可以通过引用来取得子组件的数据

    注意：另外的两个案例的代码在GitHub上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件使用中的细节点</title>
    <script src="./vue.js"></script>
</head>
<body>

    <div id="root">
        <table>
            <tbody>
                //通过is属性，让子组件显示出来，也满足h5的编码规范
                <tr is="row"></tr>
                <tr is="row"></tr>
                <tr is="row"></tr>
            </tbody>
        </table>
    </div>

    <script>

        Vue.component("row",{
            template: '<tr><td>this is row</td></tr>'
        })

        var vm =new Vue({
            el: "#root"
        })
    </script>
</body>
</html>

父子组件的数据传递

  • 父组件向子组件传值都是通过属性来传递的，子组件通过props来接受（单向数据流：子组件只能用父组件传递过来的参数，不能修改父组件传递过来的内容）
  • 子组件向父组件传值是通过事件的形式，把触发的事件向父组件传递

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件的数据传递</title>
    <script src="./vue.js"></script>
</head>
<body>

    <div id="root">
        <counter :count="2" @inc="handleIncrease"></counter>
        <counter :count="3" @inc="handleIncrease"></counter>
        <div>{{total}}</div>
    </div>

    <script>


        var counter = {
            props: ['count'],
            data: function () {
                return {
                    number:  this.count
                }
            },
            template: '<div @click="handleClick">{{number}}</div>',
            methods: {
                handleClick: function () {
                    this.number =  this.number + 2
                    this.$emit('inc', 2)
                }
            }
        }
        var vm = new Vue({
            el: "#root",
            data: {
                total: 5
            },
            components: {
                counter: counter
            },
            methods: {
                handleIncrease: function (step) {
                   this.total += step
                }
            }
        })
    </script>
</body>
</html>

组件参数校验与非props特性

required：确定父组件是否必须先向子组件传值

default：默认值，如果父组件没有向子组件传值，就显示默认值

validator：自定义校验器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件参数校验与非props特性</title>
    <script src="./vue.js"></script>
</head>
<body>

    <div id="root">
        <child content="hell"></child>
    </div>

    <script>

        Vue.component('child',{
            props: {
                content: {
                    type: String,
                    //required: false,
                    //default: 'default value'
                    validator: function (value) {
                        return (value.length > 5)
                    }
                }
            },
            template: '<div>{{content}}</div>'
        })
        var vm =new Vue({
            el: "#root"
        })
    </script>
</body>
</html>

非props特性：

  • 子组件没有定义props来接受父组件传递来的参数，就引起非props特性
  • 申明了一个非props特性，这个属性会展示在子组件的dom标签上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件参数校验与非props特性</title>
    <script src="./vue.js"></script>
</head>
<body>

    <div id="root">
        <child content="hell"></child>
    </div>

    <script>

        Vue.component('child',{
//            props: {
//                content: {
//                    type: String,
//                    //required: false,
//                    //default: 'default value'
//                    validator: function (value) {
//                        return (value.length > 5)
//                    }
//                }
//            },
            template: '<div>hello world</div>'
        })
        var vm =new Vue({
            el: "#root"
        })
    </script>
</body>
</html>

非父子组件间的传值

  • 可以通过vue的vuex框架实现非父子组件间的传值
  • 总线机制：发布-订阅模式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非父子组件间传值(Bus/总线/发布订阅模式/观察者模式)</title>
    <script src="./vue.js"></script>
</head>
<body>

    <div id="root">
        <child content="Dell"></child>
        <child content="Lee"></child>
    </div>

    <script>
        //向vue实例的类添加一个bus属性
        Vue.prototype.bus = new Vue()
        
        Vue.component('child', {
            data: function () {
                return {
                    selfContent: this.content
                }
            },
            props: {
                content: String
            },
            template: '<div @click="handleClick">{{selfContent}}</div>',
            methods: {
                handleClick: function () {
                    this.bus.$emit('change', this.selfContent)
                }
            },
            mounted: function () {
                var this_ = this
                this.bus.$on('change', function (msg) {
                    this_.selfContent = msg
                })
            }
        })

        var vm =new Vue({
            el: "#root"
        })
    </script>
</body>
</html>

注意：子组件不能直接改变父组件穿的值，不然会报错，因为要满足单向数据流

在Vue中使用插槽

  • 通过插槽，可更方便地向子组件传递dom元素，同时子组件使用这个插槽也很简单
  • 通过使用具名插槽，可以插入你想插入地内容
  • 作用域插槽：父组件调用子组件的时候，给子组件传了一个插槽(作用域插槽，这个插槽必须是template结尾的，还需要申明父组件接受子组件的数据放在那里的，还给子组件的模板的信息)，当子组件做循环或者某一部分时，它的DOM结构由外部传递时
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的插槽(slot)</title>
    <script src="./vue.js"></script>
</head>
<body>

    <div id="root">
        <child>
            <p>Dell</p>
        </child>
    </div>

    <script>

        Vue.component('child',{
            template:  `<div>
                            <p>Hello</p>
                            <slot></slot>
                        </div> `
        })

        var vm = new Vue({
            el: "#root"
        })

    </script>
</body>
</html>

作用域插槽：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的作用域插槽(slot)</title>
    <script src="./vue.js"></script>
</head>
<body>

    <div id="root">
        <child>
            <template slot-scope="props">
                <h1>{{props.item}}</h1>
            </template>
        </child>
    </div>

    <script>

        Vue.component('child',{
            data: function(){
                return {
                   list: [1, 2, 3, 4]     
                }
            },
            template: `<div>
                            <ul>
                                <slot   v-for="item of list"
                                        :item=item
                                >
                                </slot>
                            </ul>
                       </div>`
        })
        var vm = new Vue({
            el: "#root"
        })

    </script>
</body>
</html>

动态组件和v-once指令

  • 通过componet可以实现动态组件效果，
  • v-once：可以提高静态资源的展示效率，并且把组件放在内存中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件与v-once指令</title>
    <script src="./vue.js"></script>
</head>
<body>

    <div id="root">
        <!--动态组件-->
        <!--<component :is="type"></component>-->

        <child-one v-if="type === 'child-one'"></child-one>
        <child-two v-if="type === 'child-two'"></child-two>
        <button @click="handleBtnClick">change</button>
    </div>

    <script>

        Vue.component('child-one', {
            template: '<div v-once>child-one</div>'
        })

        Vue.component('child-two', {
            template: '<div v-once>child-two</div>'
        })

        var vm = new Vue({
            el: '#root',
            data: {
                type: 'child-one'
            },
            methods: {
                handleBtnClick: function () {
                    this.type = (this.type === 'child-one' ?
                        'child-two' : 'child-one');
                }
            }
        })
    </script>
</body>
</html>
vue项目开发实战
12-30
课程介绍：          《Vue项目开发实战》Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。            Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。             本课程从构建一个Vue开发项目到部署应用实践，由浅入深，引领学员逐步掌握各项技能，实战项目，且侧重技能不同，学员的知识体系会更加全面课程内容涵盖：                Vue入门                显示todo列表/添加todo                删除/编辑todo                自定义指令实现自动聚焦                筛选                本地存储                组件化todo应用                Vue-cli
Vue实战——如何快速开发一个项目（万字详解流程）
白话机器学习
07-28 3496
注意：命令行都要使用管理员模式运行1、创建一个名为hello-vue的工程2、安装依赖， 我们需要安装vue-router、element-ui、sass-loader和node-sass四个插件。
Vue开发与实战
dudu_hope的博客
05-31 537
https://cn.vuejs.org/ 2-2 Vite Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。作者是尤雨溪，同时也是 Vue 的 作者！ 要使用 Vite 来创建一个 Vue 项目，非常简单： 这个命令会安装和执行 create-vue，它是 Vue 提供的官方脚手架工具。跟随命令行的提示继续操作即可。 Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的
全网最强Vue实战教程 | 万字长文爆肝Vue实战
最新发布
qq_45832461的博客
07-30 696
本文是笔者学习《[2021最新Vue全家桶系列教程](https://www.bilibili.com/video/BV1Lo4y1R7hc/?spm_id_from=333.999.0.0&vd_source=a9ee82b2045abbbc7362e3575b7181fb)》深入浅出Vue教程，这是目前主流的前端框架。基于企业最流行Vue实战技术，通篇图文并茂，资料详实丰富，带你领略不一样的Vue风格和实战技巧！
Vue实战：两种方式创建Vue项目
howard2005的专栏
01-14 2796
本实战教程以Vue CLI为工具，指导用户从安装Node.js LTS与Vue CLI开始，通过命令行和IntelliJ IDEA创建并配置Vue 3项目。教程演示了依赖管理（如axios、vue-router）、组件开发及路由配置，并展示了Vue项目的基本结构。通过新增页面组件和设置对应路由规则，实现不同页面间的跳转功能。该教程全面覆盖了Vue项目从搭建到功能开发的核心步骤，为开发者快速掌握Vue.js技术栈提供了详尽实践指导。
vueCli项目实战（超详细保姆级教学）
SuperTun的博客
01-10 2602
vueCLi项目实战（超详细保姆级教学）
个人vue实战项目---电商类-e_shop.zip
11-04
本项目“个人vue实战项目---电商类-e_shop”是基于Vue.js开发的一个电商应用，旨在帮助开发者实践Vue.js在实际项目中的应用，提升前端开发技能。 1. **Vue.js基础** - **Vue实例**：项目的入口文件通常会创建一个...
vue项目实战-使用vue开发的点外卖App-附项目源码.zip
01-26
通过实践这个项目，你可以深入了解Vue的核心概念，如虚拟DOM、组件系统、响应式数据绑定以及生命周期钩子等。 1. **虚拟DOM**：Vue.js 使用虚拟DOM作为其核心机制，以提高性能和效率。在UI更新时，Vue会比较新旧...
VueCli3实战项目 - 饿了m.txt
09-07
├─01 VueCli3实战项目-还原eleme订餐App1(短信验证码登录和高德定位) │ 001 VueCli3-饿了吗项目成果展示和注意事项.mp4 │ 002 VueCli3-构建项目和准备工作.mp4 │ 003 VueCli3-构建登录组件.mp4 │ 004 VueCli3-...
vue-cli开发的商城源代码
01-18
Vue CLI 是一个官方提供的命令行工具，用于快速搭建 Vue.js 应用程序。它简化了项目的初始化、配置和脚手架工作，...通过研究和学习这个源代码，开发者可以深入理解Vue.js的实战应用，并且掌握现代前端开发的工作流程。
Vue实战硅谷外卖 Vue-router
07-23
在这个"Vue实战硅谷外卖Vue-router"项目中，我们将深入探讨如何利用Vue全家桶，包括Vue.js、Vue-router、Vuex（虽然未在描述中提及，但通常在大型项目中会使用）以及相关工具来构建一个功能丰富的Web应用程序。...
Vue从零到实战
东风麦芽糖
05-19 5697
1、初识Vue 2、组件化开发知识介绍 3、Vue核心插件之路由模块
vue组件
weixin_44106237的博客
09-22 226
vue组件
Vue实战：使用CLI构建Vue项目
howard2005的专栏
11-08 2557
本教程手把手演示了通过Vue CLI创建Vue项目，涵盖环境配置、命令行与IDEA工具构建项目、组件添加及路由配置。展示了从初始化到新增页面的完整流程，体现了Vue CLI在简化前端开发工作流上的高效性。
vue 嵌套iframe第一次无数据_学 Vue 看这个就够了
weixin_39681161的博客
11-21 631
1.Vue框架描述Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。兼容性：Vue 不支持 IE8 及以下版本，因为 Vue ...
【万字长文】 Vue全家桶从入门到实战，初学者必备
m0_74918915的博客
04-02 899
展示路由template：HTML 代码模板，会替换 < App /> 中的内容export default{…}：导出 NodeJS 对象，作用是可以通过 import 关键字导入name: ‘App’：定义组件的名称components: { HelloWorld }：定义子组件在hello,Vue中,关于 < style scoped> 的说明：CSS 样式仅在当前组件有效，声明了样式的作用域,是当前的界面私有的!不加代表全局有效。index.js 配置路由。
Vue.js快速入门+项目实战（源码）
热门推荐
王俊的博客
06-12 4万+
Vue.js电影网站项目github 链接（如果觉得有用记得start哦~）:项目源代码链接 目录 前言 安装 Vue.js 1.Vue.js主要特性 2.Vue.js实例 3.Vue.js路由 4.Vue.js模板 5.条件渲染 6.列表渲染 7.事件处理 ES6常用语法 使用Babel进行ES6的转化 WebPack 构建第一个Vue.js项目 Vue......
Vue学习记录三 --- vue的项目实战
小jiang的博客
05-04 6014
Vue学习记录三 --- vue的项目实战
【Vue实践】一文搞懂Vue中的组件
lynnhgwang的博客
03-28 4050
本篇总结Vue中组件的使用，对组件的理解以及使用组件需要特别注意的点。 符号约定： .html文件表示该项目是传统web项目，即没用使用Vue脚手架工具，通过<script>引入vue.js的方法 .vue文件表示该项目是使用vue脚手架工具创建的 文章目录1、非单文件组件和单文件组件2、非单文件组件使用2.1 组件使用三大步骤2.2 组件使用的注意点3、VueComponnet构造函数4、VueComponent 和Vue之间的关系 1、非单文件组件和单文件组件 （1）非单文件组件 非.
Vue项目实战：vue-datepicker组件使用详解
在你的Vue组件中，需要导入刚刚安装的vue-datepicker。例如，在`script`标签内： ```javascript import myDatepicker from 'vue-datepicker' ``` 然后在`components`对象中声明该组件： ```javascript export...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值