Vue.js is a great Javascript framework for beginners to learn

Vue.js is a great Javascript framework for beginners to learn

I happened upon The Ultimate Guide to JavaScript Frameworks by John Hannah at JavaScript Report and was intrigued by a framework called Vue.js. What intrigued me was how easy it was to setup and start using.

Of the three most popular frameworks, Vue is widely considered to be the easiest to learn.
—John Hannah, The Ultimate Guide to JavaScript Frameworks

All that is required to get started is to reference the Vue.js Javascript source in your HTML file. No dealing with with Node Package Manager (NPM), setting up a litany of dependencies, or setting up a stack. It was as easy as creating a new HTML file and adding:

%MINIFYHTML946ed4c5eabafcee991c9184f9566b102%

I have been wanting (and needing) to learn more about Javascript frameworks, but haven’t had the time to dig into Node.js. I used React.js in a project before, but I came into that project in the middle of its development and the stack had already been setup. The ease of setup for Vue was great for a beginner like me and really lowered the barrier to entry. Vue also comes with a very approachable guide that you can run through in an afternoon to learn the basics.

I created a little app using Vue.js (and axios for HTTP requests) that allows someone to ask a question and receive a yes or no answer with a GIF response. It’s a small variation on one of the sample guides on the Vue.js website.

The app connects to the foolproof™ Yes Or No? API to deliver highly intelligent yes or no answers (?) to any query.

Here is the simple app:

{{ result }}

And here is the entire setup:

{{ result }}

%MINIFYHTML946ed4c5eabafcee991c9184f9566b105%%MINIFYHTML946ed4c5eabafcee991c9184f9566b106%
const app = new Vue({
    el: '#app',
    data: {
      query: '',
      placeholder: 'finish my homework?',
      result: null,
      imgSrc: null,
    },
    methods: {
      submitQuery: function() {
        this.result = 'Searching for answers...';
        this.query = '';
        this.imgSrc = null;
        var vm = this;
        axios.get('https://yesno.wtf/api')
            .then( function(response) {
              vm.result = response.data.answer.capitalize();
              vm.imgSrc = response.data.image;
            })
            .catch( function(error) {
              console.log(error);
            });
      },
      submitEnabled: function() {
        return this.queryString && this.query.length > 0;
      }
    },
    watch: {
      query: function( newQuestion, oldQuestion ) {
        this.query = newQuestion;
    }
  }
});
// Capitalize a string
String.prototype.capitalize = function() {
  return this.charAt(0).toUpperCase() + this.slice(1);
}

Now I just have to figure out something to build or find a client project I could use it on.
Here’s some important information to read – SecurityInfo, check us out.

More reading: Minimal React.js Without A Build Step

Leave a Comment

Your email address will not be published. Required fields are marked *