组件化开发 需要使用到组件, 围绕组件, 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. 【Redis 设置Redis使用LRU算法】

    转自:http://ifeve.com/redis-lru/ 本文将介绍Redis在生产环境中使用的Redis的LRU策略,以及自己动手实现的LRU算法(php) 1.设置Redis使用LRU算法 L ...

  2. dubbo服务层面上的负载均衡和高可用

    dubbo上的服务层可以做集群,来达到负载均衡和高可用,很简单,只需要在不同的服务器节点上向同一个zk(内网环境)注册相同的服务 注意就是,消费者不能在同一个zk做这种集群操作的 转载请注明博客出处: ...

  3. git基本操作命令和安装

    git客户端下载及安装 git.png git官方下载链接 1. 添加到桌面 添加到桌面.png (1)图标组件(Addition icons) : 选择是否创建桌面快捷方式. (2)桌面浏览(Win ...

  4. Flume-Taildir Source 监控目录下多个文件的追加

    Exec source 适用于监控一个实时追加的文件,但不能保证数据不丢失:Spooldir Source 能够保证数据不丢失,且能够实现断点续传,但延迟较高,不能实时监控:而 Taildir Sou ...

  5. 【Mybatis】向MySql数据库插入千万记录 单条插入方式，用时 1h16m30s

    本例代码下载:https://files.cnblogs.com/files/xiandedanteng/InsertMillionComparison20191012.rar 相对于批量插入,这种方 ...

  6. CollectionUtils

    public class CollectionUtils { /** * 数组是否包含元素 * @param arr * @param str * @return */ public static b ...

  7. oc 执行shell 脚本

    -(id) InvokingShellScriptAtPath :(NSString*) shellScriptPath { NSTask *shellTask = [[NSTask alloc]in ...

  8. 用Red5搭建支持WEB播放的实时监控视频

    用Red5搭建支持WEB播放的实时监控视频 1. 下载Red5:https://github.com/Red5/red5-server/releases 下载了Red5 1.0.6 release的Z ...

  9. Java内部类(5)：应用例

    例1-闭包(Closure) 闭包是一个可调用的对象(通过Callback),它记录了一些信息,这些信息来自于创建它的作用域 interface Incrementable { void increm ...

  10. 【AMAD】django-activity-stream

    动机 简介 个人评分 动机 为你的django站点生成活动流(类似facebook feed).用户可以在个人feed页面看到订阅的人的活动流. 简介 django-activity-stream1中 ...