VUE.JS

• Apa sih VUE.JS ?
  Vue.js (commonly referred to as Vue; pronounced /vjuː/, like view) is an open-source progressive JavaScript framework for building user interfaces. Integration into projects that use other JavaScript libraries is made easy with Vue because it is designed to be incrementally adoptable. Vue can also function as a web application framework capable of powering advanced single-page applications.
• Fitur yang dimiliki oleh VUE.JS:
1. Templates :
   Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue templates are valid HTML that can be parsed by spec-compliant browsers and HTML parsers. Under the hood, Vue compiles the templates into virtual DOM render functions. Combined with the reactivity system, Vue is able to intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulation when the app state changes.
   
   In Vue, you can use the template syntax or choose to directly write render functions using JSX. In order to do so just replace the template option with a render function. Render functions open up possibilities for powerful component-based patterns — for example, the new transition system is now completely component-based, using render functions internally.
2. Reactivity :
   One of Vue’s most distinct features is the unobtrusive reactivity system. Models are just plain JavaScript objects. When you modify them, the view updates. It makes state management very simple and intuitive. Vue provides optimized re-rendering out of the box without you having to do anything. Each component keeps track of its reactive dependencies during its render, so the system knows precisely when to re-render, and which components to re-render.
3. Components
   Components are one of the most powerful features of Vue. In a large application, it is necessary to divide the whole app into small, self-contained, and often reusable components to make development manageable. Components extend basic HTML elements to encapsulate reusable code. At a high level, components are custom elements to which the Vue’s compiler attaches behavior. In Vue, a component is essentially a Vue instance with pre-defined options.The code snippet below contains an example of a Vue component. The component presents a button and prints of the number of times the button is clicked.
4. Transition:
   Vue provides a variety of ways to apply transition effects when items are inserted, updated, or removed from the DOM. This includes tools to:
1. automatically apply classes for CSS transitions and animations
2. integrate third-party CSS animation libraries, such as Animate.css
3. use JavaScript to directly manipulate the DOM during transition hooks
4. integrate third-party JavaScript animation libraries, such as Velocity.js
5. Routing:
   In a single-page application (SPA) one initial disadvantage was the inability to share links to the exact "sub" page within a specific web page. Because SPAs serve their users only one URL-based response from the server (it typically serves index.html or index.vue), saving bookmarks, or sharing links to a specific article would be impossible. To solve this problem front end routers provide artificial hash-based URLs originally split by a hashbang (#!) page.com/#!/ with HTML5 most modern browsers support routing without the use of a hashbang. JavaScript Libraries like Vue provide an easy Interface to change what is displayed on the page based on the current URL path -- regardless of how it was changed (whether by emailed link, refresh, or in-page links). Additionally, using a front-end router allows for the intentional transition of the browser path when certain browser events (i.e. clicks) occur on buttons or links. Vue itself doesn’t come with front-end hashed routing. But the open source "vue-router" package provides an API to change browser URL, use the back button (hash history), and email password resets or email verification links with authentication parameters provided in the URL. It supports mapping nested routes to nested components and offers fine-grained transition control. Creating a front end routed Single-Page Application with Vue + vue-router is made simple. With Vue, developers are already composing applications with small building blocks building larger components. With vue-router, added to the mix, components must merely be mapped to the routes they belong to, and parent/root routes must indicate where children should render.


• Example VUE.JS :
  HTML:
  
  
  
  VUE.JS:
  
• Alternative Beside VUE.JS
  REACT.JS and ANGULAR.JS
• apa itu REACT.JS ?
  React (sometimes styled React.js or ReactJS) is a JavaScript library for building user interfaces. It is maintained by Facebook, Instagram and a community of individual developers and corporations.
• apa itu ANGULAR.JS
   AngularJS (commonly referred to as "Angular.js" or "AngularJS 1.X") is a JavaScript-based open-source front-end web application framework mainly maintained by Google and by a community of individuals and corporations to address many of the challenges encountered in developing single-page applications. The JavaScript components complement Apache Cordova, the framework used for developing cross-platform mobile apps. It aims to simplify both the development and the testing of such applications by providing a framework for client-side model–view–controller (MVC) and model–view–viewmodel (MVVM) architectures, along with components commonly used in rich Internet applications. In 2014, the original AngularJS team began working on Angular (Application Platform).
• VUE.JS VS REACT.JS
  

  Difference	VUE.JS	REACT.JS
  Complexity	Simple	More complex than VUE.JS
  Flexibility and modularity	More Flexible	Strong opinion
  Data Binding	One way binding	Two way binding
  Directives and Components	Clear Separator	Unclear separator
  Performance	Faster than React.JS	Slow

• VUE.JS VS ANGULAR.JS
  

  Difference	VUE.JS	ANGULAR.JS
  Size & Performance	A bit Faster than Angular.JS	Faster than React.JS but not faster than Vue.JS
  Flexibility	No limit	Have some limit
  Learning Curve	Need only HTML and ES5 JavaScript	Hard for new user