Refactored Introduction to Vue 3 syntax

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

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

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

@@ -0,0 +1,17 @@
+<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>

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

@@ -0,0 +1,15 @@
+<template>
+  <div id="app-3" class="demo">
+    <span v-if="seen">Now you see me</span>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        seen: true
+      }
+    },
+  }
+</script>

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

@@ -0,0 +1,23 @@
+<template>
+  <div id="app-4" class="demo">
+    <ol>
+      <li v-for="todo in todos">
+        {{ todo.text }}
+      </li>
+    </ol>
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+        todos: [
+          { text: 'Learn JavaScript' },
+          { text: 'Learn Vue' },
+          { text: 'Build something awesome' }
+        ]
+      }
+    },
+  }
+</script>

src/.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>

src/.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>

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

@@ -0,0 +1,28 @@
+<template>
+  <div id="app-7" class="demo">
+    <ol>
+      <todo-item v-for="item in groceryList" v-bind:todo="item" :key="item.id"></todo-item>
+    </ol>
+  </div>
+</template>
+
+<script>
+  import Vue from 'vue/dist/vue.js'
+  export default {
+    data() {
+      return {
+        groceryList: [
+          { id: 0, text: 'Vegetables' },
+          { id: 1, text: 'Cheese' },
+          { id: 2, text: 'Whatever else humans are supposed to eat' }
+        ]
+      }
+    },
+    components: {
+      'todo-item': Vue.component('todo-item', {
+        props: ['todo'],
+        template: '<li>{{ todo.text }}</li>'
+      })
+    }
+  }
+</script>

src/.vuepress/styles/index.styl

@@ -0,0 +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;
+}

src/README.md

@@ -4,7 +4,7 @@ heroImage: /logo.png
 heroText: Vue.js
 tagline: The Progressive JavaScript Framework
 actionText: Get Started →
-actionLink: /docs/
+actionLink: /guide/introduction
 features:
 - title: Approachable
   details: Already know HTML, CSS and JavaScript? Read the guide and start building things in no time!