什么是组件？

组件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. link元素 rel src href属性

    The SRC and HREF attributes are used to include some external entities like an image, a CSS file, a ...

  2. docker学习（一)

    在工作和生活中免不了要学习新的东西.学习新东西要和已有的东西相结合,要有较快的效率.今天学习一下docker的使用,也锻炼一下自己学习新东西的能力. 1.学习docker,首先要下载docker.首先 ...

  3. Linux 的基本操作（文件与目录管理）

    文件与目录管理 在linux中什么是一个文件的路径呢,说白了就是这个文件存在的地方,例如在上一章提到的/root/.ssh/authorized_keys 这就是一个文件的路径.如果你告诉系统这个文件 ...

  4. 8、路由 router

    路由:router 用户功能 /user ----> index.html /user/login ----> login.html /user/reg ----> reg.html ...

  5. python语法_input

    input:与用户的交互,返回用户输入的值 注意:input接受的所有数据都为字符串,即便输入的为数字,依然会被当成字符串

  6. myEclipse导入现成项目出现错误 【申明来源于网络】

    myEclipse导入现成项目出现错误 [申明来源于网络] 原地址:http://blog.sina.com.cn/s/blog_6d7703400100znh6.html file–>impo ...

  7. H5的缓存 manifest

    H5里面的App Cache是由开发Web页面的开发者控制的,而不是由Native去控制的,但是Native里面的WebView也需要我们做一下设置才能支持H5的这个特性. 1.工作原理 写Web页面 ...

  8. 最全的MonkeyRunner自动化测试从入门到精通（3）

    一.eclipse的下载安装与配置成安卓开发环境 步骤一:在官网上面进行下载eclipse,官网的网址:https://www.eclipse.org/downloads/ 步骤二:下载完成后可以在你 ...

  9. 删除64位ODBC数据源DNS

    1.按照打开管理工具-打开数据源(ODBC),进入如下界面,选择用户DSN删除,发现报错一直删除不了. 2.成功删除:进入如下图路径,打开ODBC数据源管理工具,选择要删除的DSN就可以成功删除啦.

  10. 关于 spring MVC 配置自动扫描中 use-default-filters 属性

    1.springMVC 设置扫描 Bean 的两种常见写法 1.1.先看第一种常见的配置:默认 <!-- 配置Controller扫描 --> <context:component- ...