Demo of Simple Vue.js Component

Demo of Basic Vue.js Component

... 

README.MD

Demo of Simple Vue.js Component

Since 18/January/2017

App.vue

<template>
  <div id="app" class="border1">
    <form1 text="ข้อมูลเจ้าหน้าที่  คนที่ 1"></form1>
    <form1 text="้ข้อมูลเจ้าหน้าที่  คนที่ 2"></form1>
  </div>
</template>

<script>
import Form1Cls from './components/Form1'
import TextCls from './components/rowtext'

export default {
  name: 'app',
  components: {
    'text': TextCls, 'form1': Form1Cls
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.border1  { border  : 1px solid red;}
</style>

form1.vue

<template>
  <div class="form1 border1" >
    
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <img :src="'./assets/logo.png'">
    <table border="1">
    <tr is="rowtext"  id="a1" text="test1" label="ชื่อ" ></tr>  
    <tr is="rowtext"  id="a2" text="test2" label="นามสกุล" ></tr>       
    <tr is="rowtext"  id="a1" text="test1" label="บัตรประชาชน" ></tr>  
    <tr is="rowtext"  id="a2" text="test2" label="อายุ" ></tr>       
    <tr is="rowtext"  id="a1" text="test1" label="บ้านเลขที่" ></tr>  
    <tr is="rowtext"  id="a2" text="test2" label="เบอร์โทร " ></tr>       
    <tr is="rowtext"  id="a2" text="test@mail.com" label="email" ></tr>       

    </table>
  </div>
  
  
</template>

<script>
import rowtextCls from './rowtext'

export default {
  name: 'hello',
  props: ['text'],
  data () {
    return {
      msg: 'Form1:' + this.text
    }
  },
  components: {
    'rowtext': rowtextCls
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
} 
.border1 {border: 1px solid blue;
        background-color:antiquewhite;}

</style>

main.js

import Vue from 'vue'
import App from './App'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

pakage.json

{
  "name": "mycomp1",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "tps2015@localhost",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
  },
  "dependencies": {
    "vue": "^2.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-eslint": "^7.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.25.0",
    "eslint": "^3.7.1",
    "eslint-friendly-formatter": "^2.0.5",
    "eslint-loader": "^1.5.0",
    "eslint-plugin-html": "^1.3.0",
    "eslint-config-standard": "^6.1.0",
    "eslint-plugin-promise": "^3.4.0",
    "eslint-plugin-standard": "^2.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "friendly-errors-webpack-plugin": "^1.1.2",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.17.2",
    "json-loader": "^0.5.4",
    "cross-env": "^3.1.3",
    "karma": "^1.3.0",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.2.0",
    "karma-phantomjs-launcher": "^1.0.0",
    "karma-sinon-chai": "^1.2.0",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.26",
    "karma-webpack": "^1.7.0",
    "lolex": "^1.4.0",
    "mocha": "^3.1.0",
    "chai": "^3.5.0",
    "sinon": "^1.17.3",
    "sinon-chai": "^2.8.0",
    "inject-loader": "^2.0.1",
    "babel-plugin-istanbul": "^3.0.0",
    "phantomjs-prebuilt": "^2.1.3",
    "chromedriver": "^2.21.2",
    "cross-spawn": "^4.0.2",
    "nightwatch": "^0.9.8",
    "selenium-server": "2.53.1",
    "semver": "^5.3.0",
    "opn": "^4.0.2",
    "ora": "^0.3.0",
    "shelljs": "^0.7.4",
    "url-loader": "^0.5.7",
    "vue-loader": "^10.0.0",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.1.0",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  }
}

rowtext.vue

<template>
  <tr class="rowtext" >
      <td>{{label}} </td>
      <td> <input type=text v-model="text" v-bind:id="id" v-bind:name="id"  ></td>
      <td><button onclick="save" >บันทึก</button> </td>
      <td><button >ลบ</button> </td>
  </tr>
</template>

<script>
export default {
  name: 'rowtext',
  props: ['id', 'text', 'label'],
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      text: this.text,
      label: this.label
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
} 
.border1 {border: 1px solid blue;
        background-color:antiquewhite;}

</style>

TODO.txt

// Sample Basic Component In Vue.js
// Create Demo Since 
// Document Since  10:14 AM 1/18/2017  


// CREATE FILEs in specify directory 
src/components/Form1.vue
src/components/rowtext.vue
src/App.vue
src/main.js
pakage.json

Install Node.JS ( Windows/ or Linux ) 

// Install node.js  , must connect to internet , long time download 
npm install 

// install vue.js 
// install already by npm install 

// start server , normally start web server on port 8080  , auto show web browser , auto update when code changed 
npm start  

============================================
NOTE::  These file create by vue init , and then modify 
how to install vue-cli is : 

npm install -g vue-cli          /* for global installation */
vue init webpack learn-vuex     /* if  already have package.json with dependecy , not have to run this script */
$ cd learn-vuex
$ npm install
$ npm run dev

===============================================
Reference: 
https://stories.sellsuki.co.th/%E0%B8%A5%E0%B8%AD%E0%B8%87%E0%B9%80%E0%B8%A5%E0%B9%88%E0%B8%99-vue-js-%E0%B8%81%E0%B8%B1%E0%B8%9A-vuex-5d70ba9ea85a#.j1s9owh5p
https://vuejs.org/v2/guide/components.html
https://vuejs.org/v2/guide/single-file-components.html
https://coligo.io/dynamic-components-in-vuejs/