组件化开发 需要使用到组件, 围绕组件, 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. Vue之混入(mixin)与全局混入

    Vue之混入(mixin)与全局混入 接下来通过一个简单的例子看看混入的基础用法: 首先新建一个mixin.js文件,添加以下代码. let mixin = { data() { return { m ...

  2. Java获取当前时间及String、datetime、date相互转化

    一.获取当前系统时间和日期并格式化输出: import java.util.Date; import java.text.SimpleDateFormat; public class NowStrin ...

  3. spring boot 全局异常处理及自定义异常类

    全局异常处理: 在处理controller层抛出的自定义异常时,可以实现@ControllerAdvice注解捕获,配合@ExceptionHandler来增强所有的@requestMapping方法 ...

  4. redis多实例与主从同步及高级特性(数据过期机制,持久化存储)

    redis多实例 创建redis的存储目录 vim /usr/local/redis/conf/redis.conf #修改redis的配置文件 dir /data/redis/ #将存储路径配置修改 ...

  5. linux服务之memcached

    http://www.runoob.com/memcached/memcached-cas.html https://github.com/memcached/memcached/blob/maste ...

  6. Android之外部存储(SD卡)

    *手机的外部存储空间,这个我们可以理解成电脑的外接移动硬盘,U盘也行.所有的Android设备都有两个文件存储区域:“内部”和“外部”存储器.这两个名称来自早期的Android,当时大多数设备都提供内 ...

  7. linux文件结构---转发

    linux各文件夹的作用---转载   linux下的文件结构,看看每个文件夹都是干吗用的/bin 二进制可执行命令 /dev 设备特殊文件 /etc 系统管理和配置文件 /etc/rc.d 启动的配 ...

  8. coreDNS域名无法解析问题

    问题: 在pod内无法解析域名 解决: busybox的镜像有bug,导致ping可以解析,但是nslookup无法解析 kubectl run -it --rm --image=infoblox/d ...

  9. Git(1)：思想及概念

    Git与其他版本控制软件的差异及思想 直接记录快照,而非差异比较 Git不保存这些前后变化的差异数据.实际上,Git 更像是把变化的文件作快照后,记录在一个微型的文件系统中.每次提交更新时,它会纵览一 ...

  10. What's binary search?

    Binary Search: Search a sorted array by repeatedly  dividing the search interval in half. Begin with ...