vue 组件 组件2
<!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的更多相关文章
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- 如何理解vue.js组件的作用域是独立的
vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...
- Vue 子组件向父组件传参
直接上代码 <body> <div id="counter-event-example"> <p>{{ total }}</p> & ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- vue.js 组件之间传递数据
前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关 ...
- Vue动态组件
前面的话 让多个组件使用同一个挂载点,并动态切换,这就是动态组件.本文将详细介绍Vue动态组件 概述 通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,可以实现动 ...
- vue中组件的四种方法总结
希望对大家有用 全局组件的第一种写法 html: <div id = "app"> <show></show></div> js: ...
- 如何抽象一个 Vue 公共组件
之前一直想写一篇关于抽象 Vue 组件的随笔,无奈一直没想到好的例子.恰巧最近为公司项目做了一个数字键盘的组件,于是就以这个为例聊聊如何抽象 Vue 的组件. 先上 Demo 与 源码.(demo最好 ...
- vue的组件和生命周期
Vue里组件的通信 通信:传参.控制.数据共享(A操控B做一个事件) 模式:父子组件间.非父子组件 父组件可以将一条数据传递给子组件,这条数据可以是动态的,父组件的数据更改的时候,子组件接收的也会变化 ...
- 为什么VUE注册组件命名时不能用大写的？
这段时间一直在弄vue,当然也遇到很多问题,这里就来跟大家分享一些注册自定义模板组件的心得 首先"VUE注册组件命名时不能用大写"其实这句话是不对的,但我们很多人开始都觉得是对的, ...
随机推荐
- Oracle保存带&的数据
在SQL*Plus中默认的"&"表示替代变量,也就是说,只要在命令中出现该符号,SQL*Plus就会要你输入替代值.这就意味着你无法将一个含有该符号的字符串输入数据库或赋给 ...
- Java Swing：JPanel添加边框
一.JPanel添加不同边框的效果图如下所示 二. 不同边框样式的代码实现 JPanel jpanel = new JPanel(); jpanel.setBorder(BorderFactory.你 ...
- 分布式服务框架 Zookeeper — 管理分布式环境中的数据
本节本来是要介绍ZooKeeper的实现原理,但是ZooKeeper的原理比较复杂,它涉及到了paxos算法.Zab协议.通信协议等相关知识,理解起来比较抽象所以还需要借助一些应用场景,来帮我们理解. ...
- iframe的简单使用方法
1.父页面调用子页面的元素(a代表iframe的id或者class,b代表子页面) $('a').contents().find("b") 2.子页面调用父页面的元素(c代表父页面 ...
- jmeter☞工作区介绍（三）
基于jmeter4.0,jdk1.8 目录树:存放设计过程中使用的元件.执行过程中默认是从根节点开始顺序遍历元件.比如说HTTP请求的取样器就是元件,组件就是一个或多个元件的集合. 测试计划编辑区域: ...
- myeclipse激活后server不能用问题
一般是由于激活失败造成的,这种问题就卸了重新安装吧,目前还没有找到合理的方法解决,这个还真的看哥们的运气了,我是装了不下5遍才激活成功的,一般情况下,在激活的时候 出现下图的情况,Usercode写好 ...
- Python3的深拷贝和浅拷贝
a = 1 b = a a = 2 print(a, b) print(id(a), id(b)) """ 运行结果 2 1 1445293568 1445293536 ...
- 关于jsp中引用css外部样式无效时的处理方法
今天做项目遇到的一个小问题,如下所示: <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet ...
- 32bit 天堂服务端假设教程
本文作者:smeli(俄罗斯人,于2009年完成该教程) PS:要比国内写的那些教程完整,详细,希望大家喜欢 VS运行库安装………………………………………..2 SQL数据库安装…………………………… ...
- FirstWebApp
servlet规范中定义了web应用程序的目录层次:http://localhost:8080/docs/appdev/deployment.html 第一个web应用程序 开发,并部署到tomcat ...