Diferencias

Muestra las diferencias entre dos versiones de la página.

--- wiki2:vue:js [2018/10/14 10:21]
alfred creado
+++ wiki2:vue:js [2020/05/09 09:25] (actual)
@@ Línea 1: / Línea 1: @@
 ====== Vue and JS ======
+===== Basic =====
+We can do this in html file (after this we should include our script):
+<code>
+<vue-app>[[ message ]]</vue-app>
+</code>
+<code>
+new Vue({
+  el: 'vue-app',
+  delimiters: ['[[', ']]'],
+  data: {
+    message: "Hello Vue! caca de la vaca!"
+  }
+});
+</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>

Programming