组件化开发 需要使用到组件, 围绕组件, 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. linux 部署jar

    Linux 运行jar包命令如下: 方式一: java -jar xxx.jar 这种方式特点是ssh窗口关闭时,程序中止运行.或者是运行时没法切出去执行其他任务,有没有办法让Jar在后台运行呢: 方 ...

  2. java实现自定义同步组件的过程

    实现同步组件twinsLock:可以允许两个线程同时获取到锁,多出的其它线程将被阻塞. 以下是自定义的同步组件类,一般我们将自定义同步器Sync定义为同步组件TwinsLock的静态内部类. 实现同步 ...

  3. Java web 实验三部分资料上传

    花好月圆系列 貂蝉 黄月英 孙尚香 甄姬 标准包 魏 曹操 司马懿 郭嘉 甄姬 张辽 许褚 夏侯惇 蜀 刘备 关羽 张飞 诸葛亮 黄月英 赵云 马超 吴 孙权 孙尚香 周瑜 大乔 甘宁 吕蒙 群 吕布 ...

  4. 文本处理工具sed

    处理文本的工具sed  行编辑器 ,默认自带循环. sed是一种流编辑器,它一次处理一行内容. 功能:主要用来自动编辑一个或多个文件,简化对文件的反复操作,编写转换程序等 sed工具 用法: sed ...

  5. PHPStorm2017去掉函数参数提示

    今天升级到 PHPStorm 2017.1 发现增加了好些新功能, 有个默认开启的参数名和类型提示功能, 虽然功能挺强大的, 不过我用不着, 还是关掉的好, 有同样需求的同学可以看看 例子比较特殊这么 ...

  6. sql_monitor实时监控

    1 检查数据库是否启用了监控功能 1)检查参数:CONTROL_MANAGEMENT_PACK_ACCES SQL> show parameter CONTROL_MANAGEMENT_PACK ...

  7. LC 900. RLE Iterator

    Write an iterator that iterates through a run-length encoded sequence. The iterator is initialized b ...

  8. 使用Visual Studio Code Coverage和nunit上传单元测试覆盖率和单元测试结果到SonarQube上

    SonarQube.Scanner.MSBuild.exe begin /k:"OMDCCQuotes" /d:sonar.host.url="http://myip:9 ...

  9. 前端学习(一) html介绍和head标签

    HTML 一. HTML 介绍 1. HTML概述:html全称Hyper Text Mackeup Language, 翻译为超文本标记语言, 它不是一种编程语言, 是一种描述性的标记语言, 用于描 ...

  10. 5种Redis数据结构详解

    本文主要和大家分享 5种Redis数据结构详解,希望文中的案例和代码,能帮助到大家. 转载链接:https://www.php.cn/php-weizijiaocheng-388126.html 2. ...