sumbad

sumbad / Vuejs-WebComponents.html

Last active April 13, 2017 13:27

Использование Vue.js для создания пользовательских Web компонентов

sumbad / share-buttons.html

Created April 13, 2017 13:33

Использование Vue.js для создания пользовательских Web компонентов

sumbad / theHTMLway.html

Created April 14, 2017 17:15

Использование Vue.js для создания пользовательских Web компонентов

	<div id="my-app">
	<p>Introduction text</p>
	<share-buttons gplus="false"/>
	</div>

	<template id="share-buttons-template">
	<div id="share-buttons">
	<a href="#" @click.prevent="share" v-if="facebook">Facebook</a>
	<a href="#" @click.prevent="share" v-if="twitter">Twitter</a>
	<a href="#" @click.prevent="share" v-if="gplus">Google+</a>

sumbad / my-vue-componentHTML.html

Created April 15, 2017 04:35

Использование Vue.js для создания пользовательских Web компонентов

	<html>
	<body>

	...

	<my-vue-component/>

	<!-- allows multiples instances of the same component -->
	<my-vue-component my-prop="true"/>

sumbad / windowCustomElementsDefine.js

Last active April 15, 2017 07:16

	class MyElement extends HTMLElement {

	constructor() {
	super();
	this.msg = 'Hello, World!';
	}

	connectedCallback() {
	this.innerHTML = `<p>${this.msg}</p>`;
	}

sumbad / customElementMarkup.html

Created April 15, 2017 07:28

	<template id="share-buttons-template">
	<div id="share-buttons">
	<a href="#">Facebook</a>
	<a href="#">Twitter</a>
	</div>
	</template>

sumbad / DefinesHTMLmarkup.html

Created April 15, 2017 07:34

	<html>
	<head>
	<link rel="import" href="share-buttons.html">
	...
	</head>
	<body>
	...
	<share-buttons></share-buttons>
	...
	</body>

sumbad / share-buttons.html

Created April 15, 2017 07:35

sumbad / dispatchEvent.js

Created April 15, 2017 07:43

this.dispatchEvent(new Event('content-shared'));

sumbad / custom-elements.html

Created July 3, 2017 15:36

webcomponents-base__custom-elements_1

	<!DOCTYPE html>
	<html>
	<head>
	<title>Custom Elements</title>
	<script type="text/javascript">
	class FirstCustomElement extends HTMLElement {
	constructor() {
	super();
	console.log('constructor');
	}