Getting Started with Vue JS

Progressive JavaScript Framework that focuses on building user interfaces

  • Works in the “View Layer” only
  • Incrementally adoptable
  • Easily integrated into other project/libraries
  • Capable of powering advanced SPAs

What Vue Offers

  • Reactive Interfaces
  • Declarative Rendering
  • Data Binding
  • Directives
  • Template Logic
  • Components & Nesting
  • Event Handling
  • Computed Properties
  • CSS Transitionins & Animation
  • Custom Filters

Using VUE.JS

  • Include the script tag in an html file
  • Installing using NPM
  • Use the Vue-cli tool
  • Install using the Bower client

Setup:

I am using Brackets edit for this example.  As you can see I have called Vue.js in the header.

Rendering Data to DOM:

The script for implementing vue is written in footer just above the closing body tag.  If you try using the script in header it won’t work.  el: bind the element “app” and make it available for Vue for DOM manipulation.  Data object is static, we can also use external api to get data and render it to the element.

Simple Directive

<span>{{msg}}</span>
<span v-text=”msg”></span>
<span v-html=”msg”></span>
<span v-once>{{msg}}</span>

Class and Style Binding:

 

Hope you enjoyed and is helped you getting started!  Feel free to get in touch in you need any help.

You can watch the complete tutorial below:

 

About: Brijesh

Brijesh is Laravel developer and expert in using VueJS for creating laravel applications.  He has being be available as Hire Laravel Developer to work on your project.  If you are looking for Outsourcing Laravel Project feel free to contact us.  Our team of developer will surely help you!.

Newsletter signup

CONNECT WITH US

SEARCH THE CoderAdobe BLOG

Related Post