Vue.JS(1)Introduction and Basic Demo

Vue.JS(1)Introduction and Basic Demo

Check the Starter Project
https://github.com/villeristi/vue.js-starter-template

Prepare the ENV
>sudo npm install -g webpack-dashboard
I already have yarn.

Some useful commands
>yarn lint:js
>yarn build
>yarn start

Set up a Sample Projects similar to that.
https://vue-starter.ville.io/
https://github.com/villeristi/vue.js-starter-template

Follow the Doc https://zhuanlan.zhihu.com/p/24837102
>npm --version
3.10.10

>sudo npm install -g vue-cli
Create the first Project
>vue init webpack vue-console

Start the Project
>cd vue-console/
>npm run dev

Visit your page from Here
http://localhost:8082/#/

Build the binary
>npm run build

Unit test >npm run unit
E2E test >npm run e2e
All test   >npm test
Compile the grammer > npm run lint

README.md list all the commands.
package.json list all the dependencies
index.html first html file
main.js  JS file loader

import Vue from ‘vue’: Vue is the main class
import App from ‘./App’:
new Vue({
    el: ‘#app’,    // that is the html dom place tag
    router,
    components: { App },
    template: ‘<App/>'
})

Every *.vue file will have 3 parts
<template></template>
<script></script>
<style></style>

Some Basic Loop Operation
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      users: [
        {firstname: 'Carl', lastname: 'Luo'},
        {firstname: 'Rachel', lastname: 'Kang'},
        {firstname: 'Leo', lastname: 'Luo'}
      ]
    }
  }
}
</script>

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <ul>
      <li v-for="(user, index) in users" :key="index">
        {{ user.firstname }} {{ user.lastname }}
      </li>
    </ul>
  </div>
</template>

v-model v-text
binding the input the value
    <div>
      <input type="text" v-model="username">
    </div>
    <div>
      <span v-text="username"></span>
    </div>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      users: [
        {firstname: 'Carl', lastname: 'Luo'},
        {firstname: 'Rachel', lastname: 'Kang'},
        {firstname: 'Leo', lastname: 'Luo'}
      ],
      username: ''
    }
  }
}
</script>

Some other useful documents
http://www.cnblogs.com/keepfool/p/5619070.html
https://github.com/keepfool/vue-tutorials

References:
sample project vue1, ignore
https://github.com/kenberkeley/vue-demo
so cool
https://github.com/villeristi/vue.js-starter-template
Nuxt.js
https://github.com/nuxt/hackernews
Server side rendering
https://github.com/vuejs/vue-hackernews-2.0

documents
https://cn.vuejs.org/v2/guide/index.html
http://www.cnblogs.com/keepfool/p/5619070.html
http://www.cnblogs.com/keepfool/p/5625583.html

useful and full doc
https://github.com/keepfool/vue-tutorials
http://www.cnblogs.com/keepfool/p/5625583.html
http://www.cnblogs.com/keepfool/p/5619070.html