Example
Demo
HTML
<script type="x-template" id="form-template">
<label>{{inputLabel}} :</label>
<input type="text" v-model="name" />
</script>
<div id="app">
<h2>{{appName}}</h2>
<form-component title="This is a form" v-bind:name="userName"></form-component>
</div>
JS
// Describe the form component
// Note: props is an array of attribute your component can take in entry.
// Note: With props you can pass static data('title') or dynamic data('userName').
// Note: When modifying 'name' property, you won't modify the parent variable, it is only descendent.
// Note: On a component, 'data' has to be a function that returns the data.
var formComponent = {
template: '#form-template',
props: ['title', 'name'],
data: function() {
return {
inputLabel: 'Name'
}
}
};
// This vue has a private component, it is only available on its scope.
// Note: It would work the same if the vue was a component.
// Note: You can build a tree of components, but you have to start the root with a 'new Vue()'.
var vue = new Vue({
el: '#app',
data: {
appName: 'Component Demo',
userName: 'John Doe'
},
components: {
'form-component': formComponent
}
});
