Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
wiki2:vue:js [2018/10/14 10:22] alfred |
wiki2:vue:js [2020/05/09 09:25] (actual) |
||
|---|---|---|---|
| Línea 16: | Línea 16: | ||
| }); | }); | ||
| </code> | </code> | ||
| + | |||
| + | O con una inline template: | ||
| + | <code> | ||
| + | new Vue({ | ||
| + | el: 'vue-app', | ||
| + | data: { | ||
| + | message: "Hello Vue! caca de la vaca!" | ||
| + | }, | ||
| + | template: `<div>{{ message }}</div>` | ||
| + | }); | ||
| + | |||
| + | </code> | ||
| + | |||
| + | ==== Using require ==== | ||
| + | |||
| + | <code> | ||
| + | "use strict"; | ||
| + | |||
| + | require( | ||
| + | ['../static/js/test.js'], | ||
| + | function() { | ||
| + | new Vue({ | ||
| + | el: 'user-app', | ||
| + | template: ` | ||
| + | <div> | ||
| + | {{ message }} <button-counter></button-counter> | ||
| + | </div>`, | ||
| + | data: { | ||
| + | message: "Hello Vue! caca de la vaca!" | ||
| + | } | ||
| + | }); | ||
| + | }); | ||
| + | </code> | ||
| + | test.js: | ||
| + | <code> | ||
| + | "use strict"; | ||
| + | |||
| + | Vue.component('button-counter', { | ||
| + | data: function () { | ||
| + | return { | ||
| + | count: 0 | ||
| + | } | ||
| + | }, | ||
| + | template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' | ||
| + | }) | ||
| + | </code> | ||
| + | |||