Why vue.js ?

Extendable Data bindings
Plain JS object models
Actual DOM
Building UIs by composing components
Mixing & matching small libraries

Fast (very fast)

Simple

How Changes Are Tracked

STATE MANAGEMENT

without redux, flux and vuex

https://www.patreon.com/evanyou

vue-router: component-oriented client-side routing solution for single page applications
vuex: flux-inspired state management architecture for large scale applications
vue-loader/vueify: bundler plugins to enable single file components
vue-devtools: Chrome extension for debugging Vue.js application
vue-cli: quick project scaffolding with ready-to-go build & test setup

TOP 5

    
    <div id="demo">

    
      <p>{{message}}</p>
    

      <input v-model="message">
    

    </div>

    
    var VueInstance = new Vue({


      el: '#demo',


      data: {
        message: 'Hello Vue.js!'
      }



    })

}

Directive

Component

Mixin

Vue.directive('my-directive', {
  bind: function () {
    // do preparation work
    // e.g. add event listeners or expensive stuff
    // that needs to be run only once
  },
  update: function (newValue, oldValue) {
    // do something based on the updated value
    // this will also be called for the initial value
  },
  unbind: function () {
    // do clean up work
    // e.g. remove event listeners added in bind()
  }
})

Directive

<template>
    <div id="todo-app">
        <input type="text" v-model="todo">
        <button @click="addTodo">Add</button>
        <ul>
            <li v-for="todo in todos">
                {{todo.text}}<button @click="removeTodo">Romove</button>
            </li>
        </ul>
        <!-- <Todos-component :todos="todos" :add="addTodo" :remove="removeTodo"></Todos-component> -->
    </div>
</template>

<script>
    import TodosComponent from 'components/TodosComponent'

    export default {
        props: ['todos'],
        props: {
            todos:{
                required: true
            }
        },
        data () {
            return {
                todo:"",
                todos: ["Kilo ver","Spora git","Sağlıklı beslen"],
                // todos: this.todos
            }
        },
        components: {
            TodosComponent  // Register component
        },
        methods: {
            addTodo(){
                // bla bla 
            },
            removeTodo(){
                // bla bla 
            }
        }
    }
</script>

Component

vuejs.org

github.com/vuejs/vue

forum.vuejs.org

gitter.im/vuejs/vue

twitter.com/vuejs

Community