91
edits
Mod Creation/Reusable Components with PetiteVue: Difference between revisions
From Melvor Idle
Mod Creation/Reusable Components with PetiteVue (view source)
Revision as of 04:43, 17 October 2022
, 17 October 2022→PetiteVue Quick Reference
Buttchouda (talk | contribs) No edit summary |
Buttchouda (talk | contribs) |
||
| Line 267: | Line 267: | ||
This is not an exhaustive rundown of PetiteVue features, but these are likely the most common to be used and examples of each. | This is not an exhaustive rundown of PetiteVue features, but these are likely the most common to be used and examples of each. | ||
=== Text Bindings | === Text Bindings === | ||
Render text within | Render text within HTML using the double-curly braces notation <code>{{ }}</code>. | ||
'''Example''' | '''Example''' | ||
<nowiki><template id="binding-example">{{ text }}</template></nowiki> | <nowiki><template id="binding-example"><h1>{{ text }}</h1></template></nowiki> | ||
<nowiki>function BindingExample(props) { | <nowiki>function BindingExample(props) { | ||
$template: '#binding-example', | return { | ||
$template: '#binding-example', | |||
text: props.text | |||
}; | |||
}</nowiki> | }</nowiki> | ||
<nowiki>ui.create(BindingExample({ text: 'Hello, Melvor!' }), host); | |||
// -> <h1>Hello, Melvor!</h1></nowiki> | |||
=== Attribute Binding === | |||
Bind an attribute to props using <code>v-bind</code> directive, or <code>:</code> for short. | |||
'''Example''' | |||
<nowiki><template id="attr-binding-example"> | |||
<span v-bind:class="`text-${(warning ? 'warning' : 'info')}`"> | |||
This message could be a warning or informational. | |||
</span> | |||
</template></nowiki> | |||
This notation accomplishes the same: | |||
<nowiki><template id="attr-binding-example"> | |||
<span :class="`text-${(warning ? 'warning' : 'info')}`"> | |||
This message could be a warning or informational. | |||
</span> | |||
</template></nowiki> | |||
=== Event Binding/Handling === | |||
Bind event handlers using the <code>v-on</code> directive, or <code>@</code> for short. | |||
'''Example''' | |||
<nowiki><template id="event-binding-example"> | |||
<button v-on:click="onClick">Click Me!</button> | |||
</template></nowiki> | |||
This notation accomplishes the same: | |||
<nowiki><template id="event-binding-example"> | |||
<button @click="onClick">Click Me!</button> | |||
</template></nowiki> | |||
And would be used in the component like: | |||
<nowiki>function EventBindingExample() { | |||
return { | |||
$template: '#event-binding-template', | |||
onClick() { | |||
alert('You clicked me!'); | |||
} | |||
}; | |||
}</nowiki> | |||
=== Input Value Binding === | |||
Input values can be bound using the <code>v-model</code> directive. | |||
'''Example''' | |||
<nowiki><template id="input-binding-example"> | |||
<input v-model="value" /> | |||
</template></nowiki> | |||
<nowiki>function InputBindingExample(props) { | |||
return { | |||
value: props.initialValue, | |||
setValue(val) { | |||
this.input = val; | |||
} | |||
}; | |||
} | |||
const input = InputBindingExample({ initialValue: 'this is the initial value' }); | |||
ui.create(input, host); | |||
// -> <input value="this is the initial value" /> | |||
input.setValue('now this value'); | |||
// -> <input value="now this value" /> | |||
// Assume the player changes the input in the UI to "new value" | |||
console.log(input.value); // -> new value</nowiki> | |||
