{{ message }}, {{ prop1 }}, {{prop2}}, {{prop3}}
' +}); +``` + +###### JavaScript - element API usage ``` js -Vue.use(require('vue-element')) // installed -Vue.element('my-element', { /* ... */ }) +document.querySelector('widget-vue')[0].prop2 // get prop value +document.querySelector('widget-vue')[0].prop2 = 'another string' // set prop value ``` -## Usage +You can also change `\n Lazy loaded component.\n
\n\nCompatible with latest specification. Vue-element will use native implementation if supported.
\nVue 0.12+. Using polyfill we can support wide range of browsers, including IE9+, Android and IOS.
\n\n You can use nesting, HMR, slots, lazy loading, native Custom Elements callbacks.\n
\nLet's add basic component to see if values from HTML attributes are visible inside Vue component. We will also check if numbers and booleans are properly detected.
\n\nAfter registering \"demo-basic\" tag, you can insert that tag into standard HTML, SPA's, React, Angulat or Vue projects without the hassle and further initialization.
\n\nCode examples below are written in ES2015 version of JavaScript, but feel free to use ES5.
\n\n\n{{HTML}}\n
\n \n<template>\n {{vueTemplate}}\n</template>\n\n<script>\n {{vueScript}}\n</script>\n
\n \nimport DemoElement from 'DemoElement.vue';\n\nVue.element('demo-basic', DemoElement);\n
\n We can access underlying Vue component using it's props by using custom element's HTML attributes (e.g. just by changing it using browser's console) or in JavaScript (example below).
\n\n As our custom element is just HTML tag with API exposed via HTML and JavaScript, we can easily use it in Vue, React, Angular or plain JavaScript projects.\n
\n\n It's easy to nest elements. In this example we've used <demo-basic>
component created in previous example, inside a newly created <demo-binding>
one.\n
\n<template>\n {{vueTemplate}}\n</template>\n
\n \n{{plainJavaScript}}\n
\n \n
Current rating: {{rating}}
\nPassing strings, numbers and booleans is useful, but component's possibility to trigger passed functions allows for a whole lot new possibilities.
\n\n In above demo, after changing rating, the current value will be displayed. This value is passed to callback function from Custom Element <demo-callback></demo-callback>
created by Vue-element
.\n
\n {{HTML}}\n
\n \n<template>\n {{vueTemplate}}\n</template>\n\n<script>\n {{vueScript}}\n</script>\n
\n \nconst demoCallbackElement = document.getElementsByTagName('demo-callback')[0];\ndemoCallbackElement.changeCallback = function(value) {\n console.info('changeCallback callback with value:', value);\n}\n
\n \n<template>\n {{vueTemplateUsage}}\n</template>\n<script>\n {{vueScriptUsage}}\n</script>\n
\n \n
Imagine preparing a bunch of Vue components that are heavy in size and you don't want to force users to download them all at once - e.g. when creating ui libraries like \"Element UI\" (that is used across our demos).
\nYou can load individual components only when you need them - when user attach it to the document.
\n\nInstead of component object we will use function with returned Promise. You can use Webpack's require.ensure()
or any other async method to load component.
One note - Custom Elements v1 spec require defining observed props during registration. That's why if you omit them, attributes won't be reactive, and changing them from outside (HTML attributes or JavaScript) won't work.
\n\n{{HTML}}\n
\n \n<template>\n {{vueTemplate}}\n</template>\n\n<script>\n {{vueScript}}\n</script>\n
\n \nVue.element('demo-lazy-loading', () => new Promise((resolve) => {\n require(['path/to/lazy-loaded-component'], resolve);\n}), { props: ['prop'] });\n
\n You can use default and named slots to pass content to Vue component.
\nThe only thing you have to know is, using named slots, instead of slot=\"slotName\"
you have to use vue-slot=\"slotName\"
.
\n{{HTML}}\n
\n \n<template>\n {{vueTemplate}}\n</template>\n\n<script>\n {{vueScript}}\n</script>\n
\n \nimport DemoElement from 'DemoElement.vue';\n\nVue.element('demo-slots', DemoElement);\n
\n Compatible with latest specification. Vue-element will use native implementation if supported.
+Vue 0.12+. Using polyfill we can support wide range of browsers, including IE9+, Android and IOS.
++ You can use nesting, HMR, slots, lazy loading, native Custom Elements callbacks. +
+Let's add basic component to see if values from HTML attributes are visible inside Vue component. We will also check if numbers and booleans are properly detected.
+ +After registering "demo-basic" tag, you can insert that tag into standard HTML, SPA's, React, Angulat or Vue projects without the hassle and further initialization.
+ +Code examples below are written in ES2015 version of JavaScript, but feel free to use ES5.
+ +
+{{HTML}}
+
+
+<template>
+ {{vueTemplate}}
+</template>
+
+<script>
+ {{vueScript}}
+</script>
+
+
+import DemoElement from 'DemoElement.vue';
+
+Vue.element('demo-basic', DemoElement);
+
+ We can access underlying Vue component using it's props by using custom element's HTML attributes (e.g. just by changing it using browser's console) or in JavaScript (example below).
++ As our custom element is just HTML tag with API exposed via HTML and JavaScript, we can easily use it in Vue, React, Angular or plain JavaScript projects. +
+
+ It's easy to nest elements. In this example we've used <demo-basic>
component created in previous example, inside a newly created <demo-binding>
one.
+
+<template>
+ {{vueTemplate}}
+</template>
+
+
+{{plainJavaScript}}
+
+
+
Current rating: {{rating}}
+Passing strings, numbers and booleans is useful, but component's possibility to trigger passed functions allows for a whole lot new possibilities.
+
+ In above demo, after changing rating, the current value will be displayed. This value is passed to callback function from Custom Element <demo-callback></demo-callback>
created by Vue-element
.
+
+ {{HTML}}
+
+
+<template>
+ {{vueTemplate}}
+</template>
+
+<script>
+ {{vueScript}}
+</script>
+
+
+const demoCallbackElement = document.getElementsByTagName('demo-callback')[0];
+demoCallbackElement.changeCallback = function(value) {
+ console.info('changeCallback callback with value:', value);
+}
+
+
+<template>
+ {{vueTemplateUsage}}
+</template>
+<script>
+ {{vueScriptUsage}}
+</script>
+
+ + Lazy loaded component. +
+ +
+
Imagine preparing a bunch of Vue components that are heavy in size and you don't want to force users to download them all at once - e.g. when creating ui libraries like "Element UI" (that is used across our demos).
+You can load individual components only when you need them - when user attach it to the document.
+ +Instead of component object we will use function with returned Promise. You can use Webpack's require.ensure()
or any other async method to load component.
One note - Custom Elements v1 spec require defining observed props during registration. That's why if you omit them, attributes won't be reactive, and changing them from outside (HTML attributes or JavaScript) won't work.
+
+{{HTML}}
+
+
+<template>
+ {{vueTemplate}}
+</template>
+
+<script>
+ {{vueScript}}
+</script>
+
+
+Vue.element('demo-lazy-loading', () => new Promise((resolve) => {
+ require(['path/to/lazy-loaded-component'], resolve);
+}), { props: ['prop'] });
+
+ + This is text from inside of the element +
+ +
+
You can use default and named slots to pass content to Vue component.
+The only thing you have to know is, using named slots, instead of slot="slotName"
you have to use vue-slot="slotName"
.
+{{HTML}}
+
+
+<template>
+ {{vueTemplate}}
+</template>
+
+<script>
+ {{vueScript}}
+</script>
+
+
+import DemoElement from 'DemoElement.vue';
+
+Vue.element('demo-slots', DemoElement);
+
+