Vue Learn

Posted on  by admin

You’re browsing the documentation for v2.x and earlier. For v3.x, click here. Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.

On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

If you’d like to learn more about Vue before diving in, we created a video walking through the core principles and a sample project. If you are an experienced frontend developer and want to know how Vue compares to other libraries/frameworks, check out the Comparison with Other Frameworks.

The official guide assumes intermediate level knowledge of HTML, CSS, and JavaScript. If you are totally new to frontend development, it might not be the best idea to jump right into a framework as your first step - grasp the basics then come back!

Getting Started

Prior experience with other frameworks helps, but is not required. The easiest way to try out Vue.js is using the Hello World example. Feel free to open it in another tab and follow along as we go through some basic examples.

Or, you can create an index.html file and include Vue with:. The Installation page provides more options of installing Vue.

What is Vue.js?

Note: We do not recommend that beginners start with vue-cli, especially if you are not yet familiar with Node.js-based build tools.

If you prefer something more interactive, you can also check out this tutorial series on Scrimba, which gives you a mix of screencast and code playground that you can pause and play around with anytime. At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:.

We have already created our very first Vue app!

Handling User Input

This looks pretty similar to rendering a string template, but Vue has done a lot of work under the hood.

The data and the DOM are now linked, and everything is now reactive. How do we know? Open your browser’s JavaScript console (right now, on this page) and set app.message to a different value.

