{"id":21519,"date":"2017-05-08T14:34:24","date_gmt":"2017-05-08T14:34:24","guid":{"rendered":"http:\/\/getting_started_with_vue_js_the_progressive_javascript_framework"},"modified":"2024-08-21T18:00:43","modified_gmt":"2024-08-22T01:00:43","slug":"getting_started_with_vue_js_the_progressive_javascript_framework","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/getting_started_with_vue_js_the_progressive_javascript_framework","title":{"rendered":"Getting Started With Vue JS: The Progressive JavaScript Framework"},"content":{"rendered":"

Vue.js is a progressive frontend framework which is the latest workflow and productivity trend. Its simplicity and approachability is what makes Vue.js outstanding among the pool of frontend frameworks. You may not be using Vue.js right now because you already know other JS frameworks and don\u2019t want to learn another. But it\u2019s important to keep in mind that a good framework is built to improve on the weaknesses of the existing ones. This is exactly what Vue.js has done.<\/p>\n

The Challenge<\/h2>\n

The most difficult aspect of building a product with a front-end framework is focusing on the complexity of the tool rather than the complexity of the actual problem being solved. It\u2019s perhaps more frustrating when the tool is complex but the problem is a simple one (e.g. complex webpack config for a todo app). The term progressive<\/strong>, is used by Vue.js to describe how this challenge can be mitigated. Building a basic demo or small app? Vue.js is simple enough to handle that. How about a complex enterprise app? Vue.js is capable of produce cutting-edge solutions, as well.<\/p>\n

Vue.js is approachable, easy to learn and fast. In this article, we\u2019re going to get started with Vue.js by building a gallery app. A gallery app is simple, yet vast enough, to show you all the basic concepts in Vue.js that are applicable to any other framework you might have used<\/p>\n

To get up and running quickly with image uploads and delivery to\/from the cloud, we will utilize Cloudinary<\/a> which is a natural choice. Cloudinary is a tool we have put together to assure you peace of mind when it comes to internet media. Ranging from upload to delivery, and most importantly, transformations that suit your needs, Cloudinary employs cutting edge engineering solutions to make this a painless reality.<\/p>\n

\"Final<\/p>\n

Preparing for Vue.js<\/h2>\n

To showcase how simple Vue.js is, we are going to build our demo using Codepen Project<\/a> by importing a Vue.js script tag. No tooling for bundles or transpiling. Let\u2019s just write JavaScript.<\/p>\n

Create a new<\/a> Codepen project using the Vue.js template shown on the sidebar:<\/p>\n

\"Codepen<\/p>\n

This generates a new project with very few components and an entry point. We will clear most of the boilerplate code to make room for our gallery app logics:<\/p>\n

<!-- index.html --><\/span>\n<html<\/span> lang<\/span>=\"en\"<\/span>><\/span>\n<head<\/span>><\/span>\n  \n  <!-- Meta --><\/span>\n  <meta<\/span> charset<\/span>=\"UTF-8\"<\/span> \/><\/span>\n  <title<\/span>><\/span>Vue.JS Grid<\/title<\/span>><\/span>\n  \n  <!-- Styles --><\/span>\n  <link<\/span> href<\/span>=\"https:\/\/fonts.googleapis.com\/css?family=Montserrat\"<\/span> rel<\/span>=\"stylesheet\"<\/span>><\/span>\n  <link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/twitter-bootstrap\/4.0.0-alpha.6\/css\/bootstrap.min.css\"<\/span> \/><\/span>\n  <link<\/span> rel<\/span>=\"stylesheet\"<\/span> href<\/span>=\"styles\/index.processed.css\"<\/span>><\/span>\n  \n  <!-- Scripts --><\/span>\n  <script<\/span> src<\/span>=\"https:\/\/unpkg.com\/vue@2.1.10\/dist\/vue.js\"<\/span>><\/span><\/script<\/span>><\/span>\n<\/head<\/span>><\/span>\n<body<\/span>><\/span>\n  \n  <div<\/span> id<\/span>=\"demo\"<\/span>><\/span>\n    \n  <\/div<\/span>><\/span>\n  \n  <!-- Scripts --><\/span>\n  <script<\/span> src<\/span>=\"\/scripts\/components.js\"<\/span>><\/span><\/script<\/span>><\/span>\n  <script<\/span> src<\/span>=\"\/scripts\/index.js\"<\/span>><\/span><\/script<\/span>><\/span>\n<\/body<\/span>><\/span>\n<\/html<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
\/\/ index.js<\/span>\n\n\/\/ Init Vue!<\/span>\nvar<\/span> app = new<\/span> Vue({\n  el<\/span>: '#demo'<\/span>,\n  methods<\/span>: {\n    \n  },\n  data<\/span>: function<\/span>(<\/span>) <\/span>{\n    return<\/span> {\n     thumbs<\/span>: []\n    }\n  }\n})\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The Vue Instance<\/h3>\n
Vue is initialized using the Vue<\/code> instance and passing all information about the app as object. The properties of this object is what defines how your app behaves and what data is bound to your app. Now, let\u2019s look at the three most popular properties:<\/p>\n