VueJS – redpanthers.co

Event Listeners in VueJS

reshma — Wed, 13 Sep 2017 08:20:06 +0000

v-on directive to bind event listeners to DOM events.


  
  The button above has been clicked {{ counter }} times.

var example1 = new Vue({
  el: '#example',
  data: {
    counter: 0
  },
  methods : {
    clickMe : function(){
     this.counter += 1;
    }
  }
})

We are binding a click event listener to a method named clickMe. Here’s how to define that method in our Vue instance. Here we have a counter variable initialized to zero. Inside the method, we are incrementing the value of the counter. So for each click on the button, the method is invoked. You will get the code here.


  
  
  Count: {{ counter }}

var example2 = new Vue({
  el: '#example2',
  data: {
    counter: 0
  },
  methods : {
   countUp : function(){
    this.counter += 1;
   },
   countDown : function(){
    this.counter -= 1;
   }
  }
})

Here in this example, we are using two button and methods. One for incrementing the count and other for decrementing. You can see code here. Note :-

Instead of using "v-on:click", we have a shortcut. We can use "@click".

For example,


  
  
  Count: {{ counter }}

This will give same result as before. We can see another example. Here we have an input field where we type the url which is bound to the Js using v-model. We have a button with click event listener which is bound to the method humanizeUrl. We have two urls, url and cleanUrl. url is what we type in the input field and cleanUrl is getting by replacing the url using regular expression. Regular expression is not a Vue.js thing. Its a universal programming format. We are saving the domain name of url in the cleanUrl. Thus we will get the value on cleanUrl in the view. You will get the code here.


  Visit : {{cleanUrl}}

var example1 = new Vue({
  el: '#example',
  data: {
    url: "",
    cleanUrl: ""
  },
  methods : {
    humanizeUrl: function(){
      this.cleanUrl = this.url.replace(/^https?:\/\//, '').replace(/\/$/, '')
    }
  }
})

But here you won’t redirect to the url when we click on it. That is we have to get the url. So we need to bind the href. You can use v-bind directive for this.


  Visit : {{cleanUrl}}

Here is the Demo. So the url will redirect to the correct page. You can try out these examples to get an idea about event listeners in Vue.js.

Reference

https://vuejs.org/v2/guide/events.html https://www.youtube.com/watch?v=4PXXQzME5no]]>

Two way binding in Vue.js

reshma — Fri, 08 Sep 2017 13:06:37 +0000

Vue.js is a JavaScript framework getting popular considering its simplicity praised a lot these days. There are a lot of JavaScript frameworks among which React and Angular are popular among web developers. Vue.js is much flexible and less opinionated framework than Angular. It’s similar to React but much simpler. Vue.js supports Two-way binding. That is it keeps your data in sync with your DOM without you having to do anything. Two-way binding in Vue.js is MVVM pattern. That is Model View View Model. Like MVC, Model is the data object and view is what is displayed up. The Model can tie to the View and the View can tie back to Model. In one way binding, JS variable is bound to the DOM.


  The message is: {{message}}

new Vue({
 el: '#app',
 data: {
   message: 'vue js one way binding'
 }
});

Here when you change the data in JS, it will also update in the DOM. So you will get the updated message on the page. You can get the basic code here. But in two way binding, Js variable can be bound to the DOM and data is also bound from the DOM back to JS.


  {{message}}

new Vue({
  el: '#app',
  data: {
    message: 'vue js two way binding'
  }
});

Now, if you type anything into your input, your JS variable is updated with the change, which in turn updates your span. You can get the code here.

Directive

The attribute used with input v-modelis a vue directive. We have to assign data model with the directive. A directive’s job is to reactively apply special behavior to the DOM when the value of its expression changes. In the case of v-model, it binds the element to one of the data properties that Vue is watching. Vue has many directives. Another one is v-on which binds an element to an event. For example, v-on: click is to bind element when clicking on it. Working with html forms is a breeze in Vue. This is where two-way binding shines. It does not bring any issues even in complex cases, though watchers may remind of Angular 1 at first glance. One-way flow with callback passing is always at your service when you do your components splitting.

Two way binding with JQuery

You can also do two-way binding in jquery or plain JS. But you have to use some event listeners when there occurs any change in the input. You have to make your own logic to update DOM when there are any changes in the elements. You can see the example here. You can achieve reactive data binding in jQuery, but it’s just a sideshow. In Vue, it’s the main event. Hope you will try it. Happy Coding!

Reference

https://vuejs.org/ https://vuejs.org/v2/guide/forms.html https://www.youtube.com/watch?v=nEdsu6heW9o]]>

Getting Started with Vue.js

reshma — Mon, 28 Aug 2017 12:54:43 +0000

What is Vue.js?

Vue.js is yet another JavaScript framework getting popular considering its simplicity praised a lot these days. There are a lot of JavaScript frameworks among which React and Angular are popular among web developers. Vue.js pronounced as “view.js” is a much flexible and less opinionated framework than Angular. It’s similar to React but much simpler. Vue.js gives you more freedom in designing your app, unlike Angular. So that you are not forced to do everything in their way. It can be adapted very easily to your existing application. You don’t need to know JSX, unlike React. All you have to do is to drop the link into your HTML page header and you are up and ready.

Overview

This is the basic folder structure.

– index.html

This is the main HTML template for your application. You can link your static assets inside the head tag while your processed assets will be auto injected in the body.

– src/router/index.js

This is the file which initiates vue-router with the given components.

import Vue from 'vue';
import VueRouter from 'vue-router';
import Hello from '@/components/Hello';
Vue.use(VueRouter);
const routes = [
  { path: '/', name: 'Hello', component: Hello },
];
/* eslint-disable no-new */
export default new VueRouter({
  routes,
  mode: 'history',
});

– src/App.vue

This is the application’s main Vue.js component which is basically just a wrapper for vue-router.

– src/main.js

This is the application entry file where you initiate your Vue.js application with a router, store and the main App.vue component.

import Vue from 'vue';
import router from '@/router';
import store from '@/store';
import App from '@/App';
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
});

