add data-fetching example

yyx990803 · yyx990803 · commit 083e04a704e6 · 2016-07-24T21:50:34.000-04:00
diff --git a/examples/data-fetching/Post.vue b/examples/data-fetching/Post.vue
@@ -0,0 +1,39 @@
+<template>
+  <div class="post">
+    <div v-if="error" style="color: red;">
+      {{ error }}
+    </div>
+    <div v-if="post">
+      <h2>{{ post.title }}</h2>
+      <p>{{ post.body }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from 'axios'
+
+const API_ROOT = 'http://jsonplaceholder.typicode.com'
+
+export default {
+  data () {
+    return {
+      post: null,
+      error: null
+    }
+  },
+  created () {
+    this.fetchData()
+  },
+  watch: {
+    '$route' () { this.fetchData() }
+  },
+  methods: {
+    fetchData () {
+      axios.get(`${API_ROOT}/posts/${this.$route.params.id}`)
+        .then(res => { this.post = res.data })
+        .catch(err => { this.error = err.toString() })
+    }
+  }
+}
+</script>
diff --git a/examples/data-fetching/app.js b/examples/data-fetching/app.js
@@ -0,0 +1,31 @@
+import Vue from 'vue/dist/vue'
+import VueRouter from 'vue-router'
+import Post from './Post.vue'
+
+Vue.use(VueRouter)
+
+const Home = { template: '<div>home</div>' }
+
+const router = new VueRouter({
+  mode: 'history',
+  base: __dirname,
+  routes: [
+    { path: '/', component: Home },
+    { path: '/post/:id', component: Post }
+  ]
+})
+
+const app = new Vue({
+  router,
+  template: `
+    <div id="app">
+      <h1>Data Fetching</h1>
+      <ul>
+        <li><router-link to="/">/</router-link></li>
+        <li><router-link to="/post/1">/post/1</router-link></li>
+        <li><router-link to="/post/2">/post/2</router-link></li>
+      </ul>
+      <router-view class="view"></router-view>
+    </div>
+  `
+}).$mount('#app')
diff --git a/examples/data-fetching/index.html b/examples/data-fetching/index.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<a href="/">Examples index</a>
+<div id="app"></div>
+<script src="/__build__/shared.js"></script>
+<script src="/__build__/data-fetching.js"></script>
diff --git a/examples/webpack.config.js b/examples/webpack.config.js
@@ -25,7 +25,8 @@ module.exports = {
 
   module: {
     loaders: [
-      { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }
+      { test: /\.js$/, exclude: /node_modules/, loader: 'babel' },
+      { test: /\.vue$/, loader: 'vue' }
     ]
   },
 
diff --git a/package.json b/package.json
@@ -23,12 +23,14 @@
     "test": "npm run lint && flow check"
   },
   "devDependencies": {
+    "axios": "^0.13.1",
     "babel-core": "^6.11.4",
     "babel-eslint": "^6.1.2",
     "babel-loader": "^6.2.4",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-flow-vue": "^1.0.0",
     "buble": "^0.12.3",
+    "css-loader": "^0.23.1",
     "eslint": "^3.0.1",
     "eslint-config-vue": "^1.0.3",
     "eslint-plugin-flow-vars": "^0.4.0",
@@ -46,6 +48,7 @@
     "rollup-watch": "^2.4.0",
     "uglify-js": "^2.7.0",
     "vue": "^2.0.0-beta.3",
+    "vue-loader": "^9.2.0",
     "webpack": "^1.13.1",
     "webpack-dev-middleware": "^1.6.1"
   }

Original file line number	Diff line number	Diff line change
`@@ -25,7 +25,8 @@ module.exports = {`
`25`	`25`
`26`	`26`	`module: {`
`27`	`27`	`loaders: [`
`28`		`- { test: /\.js$/, exclude: /node_modules/, loader: 'babel' }`
	`28`	`+ { test: /\.js$/, exclude: /node_modules/, loader: 'babel' },`
	`29`	`+ { test: /\.vue$/, loader: 'vue' }`
`29`	`30`	`]`
`30`	`31`	`},`
`31`	`32`