Vue.js 2.x

Resources: eslint-plugin-vue ES / TypeScript decorator for class-style Vue components. rollup-plugin-vue sublime syntax highlighting

Vue.js 2.x (API Docs)

• instance
  • (module)
• component
  • (component)
  • (ComponentName.vue)
  • Registration:
    • global - in main.js: import Ninjas from './ninjas.vue' & Vue.component('ninjas', Ninjas)
    • local - in an instance: import Ninjas from './ninjas.vue' & components: { 'ninjas': Ninjas}
• data()
  • returns an object with all data

app.js:

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

//  Root Vue
var app = new Vue({
    el: '#app',  // <div id="app"></div>
    template: '<App/>',
    components: { App }
})

app.vue:

<template>
  <div id="app">
    <component></component>
  </div>
</template>

<script>
import Test from './components/sometin'
// =============================================================================
export default {
  name: 'app',
  components: {
    sometin
  }
}
</script>
// =============================================================================
<style scoped></style>

component.js:

<template>
    <div>
        <span> HTML in a .vue template must be or be in a single root component; in this case, a div. </span>
    </div>
</template>

<script>
    export default {
        name: 'test',
        data() { 
            return {
                user: {
                    firstName: 'Clay',
                    lastName: 'Dunston'
                }
            }
        },
        methods: { name: function() },
        computed: {
            fullName: function () {
            return this.user.firstName + ' ' + this.user.lastName
        }
    }
</script>

<style scoped>
    a {
        outline:none;
    }
</style>

Directives

• v-html
• <a v-bind:href="var"> Anchor </a> or <a :href="var"> Anchor </a>
• v-if="value", v-else
• v-for="item in items"
• v-model
• v-on:click=""

Vue Dev Environment (w/ webpack)

~/
┃
┣━━ build/
┃
┣━━ config/
┃
┣━━ nodemodules/
┃
┣━━ static/
┃   ┣━ 
┃   ┗━ .gitkeep
┃
┣━━ src/
┃   ┣━ assets/
┃   ┃   ┣━ 
┃   ┃   ┗━ logo.png
┃   ┃
┃   ┣━ components/
┃   ┃   ┣━ Hello.vue
┃   ┃   ┗━ Test.vue
┃   ┃
┃   ┣━ shared/
┃   ┃   ┣━ 
┃   ┃   ┗━ 
┃   ┃
┃   ┣━ App.vue
┃   ┗━ main.js
┃
┣━ .babelrc  
┣━ .editorconfig
┣━ .gitignore
┣━ .postcssrc.js
┣━ index.html   
┣━ package.json
┗━ readme.md

Vue - Router

Docs

<router-link to="/home"> /home </router-link>

Components

<template>
    <!-- your component -->
</template>

<script>

</script>


<style>

</style>