Vue.js的核心学习笔记 - 第一章Component全局组件和局部组件

最新推荐文章于 2022-07-05 16:56:40 发布
最新推荐文章于 2022-07-05 16:56:40 发布
阅读量203 收藏 2
点赞数 2
分类专栏： Vue.js 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33638188/article/details/121785097
版权

Vue.js的核心学习笔记 - 第一章Component全局组件和局部组件

简介

Vue中组件(Component) 是一个极其重要且需要掌握的知识点，今天我们来学习一下全局组件以及局部组件

入门

为了方便大家学习，这里省略部分比较枯燥的概念，直接贴代码

定义vue

// 定义Vue
    var vue = new Vue({
        el: '#box'
    })

HTML & DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
	<!-- 定义一个div#box -->
    <div id="box">
    
    </div>
</body>
</html>

全局组件

全局组件：顾名思义类似于Java在类中定义的全局变量或修饰符设置为public的意思。
Vue全局组件：可以在DOM中将组件(自定义标签)进行组件化操作

代码

Script

// 全局组件声明方式
    Vue.component("test-item",{
        template: `<div>我是一个通过Vue注册test-item 全局组件</div>`
    })

HTML

<body>
    <div id="box">
        <test-item></test-item>
    </div>
</body>

结果
全局组件效果图

随着讲完了全局组件注册，那我们接下来学习一下局部组件声明以及相关操作

局部组件

局部组件：顾名思义等Vue生命周期结束后，随着注销该组件，释放空间。
两种声明方式：一种隐式DOM操作，一种显式DOM操作

显式局部组件

代码
Script

    // 定义一个title_item 局部组件
    let title_item = {
        template: 
        `<p>这是一个title,由局部组件注册而来</p>`,
    }
    
	// 定义Vue
    var vue = new Vue({
        el: '#box',
        components: {
           "title-item": title_item
        }
    })

DOM

    <div id="box">
        <title-item></title-item>
    </div>

效果
显式效果

隐式局部组件

代码
Script

	//原Vue
    var vue = new Vue({
        el: '#box',
        template: `<title-item></title-item>`,//通过template注册
        components: {
            "title-item": title_item
        }
    })

DOM

	<!-- 隐式操作无需在DOM添加标签。 -->
    <div id="box">
    
    </div>

结果
隐式结果

结束语

到这里我们的第一章的内容就告一段落，下一章更加精彩。

回到目录点我 序章

Marinda_Speed
关注
专栏目录
组件基础--组件的使用
fly_vip的博客
11-10 202
1、组件部分（组件内部 ，涉及到子组件收到父的传值） <template> <el-select v-model="val" filterable clearable placeholder="请选择水井"> <el-option v-for="(option, index) in val_options" :key="index" :lab...
组件的基本使用上
小可桢的博客
03-06 708
1 组件的注册 组件之间可以相互的引用，但有一个前提-----------注册 1.1 注册的两种方式 全局注册和局部注册两种 全局注册： 被全局注册的组件，可以在全局任何一个组件内使用 1.在main.js内导入两个组件 2.调用 app 实例的 component() 方法，再全局注册两个组件，两个参数（' 前面字符串是名称 ',xx) 3.在其他组件中直接以标签的形式就能使用 局部注册： 被局部注册的组件，只能在当前注册的范围内使用 ...
组件的使用方法
weixin_34082177的博客
09-16 322
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
基本组件的使用
SANDKING2015的博客
06-27 106
在本例演示了JTextField，JTextArea，JPasswordField，JCheckBox(复选框按钮)，JRadioButton(下拉列表框组件)，JLabel等基本组件的用法。 需要注意的是：若多个JRadioButton需要归为一组时，需要把这些JRadioButton使用add()方法添加到ButtonGroup中对象。 import java.awt.*; ...
全局组件和局部组件
qq_43260366的博客
03-22 3991
1.全局组件和局部组件的区别 全局组件：只需要在main.js中导入一次，整个项目都可以直接使用（在main.js中导入） 局部组件：用一次 导一次 （在用到的地方导入） 2.局部组件导入步骤 // 3部曲 //[1]导入子组件 import Register from './Register.vue' ​ export default { //[2]注册子组件components: { Register }, compontents: { Register }, ...
Vue3.0学习笔记-全局组件和局部组件
petit_wu的专栏
03-05 1454
根组件 Vue.createApp实际是建立一个Vue的实例，也就是相当于第一个根组件 全局组件及组件复用性 Vue中的组件是页面中的一部分，通过层层拼装，最终形成了一个完整的组件 弊端：只要定义了，处处可以使用，性能不高，但是使用起来简单 app.component('website',{ template:` <h2>Website组件</h2>` }) app.component('describe',{ template:` <h2>D
vue项目总结和前端学习笔记-06091809.pdf
05-28
Vue.js是一个轻量级的JavaScript框架，它以数据驱动和组件化的思想构建用户界面。它采用MVVM（Model-View-ViewModel）模式，通过声明式渲染使得数据和视图之间保持同步。Vue官网提供了快速入门的教程，通过简单的...
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Only-CYY的博客
07-05 3863
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Vue.js学习笔记——11.组件化开发（二）
土拨鼠的忧伤的博客
12-01 172
目录六、父子组件的通信1.父传子——props2.子传父——自定义事件七、父子组件的访问方式1.父访问子——$children2.父访问子——$refs3.子访问父——`$parent`与`$root` 上集：Vue.js学习笔记——10.组件化开发（一） 六、父子组件的通信 1.父传子——props 在实际开发中，我们从服务器请求到了很多数据，并不是在整个页面的大组件来展示的，而是需要下面的子组件进行展示，这时不会让子组件再次发生一个网络请求，而是直接让父组件将数据传递给子组件。父组件向子组件传递数据有两
Vue.js尚硅谷视频学习笔记(第四章：vue UI 组件库)
canxuezhang的博客
02-27 382
热门框架Vue学习笔记
全局组件与局部组件
great_t的专栏
03-28 236
组件之间都是互相隔离的，定义data下属性也是分别在各自的组件里定义。 和根组件不同，全局组件和局部组件定义data，都采用下面这种方式。 除了data使用和在根组件下有所不同之外，其他所有选项，例如methods，computed等等都和在根组件里使用方法一致。 Vue.component("kerwinHeader",{ template:` <section style="background:yellow;"> 页面的导航栏部..
组件一：全局组件和局部组件
weixin_34413357的博客
03-07 544
全局组件[要注册一个全局组件，可以使用Vue.component(tagName, options)]【注意点：组件在注册之后，便可以作为【自定义元素】在一个实例的模板中使用，确保在初始化根实例之前注册组件。】 html: <my-global></my-global> 1 <section id="global"> 2 &...
Vue全局组件和局部组件
木木的博客
07-30 1043
Vue实例中的配置项： data、computed、watch、methods 以及生命周期钩子函数(created,mounted)等Vue 全局组件 &lt;body&gt; &lt;div id="app"&gt; &lt;home&gt;&lt;/home&gt; &lt;/div&gt; &lt;script src='./vue.js'&gt;&lt
Vue.js快速入门：组件基础教程
"Vue.js快速学习笔记，适合初学者及有经验者温故知新，主要涵盖Vue组件的快速入门，包括组件的创建、注册、单向和双向数据绑定等核心概念。" Vue.js是一个流行的前端JavaScript框架，以其简单易学、高性能和组件化...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值