<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of page</title>
</head>
<body>
<div id="example">
<my-component></my-component>
</div>
<div id="example-2">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>

</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
<script >
var Child = {
template: '<div>A custom component!</div>'
}
// 注册
// Vue.component('my-component', {
// template: Child
// })

// 创建根实例
new Vue({
el: '#example',
components: {
// <my-component> 将只在父组件模板中可用
'my-component': Child
}
})
var data = { counter: 0 }

Vue.component('simple-counter', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
// 技术上 data 的确是一个函数了，因此 Vue 不会警告，
// 但是我们却给每个组件实例返回了同一个对象的引用
data: function () {
return {
counter: 0
}
}
})

new Vue({
el: '#example-2'
})
</script>
</html>

vue 组件 组件2的更多相关文章

  1. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  2. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  3. Vue 子组件向父组件传参

    直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...

  4. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  5. vue.js 组件之间传递数据

    前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...

  6. Vue动态组件

    前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...

  7. vue中组件的四种方法总结

    希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...

  8. 如何抽象一个 Vue 公共组件

    之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...

  9. vue的组件和生命周期

    Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...

  10. 为什么VUE注册组件命名时不能用大写的？

    这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...

随机推荐

  1. 菜鸟vimer成长记——第2.4章、cmd-line模式

    cmd-line模式又有3个类型:Ex 命令(ex commands).查找模式(Search patterns).Filter 命令(Filter commands).本文主要重点的是Ex 命令和S ...

  2. VBA_话费明细单_格式调整

    VBA-联通话费明细单-格式调整 Sub ChangeColumn() Rows(1).RowHeight = 24 '设置第1行的行高 Rows(1).WrapText = True '设置第1行的 ...

  3. WPF中的颜色转换

    HEX16色转Bursh: Brush brush = new SolidColorBrush((Color)ColorConverter.ConvertFromString("#FFFFF ...

  4. JUC——线程同步锁（ReentrantReadWriteLock读写锁）

    读写锁简介 所谓的读写锁值得是两把锁,在进行数据写入的时候有一个把“写锁”,而在进行数据读取的时候有一把“读锁”. 写锁会实现线程安全同步处理操作,而读锁可以被多个对象读取获取. 读写锁:ReadWr ...

  5. 2.3 Oracle之DDL 语句（约束、伪列、视图、序列、同义词） 精简版

    DDL Data Definition(重点) (n. 定义:[物] 清晰度:解说)用于定义数据的结构,创建,修改,删除数据库对象 一.表的增删改查 1.创建表:CREATE TABLE temp A ...

  6. XSS-DVWA

    1.反射型 LOW: 没有过滤,直接键入PAYLOAD 查看源码 这里没有任何过滤,使用htmlspecialchars()过滤 结果不弹窗 MEDIUM: LOW等级的方法不奏效了 观察输出可能是过 ...

  7. final文案+美工展示

    作业要求:https://edu.cnblogs.com/campus/nenu/SWE2017FALL/homework/1438 团队介绍:thunder 组成员及各位博客地址: 1.王航:htt ...

  8. js弹出框 -搜索

    警告框alert() alert是警告框,只有一个按钮“确定”无返回值,警告框经常用于确保用户可以得到某些信息.当警告框出现后,用户需要点击确定按钮才能继续进行操作.语法:alert("文本 ...

  9. Task 7 买书最低价格问题

    任务: 书店针对<哈利波特>系列书籍进行促销活动,一共5卷,用编号0.1.2.3.4表示,单独一卷售价8元, 具体折扣如下所示: 本数    折扣 2         5% 3       ...

  10. PHPCMS之 列表和内容页

    上一篇随笔中降到了一些相似的语法可以来后台管理网页的内容,下面就是关于列表的管理 加入一级栏目中有几个有二级菜单的,那么就可以把相应的界面建立一个副本,然后修改里面栏目的一些属性 {pc:conten ...