Getting started with Vue.js

shama · shama · commit a4398aec5d83 · 2018-03-27T09:27:02.000-07:00
diff --git a/getting-started-with-vuejs/App.vue b/getting-started-with-vuejs/App.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <BearList :bears="bears" @click="growl" />
+    <BearList :bears="bears" />
+    <button @click="addBear">Add Bear</button>
+  </div>
+</template>
+
+<script>
+const BearList = require('./BearList.vue')
+module.exports = {
+  data: function () {
+    return {
+      bears: [
+        'grizzly',
+        'polar',
+        'brown'
+      ]
+    }
+  },
+  methods: {
+    addBear: function () {
+      this.bears.push('New Bear')
+    },
+    growl: function (msg, e) {
+      console.log(msg, e)
+    }
+  },
+  components: {
+    BearList: BearList
+  }
+}
+</script>
diff --git a/getting-started-with-vuejs/BearList.vue b/getting-started-with-vuejs/BearList.vue
@@ -0,0 +1,19 @@
+<template>
+  <ul>
+    <li v-for="bear in bears" @click="click(bear, $event)">
+      {{bear}}
+    </li>
+  </ul>
+</template>
+
+<script>
+module.exports = {
+  props: ['bears'],
+  methods: {
+    click: function (bear, e) {
+      const msg = bear + ' has growled.'
+      this.$emit('click', msg, e)
+    }
+  }
+}
+</script>
diff --git a/getting-started-with-vuejs/README.md b/getting-started-with-vuejs/README.md
@@ -0,0 +1,10 @@
+# Getting Started with Vue.js
+
+> [https://www.youtube.com/watch?v=iFqWU1dxm8U](https://www.youtube.com/watch?v=iFqWU1dxm8U)
+
+Install [Node.js](https://nodejs.org/).
+
+Within this folder run the terminal command `npm install` to install the
+`dependencies` and `devDependencies`.
+
+Then run `npm start` to run the app viewable on `http://localhost:9966`.
diff --git a/getting-started-with-vuejs/index.html b/getting-started-with-vuejs/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Document</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="bundle.js" charset="utf-8"></script>
+</body>
+</html>
diff --git a/getting-started-with-vuejs/index.js b/getting-started-with-vuejs/index.js
@@ -0,0 +1,8 @@
+const Vue = require('vue')
+const App = require('./App.vue')
+new Vue({
+  el: '#app',
+  render: function (h) {
+    return h(App)
+  }
+})
diff --git a/getting-started-with-vuejs/package.json b/getting-started-with-vuejs/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "getting-started-with-vuejs",
+  "version": "0.1.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "start": "budo index.js:bundle.js -- -t vueify",
+    "test": "node test.js"
+  },
+  "browser": {
+    "vue": "vue/dist/vue.common.js"
+  },
+  "author": "Kyle Robinson Young <kyle@dontkry.com> (http://dontkry.com)",
+  "license": "MIT",
+  "devDependencies": {
+    "budo": "^11.2.0",
+    "vueify": "^9.4.1"
+  },
+  "dependencies": {
+    "vue.js": "^0.3.2"
+  }
+}