You should see the rendered example above update accordingly.

  • Note that we no longer have to interact with the HTML directly.
  • A Vue app attaches itself to a single DOM element (#app in our case) then fully controls it.

The HTML is our entry point, but everything else happens within the newly created Vue instance.

  • In addition to text interpolation, we can also bind element attributes like this:.
  • Hover your mouse over me for a few seconds to see my dynamically bound title!
  • Here we are encountering something new.

The v-bind attribute you are seeing is called a directive.

  • Directives are prefixed with v- to indicate that they are special attributes provided by Vue, and as you may have guessed, they apply special reactive behavior to the rendered DOM.
  • Here, it is basically saying “keep this element’s title attribute up-to-date with the message property on the Vue instance.”.
  • If you open up your JavaScript console again and enter app2.message = 'some new message', you’ll once again see that the bound HTML - in this case the title attribute - has been updated.

Conditionals and Loops

It’s easy to toggle the presence of an element, too:. Go ahead and enter app3.seen = false in the console. You should see the message disappear. This example demonstrates that we can bind data to not only text and attributes, but also the structure of the DOM. Moreover, Vue also provides a powerful transition effect system that can automatically apply transition effects when elements are inserted/updated/removed by Vue.

There are quite a few other directives, each with its own special functionality. For example, the v-for directive can be used for displaying a list of items using the data from an Array:. In the console, enter app4.todos.push({ text: 'New item' }).

You should see a new item appended to the list. To let users interact with your app, we can use the v-on directive to attach event listeners that invoke methods on our Vue instances:.

Note that in this method we update the state of our app without touching the DOM - all DOM manipulations are handled by Vue, and the code you write is focused on the underlying logic.

Vue also provides the v-model directive that makes two-way binding between form input and app state a breeze:.

  • The component system is another important concept in Vue, because it’s an abstraction that allows us to build large-scale applications composed of small, self-contained, and often reusable components.
  • If we think about it, almost any type of application interface can be abstracted into a tree of components:.
  • In Vue, a component is essentially a Vue instance with pre-defined options.

Registering a component in Vue is straightforward:.

  • Now you can compose it in another component’s template:. But this would render the same text for every todo, which is not super interesting.
  • We should be able to pass data from the parent scope into child components.

Let’s modify the component definition to make it accept a prop:.

  • Now we can pass the todo into each repeated component using v-bind:.
  • This is a contrived example, but we have managed to separate our app into two smaller units, and the child is reasonably well-decoupled from the parent via the props interface.

Declarative Rendering

We can now further improve our component with more complex template and logic without affecting the parent app. In a large application, it is necessary to divide the whole app into components to make development manageable.

We will talk a lot more about components later in the guide, but here’s an (imaginary) example of what an app’s template might look like with components:. You may have noticed that Vue components are very similar to Custom Elements, which are part of the Web Components Spec.

That’s because Vue’s component syntax is loosely modeled after the spec. For example, Vue components implement the Slot API and the is special attribute. However, there are a few key differences:.

The Web Components Spec has been finalized, but is not natively implemented in every browser.

  • Safari 10.1+, Chrome 54+ and Firefox 63+ natively support web components. In comparison, Vue components don’t require any polyfills and work consistently in all supported browsers (IE9 and above).
  • When needed, Vue components can also be wrapped inside a native custom element.
  • Vue components provide important features that are not available in plain custom elements, most notably cross-component data flow, custom event communication and build tool integrations.
  • Although Vue doesn’t use custom elements internally, it has great interoperability when it comes to consuming or distributing as custom elements.

Vue CLI also supports building Vue components that register themselves as native custom elements.

  • We’ve briefly introduced the most basic features of Vue.js core - the rest of this guide will cover them and other advanced features with much finer details, so make sure to read through it all!
  • Video by Vue Mastery. Watch Vue Mastery’s free Intro to Vue course. ← InstallationThe Vue Instance →. Caught a mistake or want to contribute to the documentation?Edit this on GitHub!Deployed onNetlify .

You must first install Vue.js on Windows or on Windows Subsystem for Linux.

  • Not sure which to use, generally we recommend beginners install on Windows to learn, but professionals install on WSL, see Should I install Node.js on Windows or Windows Subsystem for Linux.
  • Open your command line and create a new directory: mkdir HelloVue, then enter the directory: cd HelloVue. Install the Vue CLI: npm install -g @vue/cli. Create your Vue app: vue create hello-vue-app.

Ready for More?

You'll need to choose whether to use Vue 2 or Vue 3 Preview, or manually select the features you want. Open the directory of your new hello-vue-app: cd hello-vue-app. Try running you new Vue app in your web browser: npm run serve.

You should see "Welcome to your Vue.js App" on http://localhost:8080 in your browser. You can press Ctrl+C to stop the vue-cli-service server. If using WSL (with Ubuntu or your favorite Linux distribution) for this tutorial, you'll need to make sure that you have the Remote - WSL Extension installed for the best experience running and editing your code with VS remote server.

Try updating the welcome message by opening your Vue app's source code in VS Code, enter: code .

VS Code will launch and display your Vue application in the File Explorer.

  • Run your app in the terminal again with npm run serve and have your web browser open to the localhost so that you can see the Vue page welcome page displayed.
  • Find the App.vue file in VS Code. Try changing "Welcome to your Vue.js App" to "Welcome to the Jungle!"

You will see your Vue app "hot reload" as soon as you save your change.

  • Using Vue in Visual Studio Code: Find more about using Vue with VS Code, including the Vetur extension that provides Vue syntax highlighting, IntelliSense, debugging support, and more.
  • Microsoft Learn online course: Take your first steps with Vue.js. VueJS Useful Resources. Selected Reading. VueJS is a progressive JavaScript framework used to develop interactive web interfaces.
  • Focus is more on the view part, which is the front end.

It is very easy to integrate with other projects and libraries.

  • The installation of VueJS is fairly simple, and beginners can easily understand and start building their own user interfaces.
  • The content is divided into various chapters that contain related topics with simple and useful examples.

Composing with Components

This tutorial is designed for software programmers who want to learn the basics of VueJS and its programming concepts in a simple and easy manner.

This tutorial will give the readers enough understanding on the various functionalities of VueJS from where they can take themselves to the next level. Before proceeding with this tutorial, readers should have a basic understanding of HTML, CSS, and JavaScript. Modern web apps require increasingly complicated front-ends that can handle large amounts of user interactions and dynamic data.

For example, Instagram has over 95 million new posts added per day. Front-end frameworks are JavaScript libraries that make it easy to write the code to create and display this enormous amount of data.

There are many popular front-end frameworks used by engineers today, including React and Angular.

  • Vue.js is an up-and-coming front-end framework that aims to combine the best aspects of all of these frameworks in one easy-to-use package.
  • In fact, in the 2018 State of JavaScript survey, Vue.js was the most sought after front-end framework by a landslide, with 46.6% of all front-end developers saying that they want to learn it.

In short, Vue.js makes front-end web development easier and more exciting than it’s ever been.

  • Jump in and find out what this front-end engineering trend is all about!
  • Upon completing the lessons in Learn Vue.js, you will be able to create and style forms that handle real-world, dynamic data.
  • You’ll have a grounding in how to set up Vue.js and how to utilize essential features of Vue to tackle complex front-end problems.

The lessons in Learn Vue.js assume learners already have an understanding of object-oriented programming in JavaScript.

  • We expect learners who want to take this course should already have taken the lessons in Introduction to JavaScript through the lesson on JavaScript classes.
  • Additionally, Learn Vue.js will often reference HTML and CSS code.

Note on Prerequisites

As such, learners should take Introduction to HTML and the first lesson of Learn CSS before taking Learn Vue.js.

This page is still in early development. If you feel you can contribute, please don't hesitate to open a PR.

When coming from another technology, it is normal to compare common methods and patterns to those used in Vue.

In this section, we will go over the most popular technologies and the struggles developers have when migrating from them to Vue.

Take-Away Skills:

This section could use a little bit of love.

If you're able to, please consider helping the Vue Community by contributing a PR.

You'll find a link to edit this page at the bottom.

Why learn Vue.js?

Similarities

  • Both use a templating system based on HTML
  • Directives
  • Filters
  • Component approach (AngularJS from 1.5.x)

Differences

  • Reactivity implementation - Angular has dirty checking phases, where a check is done in regards of what model is out of sync with the DOM and updates are performed.
  • Possible issues when converting an AngularJS codebase to Vue - Best practices differ, AngularJs encourages extensive use of filters while in Vue computed properties are preferred).

