组件化开发 需要使用到组件, 围绕组件, Vue 提供了一系列功能方法, 这里仅记录组件的 最简单 的使用方法.

1. 通过 Vue.component(tagName, options) 注册一个 全局组件, 这个组件可以在不同的 Vue 实例 中使用.

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

</head>

<body>

    <div id="app1">

        <sayhello></sayhello>

    </div>

    <hr/>

    <div id="app2">

        <sayhello></sayhello>

    </div>

    <script>

        // 全局组件, 注意组件名必须小写

        Vue.component("sayhello", {

            template: "<h2>Hello</h2>"

        })

        // Vue 实例1

        var vApp1 = new Vue({

            el: "#app1"

        })

        // Vue 实例2

        var vApp2 = new Vue({

            el: "#app2"

        })

    </script>

</body>

</html>

2. 局部组件 在 Vue 实例中注册(声明), 它只能在当前 Vue 实例中使用, 因此成为 局部组件, 注意这里是 components , 而非 component

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

  <title>Vue Test</title>

</head>

<body>

    <div id="app">

        <sayhello></sayhello>

    </div>

    <script>

        // Vue 实例

        var vApp = new Vue({

            el: "#app",

            // 注意这里是: componets, 而不是: component

            components: {

                sayhello: {

                    template: "<strong>Hello</strong>"

                }

            }

        })

    </script>

</body>

</html>

怎样创建并使用 vue 组件 (component) ?的更多相关文章

  1. Vue组件component创建及使用

    组件化与模块化的区别 什么是组件:组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块 ,将来我们需要什么功能,就可以去调用对应的组件即可 组件化与模块化的不同: ...

  2. html中创建并调用vue组件的几种方法

    最近在写项目的时候,总是遇到在html中使用vue.js的情况,且页面逻辑较多,之前的项目经验都是使用脚手架等已有的项目架构,使用.vue文件完成组价注册,及组件之间的调用,还没有过在html中创建组 ...

  3. 二、Vue组件(component)：组件的相互引用、通过props实现父子组件互传值

    一.组件各部分说明及互相引用 1.一个vue组件由三个部分组成 Template 只能存在一个根元素 2.Script 3.Style scoped:样式只在当前组件内生效 1.1 组件的基本引用代码 ...

  4. vue组件component没效果

    如果实在不知道问题所在,你就看看你的component的命名是不是驼峰命名

  5. vue组件创建的三种方式

    1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 ...

  6. Vue系列之 => vue组件创建

    创建方式 一 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  7. 黑马vue---56-58、vue组件创建的三种方式

    黑马vue---56-58.vue组件创建的三种方式 一.总结 一句话总结: 不论是哪种方式创建出来的组件,组件的 template 属性指向的模板内容,必须有且只能有唯一的一个根元素 1.使用 Vu ...

  8. 使用VUE组件创建SpreadJS自定义单元格(一)

    作为近五年都冲在热门框架排行榜首的Vue,大家一定会学到的一部分就是组件的使用.前端开发的模块化,可以让代码逻辑更加简单清晰,项目的扩展性大大加强.对于Vue而言,模块化的体现集中在组件之上,以组件为 ...

  9. 004 vue组件

    一:创建组件 1.第一种创建方式 主要有Vue.extend,Vue.component. 注释掉的代码是一步一步的推断,后面的代码是简化的代码. <!DOCTYPE html> < ...

随机推荐

  1. php 中 使用foreach为数组增加键值对

    php 中的 foreach 在php中,使用foreach来遍历数组的频率很高,并且其性能要高于 list() 和 each() 结合来遍历数组: 当遍历二位数组的第一层数组,并要给第二位数组增加一 ...

  2. FreeMarker学习（常用表达式）

    直接指定值 字符串: "Foo" 或者 'Foo' 或者 "It's \"quoted\"" 或者 'It\'s "quoted& ...

  3. antd源码分析之——标签页（tabs 2.Tabs关键组件功能实现）

    由于ant Tabs组件结构较复杂,共分三部分叙述,本文为目录中第二部分(高亮) 目录 一.组件结构 antd代码结构 rc-ant代码结构 1.组件树状结构 2.Context使用说明 3.rc-t ...

  4. Flume-几种拓扑结构

    一.串联 Flume Agent 连接 这种模式是将多个 flume 顺序连接起来了,从最初的 source 开始到最终 sink 传送的目的存储系统.此模式不建议桥接过多的 flume 数量,flu ...

  5. 设置Fedora能够使用root用户登录

    1. 切换到root工作环境,因为一下操作必须拥有root权限 [ha@localhost ~]$ su root密码: 2. 编辑/etc/pam.d/gdm [root@localhost ha] ...

  6. Android跨进程通信广播（Broadcast）

    广播是一种被动跨进程通讯的方式.当某个程序向系统发送广播时,其他的应用程序只能被动地接收广播数据.这就象电台进行广播一样,听众只能被动地收听,而不能主动与电台进行沟通,在应用程序中发送广播比较简单.只 ...

  7. 自定义 TreeView 第三种状态(C#自定义控件)

    本文核心部分采用 http://blog.csdn.net/am2004/article/details/1621349 此网站代码. 在增加了部份事件的同时,将点击图片更改节点选中状态 这一小地方作 ...

  8. Hibernate3核心API-SessionFactory接口

    Configuration对象根据当前的配置信息生成 SessionFactory 对象.SessionFactory 对象一旦构造完毕,即被赋予特定的配置信息(SessionFactory 对象中保 ...

  9. jsp细节------<base>

    1:jsp一般都有这个<base href="<%=basePath%>">,它的作用一般用不到,但在使用java框架用注解时会用. 如下代码(xxx.js ...

  10. C++ STL内存池

    内存池出现原因:内存碎片 首先我们需要明确, 内存池的目的到底是什么?  首先你要知道的是, 我们每次使用new T来初始化类型T的时候, 其实发生了两步操作, 一个叫内存分配, 这一步使用的其实不是 ...