Vue Js App Template

Posted on  by admin
-->

Applies to: Visual Studio Visual Studio for Mac

In this 5-10 minute introduction to the Visual Studio integrated development environment (IDE), you'll create and run a simple Vue.js web application.

Visual Studio 2022 Preview 2 or later.

Go to the Visual Studio downloads page to install it for free. npm (https://www.npmjs.com/), which is included with Node.js.

Prerequisites

  • Vue.js (Installation | Vue.js (vuejs.org)). Vue.js CLI ((Installation | Vue.js (vuejs.org)).

    In the New Project Dialog, select Create a new project. Search for Vue in the search bar at the top and then select Standalone JavaScript Vue Template or Standalone TypeScript Vue Template, based on your preference.

    Give your project and solution a name. In Solution Explorer, right-click the Vue.js project, select Properties, and then go the Debugging section.

    Change the Debugger to launch to the launch.json option. npm running the vue-cli-service start command. Check console output for messages, such as a message instructing you to update your version of Node.js.

  • You’re browsing the documentation for v2.x and earlier.

    For v3.x, click here. Vue.js uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying Vue instance’s data. All Vue.js 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 manipulations when the app state changes. If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also directly write render functions instead of templates, with optional JSX support.

Create a project

First, you'll create a Vue.js web application project.

  1. The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces):.

    The mustache tag will be replaced with the value of the msg property on the corresponding data object.

  2. It will also be updated whenever the data object’s msg property changes.

  3. You can also perform one-time interpolations that do not update on data change by using the v-once directive, but keep in mind this will also affect any other bindings on the same node:.

    The double mustaches interprets the data as plain text, not HTML. In order to output real HTML, you will need to use the v-html directive:. Using mustaches: {{ rawHtml }}. Using v-html directive: . The contents of the span will be replaced with the value of the rawHtml property, interpreted as plain HTML - data bindings are ignored.

    Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition. Dynamically rendering arbitrary HTML on your website can be very dangerous because it can easily lead to XSS vulnerabilities.

    Only use HTML interpolation on trusted content and never on user-provided content. Mustaches cannot be used inside HTML attributes.

    Instead, use a v-bind directive:. In the case of boolean attributes, where their mere existence implies true, v-bind works a little differently.

  4. In this example:. If isButtonDisabled has the value of null, undefined, or false, the disabled attribute will not even be included in the rendered

  5. So far we’ve only been binding to simple property keys in our templates. But Vue.js actually supports the full power of JavaScript expressions inside all data bindings:.

    These expressions will be evaluated as JavaScript in the data scope of the owner Vue instance. One restriction is that each binding can only contain one single expression, so the following will NOT work:.

Explore the IDE

  1. Template expressions are sandboxed and only have access to a whitelist of globals such as Math and Date.

    • You should not attempt to access user-defined globals in template expressions. Directives are special attributes with the v- prefix. Directive attribute values are expected to be a single JavaScript expression (with the exception of v-for, which will be discussed later).

    • A directive’s job is to reactively apply side effects to the DOM when the value of its expression changes. Let’s review the example we saw in the introduction:.

    • Here, the v-if directive would remove/insert the

      element based on the truthiness of the value of the expression seen.

  2. Some directives can take an “argument”, denoted by a colon after the directive name. For example, the v-bind directive is used to reactively update an HTML attribute:.

Add a .vue file to the project

  1. Here href is the argument, which tells the v-bind directive to bind the element’s href attribute to the value of the expression url.

  2. Another example is the v-on directive, which listens to DOM events:. Here the argument is the event name to listen to.

    We will talk about event handling in more detail too.

Build the project

  1. Starting in version 2.6.0, it is also possible to use a JavaScript expression in a directive argument by wrapping it with square brackets:.

  2. Here attributeName will be dynamically evaluated as a JavaScript expression, and its evaluated value will be used as the final value for the argument.

  1. For example, if your Vue instance has a data property, attributeName, whose value is "href", then this binding will be equivalent to v-bind:href.

  2. Similarly, you can use dynamic arguments to bind a handler to a dynamic event name:.

  3. In this example, when eventName‘s value is "focus", v-on:[eventName] will be equivalent to v-on:focus.

The JavaScript Vue.js project template (and older versions of the TypeScript template) use the build npm script by configuring a post build event. If you want to modify this setting, open the project file (.njsproj) from Windows Explorer and locate this line of code:

Run the application

  1. Dynamic arguments are expected to evaluate to a string, with the exception of null.

    The special value null can be used to explicitly remove the binding.

    Any other non-string value will trigger a warning.

    Dynamic argument expressions have some syntax constraints because certain characters, such as spaces and quotes, are invalid inside HTML attribute names.

  2. For example, the following is invalid:.

Congratulations on completing this Quickstart! We hope you learned a little bit about using the Visual Studio IDE with Vue.js. If you'd like to delve deeper into its capabilities, continue with a tutorial in the Tutorials section of the table of contents.

Next steps