Merge branch 'master' into fix-create-app

Author: ntepluhina

src/.vuepress/components/events-1.vue

@@ -0,0 +1,16 @@
+<template>
+  <div id="example-1" class="demo">
+    <button v-on:click="counter += 1">Add 1</button>
+    <p>The button above has been clicked {{ counter }} times.</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      counter: 1
+    }
+  }
+}
+</script>

src/.vuepress/components/events-2.vue

@@ -0,0 +1,23 @@
+<template>
+  <div id="example-2" class="demo">
+    <button v-on:click="greet">Greet</button>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      name: 'Vue.js'
+    }
+  },
+  methods: {
+    greet(event) {
+      alert('Hello ' + this.name + '!')
+      if (event) {
+        alert(event.target.tagName)
+      }
+    }
+  }
+}
+</script>

src/.vuepress/components/events-3.vue

@@ -0,0 +1,16 @@
+<template>
+  <div id="example-3" class="demo">
+    <button v-on:click="say('hi')">Say hi</button>
+    <button v-on:click="say('what')">Say what</button>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {
+    say(message) {
+      alert(message)
+    }
+  }
+}
+</script>

src/.vuepress/components/forms-1.vue

@@ -0,0 +1,16 @@
+<template>
+  <div id="example-1" class="demo">
+    <input v-model="message" placeholder="edit me" />
+    <p>Message is: {{ message }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      message: ''
+    }
+  }
+}
+</script>

src/.vuepress/components/forms-2.vue

@@ -0,0 +1,18 @@
+<template>
+  <div id="example-textarea" class="demo">
+    <span>Multiline message is:</span>
+    <p style="white-space: pre-line;">{{ message }}</p>
+    <br />
+    <textarea v-model="message" placeholder="add multiple lines"></textarea>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      message: ''
+    }
+  }
+}
+</script>

src/.vuepress/components/forms-3.vue

@@ -0,0 +1,16 @@
+<template>
+  <div id="example-2" class="demo">
+    <input type="checkbox" id="checkbox" v-model="checked" />
+    <label for="checkbox">{{ checked }}</label>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checked: false
+    }
+  }
+}
+</script>

src/.vuepress/components/forms-4.vue

@@ -0,0 +1,22 @@
+<template>
+  <div id="example-3" class="demo">
+    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
+    <label for="jack">Jack</label>
+    <input type="checkbox" id="john" value="John" v-model="checkedNames" />
+    <label for="john">John</label>
+    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
+    <label for="mike">Mike</label>
+    <br />
+    <span>Checked names: {{ checkedNames }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      checkedNames: []
+    }
+  }
+}
+</script>

src/.vuepress/components/forms-5.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="example-4" class="demo">
+    <input type="radio" id="one" value="One" v-model="picked" />
+    <label for="one">One</label>
+    <br />
+    <input type="radio" id="two" value="Two" v-model="picked" />
+    <label for="two">Two</label>
+    <br />
+    <span>Picked: {{ picked }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      picked: ''
+    }
+  }
+}
+</script>

src/.vuepress/components/forms-6.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="example-5" class="demo">
+    <select v-model="selected">
+      <option disabled value="">Please select one</option>
+      <option>A</option>
+      <option>B</option>
+      <option>C</option>
+    </select>
+    <span>Selected: {{ selected }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selected: ''
+    }
+  }
+}
+</script>

src/.vuepress/components/forms-7.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="example-6" class="demo">
+    <select v-model="selected" multiple style="width: 50px;">
+      <option>A</option>
+      <option>B</option>
+      <option>C</option>
+    </select>
+    <br />
+    <span>Selected: {{ selected }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selected: []
+    }
+  }
+}
+</script>

src/.vuepress/components/forms-8.vue

@@ -0,0 +1,25 @@
+<template>
+  <div id="example-7" class="demo">
+    <select v-model="selected">
+      <option v-for="option in options" v-bind:value="option.value">
+        {{ option.text }}
+      </option>
+    </select>
+    <span>Selected: {{ selected }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selected: 'A',
+      options: [
+        { text: 'One', value: 'A' },
+        { text: 'Two', value: 'B' },
+        { text: 'Three', value: 'C' }
+      ]
+    }
+  }
+}
+</script>

src/.vuepress/config.js

@@ -37,8 +37,9 @@ module.exports = {
             'computed',
             'class-and-style',
             'conditional',
-            'list'
-            // 'events'
+            'list',
+            'events',
+            'forms'
           ]
         }
       ]