组件化开发 需要使用到组件, 围绕组件, 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环境中关闭tomcat，通过shutdown.sh无法彻底关闭--线程池

    最近测试环境上测试的项目通过shutdown.sh始终无法彻底关闭. 之前临时解决方法两种: 第一:通过ps -ef|grep tomcat查看到tomcat的进程直接使用kill来杀死进程. 第二: ...

  2. SPOJ AMR12B 720

    这个题应该是个优先队列的模版题 当时比赛的时候没时间做先贴一下大神的代码好好学习学习 B - Gandalf vs the Balrog Time Limit:2000MS     Memory Li ...

  3. legend3---10、vue与lavarel的blade模板加jquery页面开发方式比较

    legend3---10.vue与lavarel的blade模板加jquery页面开发方式比较 一.总结 一句话总结: lavarel的blade模板加jquery:速度快一点:速度快一点,页面加载数 ...

  4. qt QTableView中嵌入复选框CheckBox 的四种方法总结

    第一种不能之前显示,必须双击/选中后才能显示,不适用. 第二种比较简单,通常用这种方法. 第三种只适合静态显示静态数据用 第四种比较适合扩展,它除了可以嵌入复选框,还可以通过paint()绘制其它控件 ...

  5. [Tex学习笔记]章节用罗马字母编号

    微信扫描如上二维码关注跟锦数学微信公众账号. 详情请见那里.

  6. springboot 整合logback(有全套的日志配置文件)

    logback介绍:基于Log4j基础上大量改良,不能单独使用,推荐配合日志框架SLF4J来使用,可以和springboot很好的整合,也是springboot默认推荐的. 1.在resources ...

  7. 使用LuceneUtil工具类，完成CURD操作

    package loaderman.curd; import java.util.ArrayList; import java.util.List; import loaderman.entity.A ...

  8. HDFS的基础与操作

    一 HDFS概念 1.1 概念 HDFS,它是一个文件系统,全称:Hadoop Distributed File System,用于存储文件通过目录树来定位文件:其次,它是分布式的,由很多服务器联合起 ...

  9. 2018.05.17 nace关于采购订单的配置笔记

    由于公司的打印都是使用nast作为记录表,在给日企中国客户做扩展时单独配置了一下nace的设置 ZM01作为采购订单批量打印的输出类型,ZM02作为采购订单创建变更时输出的pdf打印输出类型 1.TC ...

  10. Neither BindingResult nor plain target object for bean name 'command' available as request attribute

    最近用JSR303在表单提交时使用Java Bean Validation验证数据.报错堆栈如下: java.lang.IllegalStateException: Neither BindingRe ...