Intro to VueJS

by

Salman Rahman Desh

Frontend Developer at Prochito IT Solution

twitter: @Salman_Desh

from VIEW to VUE

light

easy

 

fast

Created by

Evan You

Ex-employee of meteorJs and Google

based on independent 3rd party comprehensive rendering benchmark

this comparison was used by Evan You on UtahJs Conf. 2016

VueJs is a progressive framework for building progressive WebApp user interface.

Okay, now what is

Progressive Web Apps?

Major points of WebApp

  • Work for every user (browser)
  • Fit for every devices
  • Works on low quality network or offline
  • Served via HTTPS
  • Use the app-shell model

Installation

  • include <script> tag
  • via NPM
  • using vue-cli tool with webpack
  • install using bower 


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


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

Hello Vue!

First VueApp



//HTML
<div id="app">
  <span v-if="seen">Now you see me</span>
</div>


//JavaScript
var app = new Vue({
  el: '#app',
  data: {
    seen: true
  }
})

Now you see me

Template syntax (v-if, v-else)


//HTML
<div id="app">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>


//JavaScript
var app = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Milk' },
      { text: 'Sugar' },
      { text: 'Cat' }
    ]
  }
})
  1. Milk
  2. Sugar
  3. Cat

Template syntax (v-for)

v-on -> listen to DOM events

example: v-bind:href="url" or :href="url"

v-bind -> data binding

example: v-on:click="action" or @click="action"

v-once -> perform one time (will not update)

v-html -> output raw HTML

Few more syntax

v-show -> display something

v-model -> two way data binding

v-model.lazy -> sync after change

Modifiers

v-model.number -> to input number only

generally used on form input

v-model.trim -> to trim automatically

Obj.defineProperty()

How changes are tracked

Component



Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})


new Vue({
  el: '#example'
})


<div id="example">
  <my-component></my-component>
</div>

+

Having almost all the design features

Core features

  • Accordion
  • Dropdown
  • Date-picker
  • Card
  • Chips/tags
  • Data table
  • Floating action bar
  • Different ready forms interface
  • Lazy load image
  • Icon collection
  • Ready Chat-Message interface
  • Ready Login interface
  • Ready Modal interface
  • Ready notification interface
  • Photo browser
  • Search bar
  • Pre-loader animation
  • Progress bar
  • Pull to refresh
  • Top, bottom, sub ready navbar interface
  • Ready Side panel interface
  • Timeline
  • Swipe to delete and slide
  • Color theme

Very lightweight & flexible. Doesn't use any third-party libraries. Not even jQuery

Vue.use(Framework7Vue);

new Vue({
    el: '#app',
    framework7: {
        root: '#app'
    }
})

Connecting Framework7 with VueJs 

Vue.use(Framework7Vue);

new Vue({
    el: '#app',
    framework7: {
        root: '#app',
        material: true
    }
})

Changing platform

Step-1: Link framework7.material or framework.iOS CSS files

Step-2:

Change material: true

to app-settings

Vue.use(Framework7Vue);

Vue.component('page-about', {
   template: 'about'
});

new Vue({
    el: '#app',
    framework7: {
        root: '#app',
        material: true,
        routes: [
          {
            path: '/about/',
            component: 'page-about'
          }
        ]
    }
})

Route with Framework7

<body>

    <template id="main">
        Main page
    </template>
    
    <template id="about">
        About page
    </template>

</body>

Let's build an app!

Thank you!

VueJs+Framework7

By Salman Rahman Desh

Made with Slides.com

VueJs+Framework7

  • 2,437

More from Salman Rahman Desh