Why Switch?

  • Dirty checking of AngularJs can cause loops and be extremely slow
  • Unit testing Vue components is easier
  • Vue has a much smaller footprint
  • Vue is less verbose - easier learning curve, lower entry point
  • The Vue community is active and evolving, while the AngularJs one shifted attention to Angular (2x, 3x, 4x)

Relation to Custom Elements

This section could use a little bit of love.

If you're able to, please consider helping the Vue Community by contributing a PR.

You'll find a link to edit this page at the bottom.

# Polymer

This section could use a little bit of love.

If you're able to, please consider helping the Vue Community by contributing a PR.

You'll find a link to edit this page at the bottom.

# No Framework - jQuery

This section could use a little bit of love.

If you're able to, please consider helping the Vue Community by contributing a PR.

You'll find a link to edit this page at the bottom.

# Usage with Backend Frameworks

# Express

This section could use a little bit of love.

If you're able to, please consider helping the Vue Community by contributing a PR.

You'll find a link to edit this page at the bottom.

# Koa

This section could use a little bit of love.

If you're able to, please consider helping the Vue Community by contributing a PR.

You'll find a link to edit this page at the bottom.

# Adonis

This section could use a little bit of love.

If you're able to, please consider helping the Vue Community by contributing a PR.

You'll find a link to edit this page at the bottom.

# Laravel

# Reasons to use Laravel and Vue

Whether you're building an API-only backend for your SPA, or a traditional server-rendered website, Laravel and Vue is a common pairing. Despite that Laravel comes with a Vue boilerplate, it is framework-agnostic like Vue; making them a good match. The widespread community adoption also means more plugins, resources and support is available.

  • Laravel comes with Vue setup out of the box - no setup necessary.
  • Laravel Mix takes the pain out of asset compiling - no fighting with Webpack configuration.
  • Prominent members of the Laravel community--including the creator--as well as the community itself, are proponents of Vue (and its ecosystem), which means:
    • there are more resources to help you learn (guides, tutorials, articles)
    • there are more people who have experience with Vue+Laravel (help, support, guidance)
    • there is in general a healthier ecosystem (plugins, boilerplates, etc.)

# Common gotchas when using Laravel and Vue together

  • Use Vue moustache syntax in Blade templates by using @ or @verbatim directives.
  • Pass PHP variables into Vue components (as props) by using v-bind and the Blade @json directive.
  • Needing to decide whether to use Laravel router, vue-router or both in tandem could be regarded as a con, plus that vue-router is not configured by default (how do I set it up).
  • Webpack aliases like @ and ~ are not setup as they would be when using vue-cli, fortunately there's a Mix plugin for that.

# Want to know more?

Need more details or code samples?

The "Laravel + Vue = ❤️" article linked below was written at the same time as this article, by the same author and mirrors its structure, heading-for-heading but goes into more detail, providing code samples and demos.

# Ruby

This section could use a little bit of love.

If you're able to, please consider helping the Vue Community by contributing a PR.

You'll find a link to edit this page at the bottom.

# Django

This section could use a little bit of love.

If you're able to, please consider helping the Vue Community by contributing a PR.

You'll find a link to edit this page at the bottom.

# ASP.NET Core

We'll be assuming you are using ASP.NET Core and building a SPA with Vue CLI. This means that the entire frontend will be written with Vue, which will then interact with the API.

When using Vue CLI you could simply include a somewhere in _Layout.cshtml. However, in doing so, you miss out on the full Vue CLI experience - such as Hot Reload.

As you may be aware ASP.NET Core has the concept of middleware. In order to integrate ASP.NET Core with the Vue CLI based SPA we can take advantage of a community developed middleware, ASP.NET Core Vue CLI Middleware. Simply install the Nuget package and follow the installation instructions. At the time of this writing, the library supports preview versions of ASP.NET Core 3.0.

This approach assumes that you wish to have the SPA files and the API being served from the same ASP.NET Core application and are using a monorepo. Of course, whether you or decide to use a monorepo, or if you wish to host the API and SPA files independently, depends upon a number of factors. For example, you may not need to scale development across multiple teams, or your developers could be full stack developers who will be working on both the API and the Vue application.

In addition to this middleware library there is also a detailed article which discusses "manually" adding a Vue CLI SPA to the ASP.NET Core application. It was written before the middleware was made available, so there is overlap in functionality. .NET Curry - ASP.NET Core Vue.js Template.