<!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. 21-[jQuery]-介绍，引入方式，与js的区别

    1.jQuery介绍 jQury官网:https://jquery.com/ 2.jQuery文件的引入 <!DOCTYPE html> <html lang="en&qu ...

  2. Openstack入门篇（十七）之Cinder服务-->安装并配置一个本地存储节点

    怎样为块存储服务安装并配置存储节点.为简单起见,这里配置一个有一个空的本地块存储设备的存储节点.这个向导用的是 /dev/sdb,此处选用linux-node1节点作为存储节点,需要在vmware中添 ...

  3. Python_sklearn机器学习库学习笔记（七）the perceptron(感知器）

    一.感知器 感知器是Frank Rosenblatt在1957年就职于Cornell航空实验室时发明的,其灵感来自于对人脑的仿真,大脑是处理信息的神经元(neurons)细胞和链接神经元细胞进行信息传 ...

  4. BZOJ3601. 一个人的数论（狄利克雷卷积＋高斯消元）及关于「前 $n$ 个正整数的 $k$ 次幂之和是关于 $n$ 的 $k+1$ 次多项式」的证明

    题目链接 https://www.lydsy.com/JudgeOnline/problem.php?id=3601 题解 首先还是基本的推式子: \[\begin{aligned}f_d(n) &a ...

  5. 单元测试——隔离神器：mockito

    mockito,一个让人着迷的单元测试隔离框架.对比了easymock,jmock,jmockito,最终选择了它. 为什么用他 接口语法简洁.自然.写起来像在说话,很舒服. 文档更完整.让学习曲线更 ...

  6. React Native开启实时重载(Enable live Reload)

    传统的原生应用开发中,每一次修改都需要重新编译. 但在 RN 中你只需要刷新一下 JavaScript 代码,就能立刻看到变化. 操作 1.安卓模拟器 按下Ctrl + M,Enable live R ...

  7. 图片轮播，信手拈来（jquery）

    制作图片轮播,可以说是js或者jquery学习者应该掌握的技巧.但惭愧的是本菜之前一直一知半解,这回抽了半天多总结了下分享给大家.虽然标题比较吹牛,但目的是希望大家看了之后制作图片轮播会非常迅速. 首 ...

  8. Jmeter中正则表达式提取器

    在使用Jmeter过程中,会经常使用到正则表达式提取器提取器,虽然并不直接涉及到请求的测试,但是对于数据的传递起着很大的作用,本篇博文就是主要讲解关于正则表达式及其在Jmeter的Sampler中的调 ...

  9. Linux命令的那些事(一)

    回顾一下前文,三大主流操作系统 windows做的最好(更准确最早做图形化界面是windows)其实是图形化界面占有90%的市场份额(PC(个人电脑)机的市场)但是现在发展图形界面做的较好其实Unix ...

  10. 环境变量的配置-java-JMETER - 【Linux】

    rz上传 lz下载 步骤: . Linux下首先安装Jdk: . 下载apache-jmeter-4.0.tgz,复制到Linux系统中的/opt目录下: . 解压apache-jmeter-4.0. ...