– src/components/Hello.vue

This file represents a sample Vue.js component which will be used by the vue-router. Please note that Hello module’s state is being used in here.

Getting Started

The simplest way is to include this in your file.

You can also download the Vue file and add it in a script tag, or else install it with NPM. It also provides an official CLI called the Vue-cli. You can find more details in the Vue.js Installation Guide. Let’s compare simple JavaScript with a VueJS instance.

function printText () {
  return 'Hello World!'
}
// Set some text in jQuery
$('.element').text(printText())

This is what we do when we want to manipulate the text for some element. For the last couple of years, I was writing code like this for a living. But what if the ‘.element’ get renamed. Your whole JS will break. The binding is broken. We can overcome this in Vue.


  
    {{ msg }}

new Vue({
  el: '.app',
  data: {
    msg: 'Hello World!'
  }
})

The Vue instance referenced to an element ‘.app’. This is the entry point. Even if the class of the span object is changed it won’t affect the message being displayed.Vue.js also supports Loops, Two-way binding, Components, Event Listeners like React. If you want to learnVue.js there’s no better document than the Vue.js Guide. You can see a demo Here.

Why Vue.js?

Let’s talk about why we can use Vue.js. Both React and Vue.js use Virtual DOM and the use of components. But in React if a component’s state is changed. It re-renders the entire component sub-tree. In Vue.js, the component’s dependencies are automatically tracked during render, so the system knows which component needs to be changed when the state is changed. Unlike React you don’t need to write everything in JavaScript. Vue.js supports the use of both JSX and Template rendering. If the HTML is valid, then it is a valid Vue template. We can give access to CSS within a single-file-component by adding a ‘scoped’ attribute to the style tag which scopes CSS only for that particular component. Comparing Vue with AngularJS, both have similar syntax. But Vue is much simpler in terms of API and design. There are many opinions to structure an Angular application but Vue is a more flexible, modular solution by setting up web pack template. In Vue, we use one-way data-flow between components that make the flow of data easier but in angular, it’s two-way binding between scopes. There are a lot of confusions between directives and components in Angular but in Vue, components are self-contained units with own view and data logic and directives are used for DOM manipulations only. Vue doesn’t use dirty checking so it’s much easier to optimize and has better performance. Since there are a lot of watchers in Angular, when anything in scope changes, all the watchers should re-evaluate again. So Angular becomes slow. Vue.js performs better than EmberJs since it automatically batches updates but in Ember, we need to manually manage run loops. For computed properties in Ember, we have to declare it manually and need to wrap everything in Ember Objects. But in Vue, it’s in Javascript Objects and fully automatic.

Advantages

1. Simplicity

Vue has a good combination of structure and simplicity. Adding Vue.js to your web project can be very simple. It needs external libraries, but tend to use it with or without jQuery.


  {{ message }}

The code is easily understandable about the working of Vue code.

2. Reactivity

The variables in Vue.js are reactive. At each point, when the variables change, it will automatically inform their peers.

var app = new Vue({
  el: '#app',
  data: {
    message: "Hello World"
  }
});
setTimeout(function() {
  app.message = "Goodbye World";
}, 2000)


  
  
  {{ message }}

Data properties, like message in this example, are reactive, that is they will trigger a re-render if changed. The v-html attribute will render HTML templates. You can see the demo here.

3. Focus

Vue.js is mainly used for building user interfaces and this is achieved by a library that does not have any influence from the frameworks out there already. Supporting libraries are integrated with Vue.

4. Flexibility

Vue.js comes with perfect balance to write quickly and run straight from the browser. With that said, it is extremely good if you would like to create any practical app using with ES6, separate component files, JSX, building, routing etc. For example, if you have a preferred method for writing your templates, Vue lets you do it in any of these ways:

Write your template in an HTML file
Write your template in a string in a Javascript file
Use JSX in a Javascript file
Make your template in pure Javascript using virtual nodes

This flexibility makes it easy to switch to Vue.

5. Components

Actually, this is where Vue’s flexibility system is built, so that components can be small and are reusable parts of UI. This isn’t any special because the of JavaScript frameworks are built with this concept.

// register
Vue.component('my-component', {
  template: 'A custom component!'
})
// create a root instance
new Vue({
  el: '#example'
})

Which will render,


  A custom component!

So, the components can be used in templates as elements.

6. Copying competitors

Vue has been able to copy what works in other frameworks and avoid what doesn’t. Vue’s state management library Vuex has inspiration from Elm. Along with this, Vue’s components get the similarities with Polymer’s customer elements. Vue is now rocking a virtual DOM like React.

Conclusion

Vue.js is a progressively-adoptable Javascript framework which is focussed on view layer. It is easy to integrate with other applications. The main feature of Vue is Components. Vue uses HTML based templates which can compile into Virtual DOM render functions. In Vue, we can also directly write render functions using JSX.Vue.js is much simpler, flexible and has better performance than other frameworks.

References

https://vuejs.org/ https://github.com/vuejs/vue https://medium.com/@brett.marshall/vue-js-the-real-angular-2-0-62744490cb99]]>