feat: finished declarative rendering

Author: ntepluhina

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

@@ -0,0 +1,27 @@
+<template>
+  <div id="app" class="demo">
+    {{ message }}
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        message: 'Hello Vue!'
+      }
+    },
+  }
+</script>
+
+<style scoped>
+  .demo {
+    border: 1px solid #eee;
+    border-radius: 2px;
+    padding: 25px 35px;
+    margin-top: 1em;
+    margin-bottom: 40px;
+    user-select: none;
+    overflow-x: auto;
+  }
+</style>

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

@@ -0,0 +1,34 @@
+<template>
+  <div id="app-2" class="demo">
+    <span v-bind:title="message">
+      Hover your mouse over me for a few seconds to see my dynamically bound title!
+    </span>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        message: 'You loaded this page on ' + new Date().toLocaleString()
+      }
+    },
+  }
+</script>
+
+<style scoped>
+  .demo {
+    border: 1px solid #eee;
+    border-radius: 2px;
+    padding: 25px 35px;
+    margin-top: 1em;
+    margin-bottom: 40px;
+    user-select: none;
+    overflow-x: auto;
+  }
+
+  span {
+    margin-bottom: 0;
+    margin-top: 0;
+  }
+</style>

docs/guide/introduction.md

@@ -34,4 +34,61 @@ or:
 
 The [Installation](installation.md) page provides more options of installing Vue. Note: We **do not** recommend that beginners start with `vue-cli`, especially if you are not yet familiar with Node.js-based build tools.
 
-If you prefer something more interactive, you can also check out [this tutorial series on Scrimba](https://scrimba.com/g/gvuedocs), which gives you a mix of screencast and code playground that you can pause and play around with anytime.
+If you prefer something more interactive, you can also check out [this tutorial series on Scrimba](https://scrimba.com/g/gvuedocs), which gives you a mix of screencast and code playground that you can pause and play around with anytime.
+
+## Declarative Rendering
+
+At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:
+
+``` html
+<div id="app">
+  {{ message }}
+</div>
+```
+``` js
+const app = new Vue({
+  el: '#app',
+  data() {
+    return {
+      message: 'Hello Vue!'
+    }
+  }
+})
+```
+<intro-1 />
+
+We have already created our very first Vue app! This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood. The data and the DOM are now linked, and everything is now **reactive**. How do we know? Change the `message` property in the code snippet below to a different value. You the rendered example update accordingly:
+
+<iframe
+     src="https://codesandbox.io/embed/vue-basic-example-buthm?autoresize=1&fontsize=14&hidenavigation=1&moduleview=1&theme=dark"
+     style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="Vue basic example"
+     allow="geolocation; microphone; camera; midi; vr; accelerometer; gyroscope; payment; ambient-light-sensor; encrypted-media; usb"
+     sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
+   ></iframe>
+
+In addition to text interpolation, we can also bind element attributes like this:
+
+``` html
+<div id="app-2">
+  <span v-bind:title="message">
+    Hover your mouse over me for a few seconds
+    to see my dynamically bound title!
+  </span>
+</div>
+```
+``` js
+const app2 = new Vue({
+  el: '#app-2',
+  data() {
+    return {
+      message: 'You loaded this page on ' + new Date().toLocaleString()
+    }
+  }
+})
+```
+<intro-2 />
+Here we are encountering something new. The `v-bind` attribute you are seeing is called a **directive**. Directives are prefixed with `v-` to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM. Here, it is basically saying "keep this element's `title` attribute up-to-date with the `message` property on the Vue instance."
+
+If you open up your JavaScript console again and enter `app2.message = 'some new message'`, you'll once again see that the bound HTML - in this case the `title` attribute - has been updated.
+