Added handling user input

Author: ntepluhina

docs/.vuepress/components/intro-5.vue

@@ -0,0 +1,21 @@
+<template>
+  <div id="app-5" class="demo">
+    <p>{{ message }}</p>
+    <button v-on:click="reverseMessage">Reverse Message</button>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        message: 'Hello Vue.js!'
+      }
+    },
+    methods: {
+      reverseMessage: function () {
+        this.message = this.message.split('').reverse().join('')
+      }
+    }
+  }
+</script>

docs/.vuepress/components/intro-6.vue

@@ -0,0 +1,16 @@
+<template>
+  <div id="app-6" class="demo">
+    <p>{{ message }}</p>
+    <input v-model="message">
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        message: 'Hello Vue!'
+      }
+    },
+  }
+</script>

docs/.vuepress/styles/index.styl

@@ -1,3 +1,14 @@
 .theme-default-content:not(.custom) {
   max-width 960px
+}
+
+.demo {
+  font-family: sans-serif;
+  border: 1px solid #eee;
+  border-radius: 2px;
+  padding: 20px 30px;
+  margin-top: 1em;
+  margin-bottom: 40px;
+  user-select: none;
+  overflow-x: auto;
 }

docs/guide/introduction.md

@@ -109,15 +109,66 @@ There are quite a few other directives, each with its own special functionality.
 </div>
 ```
 ``` js
-var app4 = new Vue({
+const app4 = new Vue({
   el: '#app-4',
-  data: {
-    todos: [
-      { text: 'Learn JavaScript' },
-      { text: 'Learn Vue' },
-      { text: 'Build something awesome' }
-    ]
+  data() {
+    return {
+      todos: [
+        { text: 'Learn JavaScript' },
+        { text: 'Learn Vue' },
+        { text: 'Build something awesome' }
+      ]
+    }
+  }
+})
+```
+<intro-4/>
+
+## Handling User Input
+
+To let users interact with your app, we can use the `v-on` directive to attach event listeners that invoke methods on our Vue instances:
+
+``` html
+<div id="app-5">
+  <p>{{ message }}</p>
+  <button v-on:click="reverseMessage">Reverse Message</button>
+</div>
+```
+``` js
+constapp5 = new Vue({
+  el: '#app-5',
+  data() {
+    return {
+      message: 'Hello Vue.js!'
+    }
+  },
+  methods: {
+    reverseMessage() {
+      this.message = this.message.split('').reverse().join('')
+    }
+  }
+})
+```
+<intro-5/>
+
+Note that in this method we update the state of our app without touching the DOM - all DOM manipulations are handled by Vue, and the code you write is focused on the underlying logic.
+
+Vue also provides the `v-model` directive that makes two-way binding between form input and app state a breeze:
+
+``` html
+<div id="app-6">
+  <p>{{ message }}</p>
+  <input v-model="message">
+</div>
+```
+``` js
+var app6 = new Vue({
+  el: '#app-6',
+  data() {
+    return {
+      message: 'Hello Vue!'
+    }
   }
 })
 ```
-<intro-4/>
+<intro-6/>