什么是组件？

组件Component,可扩展HTML元素，封装可重用的代码。通俗的来说，组件将可重用的HTML元素封装成为标签方便复用；

组件的使用：

1、使用全局的方法Vue.extend创建构造器；

2、再使用全局的方法Vue.component注册组件；

注意：在Vue.component里需要指明组件的名称，组件名称不能使用内置标签名称，如body.推荐使用短横线命名规则。

如：

my-component    正确 （推荐使用）

my-Component   错误

mycomponent    正确

Mycomponent    正确

myComponent   错误

MyComponent   错误

示例：

vue 代码：

<script>

            window.onload= () =>{

                //创建构造器

                let myComponent=Vue.extend({

                    template:"<h1>欢迎来到perfect*的博客园</h1>"

                });

                //注册组件

                Vue.component('my-component',myComponent);

          new Vue({

                el:'div',

                data:{

                }

            })}

        </script>

html:

<div>

            <my-component></my-component>

        </div>

使用注册组件简写的方式：

出现的问题：

修改后的效果：

vue代码：

//注册组件的简写方式

                Vue.component('my-componenta',{

                    template:'<h2>hello vue</h2>'

                });

html:

<my-componentA></my-componentA>

html标签是大小写不分的

组件的命名不支持驼峰命名方式

最终所有代码：

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>component</title>

         <script type="text/javascript" src="../js/vue.js" ></script>

         <script>

             window.onload= () =>{

                 //创建构造器

                 let myComponent=Vue.extend({

                     template:"<h1>欢迎来到perfect*的博客园</h1>"

                 });

                 //注册组件

                 Vue.component('my-component',myComponent);

                 //注册组件的简写方式

                 Vue.component('my-componenta',{

                     template:'<h2>hello vue</h2>'

                 });

                 new Vue({

                 el:'div',

                 data:{

                 }

             })}

         </script>

     </head>

     <body>

         <div>

             <my-component></my-component>

             <my-componentA></my-componentA>

         </div>

     </body>

 </html>

组件的介绍

详细介绍见官网：https://cn.vuejs.org/v2/api/#%E5%85%A8%E5%B1%80-API

Vue 组件&组件之间的通信 之组件的介绍的更多相关文章

  1. Vue 组件&组件之间的通信 父子组件的通信

    在Vue的组件内也可以定义组件,这种关系成为父子组件的关系: 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的关系就是: Vue ...

  2. vue组件父子之间相互通信案例

  3. vue中组件之间的通信

    一.vue中组件通信的种类 父组件向子组件的通信 子组件向父组件的通信 隔代组件之间的通信 兄弟 组件 之间的通信 二.实现通信的方式  props vue自定义的事件 消息订阅与发布 vuex sl ...

  4. 简述在Vue脚手架中，组件以及父子组件（非父子组件）之间的传值

    1.组件的定义 组成: template:包裹HTML模板片段(反映了数据与最终呈现给用户视图之间的映射关系) 只支持单个template标签: 支持lang配置多种模板语法: script:配置Vu ...

  5. vue-组件之间的通信：

    组件之间的通信:一个组件被调用,那么里面的数据就需要从前者调用,因为在开发中组件时重复调用的,在页面中会反复使用,但是里面的数据是不一样的,谁调用这个组件谁就传递数据给这个组件,所以就要暴露一些接口, ...

  6. Vue.js组件之同级之间的通信

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. Vue.js组件之间的通信

    导语:组件之间的关系不外乎两种, 父子组件和非父子组件,本文将对两类组件之间的通信方式进行详细阐述. 父子组件间的通信 通信方式1(单向绑定): Props down, Events up (建议使用 ...

  8. vue 基础-->进阶 教程(3):组件嵌套、组件之间的通信、路由机制

    前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零开始,教给大家vue的基础.高级操作.组件 ...

  9. vue工程利用pubsub-js实现兄弟组件之间的通信

    前言 项目是基于vue-cli创建的,不会搭建vue开发环境的同学可以百度,这里不再赘述. 步骤流程 vue项目搭建完成之后的文件图如下: 我的上一篇博客已经详细叙述vue工程中各个文件的作用,不清楚 ...

随机推荐

  1. SublimeText插件Pandoc导出PDF中文报错或者中文不显示解决方法

    按照如下自定义配置(主要是指定latex的字体[仅限本机字体]) { "user": { // "pandoc-path":"C:\\Program ...

  2. STM32进入HardFault_Handler处理办法

    STM32进入HardFault_Handler处理办法 HardFault_Handler出现的情况一般有两种: 一种是:数组越界 一种是:堆栈溢出,程序指针指飞 方法一 在中断HardFault_ ...

  3. wpgcms---字符串截取

    在使用wpgcms做项目的时候,会用到要对描述做字符串截取,具体方法如下: {{ contentInfo.summary|slice(0,75) }}

  4. python DBUtils 线程池 连接 Postgresql（多线程公用线程池，DB-API : psycopg2）

    一.DBUtils DBUtils 是一套允许线程化 Python 程序可以安全和有效的访问数据库的模块,DBUtils提供两种外部接口: PersistentDB :提供线程专用的数据库连接,并自动 ...

  5. Vue2学习笔记:计算属性（computed）

    参考:https://www.cnblogs.com/zycbloger/p/6428907.html

  6. 查询数据库中含clob，blob的表

    查询含clob,blob的表select distinct ('TABLE "' || a.OWNER || '"."' || a.TABLE_NAME || '&quo ...

  7. HTML load事件和DOMCOntentLoaded事件

    JS高程 p14 “异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行”   普通script标签会阻塞DOM的解析 DOMcontentLoa ...

  8. dedecms (织梦)漏洞&exp整理

    [通杀]dedecms plussearch.php 注入漏洞利用方式看结果如果提示Safe Alert: Request Error step 2 !那么直接用下面的exp查看源代码打印帮助1 /p ...

  9. html 中a标签的问题（无反应，跳转，调用方法）

    让超链接点击后不跳转,可以用href = "#",但是这个#就会锚点到页面最上边     点击链接后不跳转可以设置成     1.<a href="javascri ...

  10. Oracle课程档案，第六天

    体系结构: instance:实例 database:数据库 RAC:多实例对一个数据库 SGA:最大总数 (系统全局区域)缓存区 PGA:其中的一块, 也是一个缓存区 server process: ...