Vue.JS

introduction

Evan You

Vue : 2016 - present

Meteor : 2014- 2016

Google : 2012 - 2014

Vue was created by Evan You after working for Google using AngularJS in a number of projects

~ 30 y.o

Google Trends

Google Trends

Why Vue.js

1. Progressive JavaScript framework

2. Incrementally adoptable (vuejs, router, vuex, vuelidate)

3. Reusable components .vue (css, js, html)

Getting started 


<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

  <div id="app">
	  {{ message }}
  </div>

  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  })
  
	
    Hello Vue!

Data & Methods


<div id="app-5">
  <p>{{ message }}</p>
  <button @click="reverseMessage">Reverse Message</button>
</div>
//script
  
new Vue({
  el: '#app-5',
  data(){
    return {
    	message: 'Hello Vue.js!'
    }
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

v-model

 <form id="signup-form" method="post" action="#" 
       	@submit.prevent="submit">
   
      <input
        type="email"
        v-model="email"
      />
      <input type="submit" value="Sign Up" />
   
</form>
new Vue({ 
        el:"#signup-form", 
        data(){ 
          return {
            email: ''
        } } 
        ,methods:{
          submit:function(){ 
            fetch("https://httpbin.org/post",{
              method:"POST",
              body:{email:this.email}
            })
        } 
 });

Vue instance/component

//Vue.js instance on the html page
new Vue({
  //element to mount into html page
    el:"", 
  // JSON object containing page data
    data:{}, 
  //page clicks on the page
    methods:{}, 
  //autoupdatable properties ( filters )
    computed:{},
  //watcher on page properties
    watch:{}, 
  // page hooks/events
    created:function(){},
    mounted:function(){},
    destroyed:function(){}
})

More Vue.js

Expressions

Directives

List Rendering

Binding

Actions & Events

check cheatsheet for more ->

Continue to workshop

Vue.JS introduction

By Dragosh

Vue.JS introduction

Super fast introduction to Vue.js

  • 1,461