Shulou(Shulou.com)06/03 Report--

How to use the vuejs template? for this question, this article introduces the corresponding analysis and answer in detail, hoping to help more partners who want to solve this problem to find a more simple and easy way.

Because Vue.js is a technology built on the view layer, the template system of Vue.js is one of the very important functions. For the view page presented to users, it is necessary to provide the best user experience and performance, and Vue.js provides a very convenient and applicable template system, which makes it popular and welcomed by the majority of developers.

What is a template system

Any application that is written in Web or is user-oriented must have a template. Template fundamentally defines what kind of interaction form and UI style a system should face to users, and following this set of templates to design and improve functions is also the basic pattern of software development.

However, it is almost impossible to write a single page according to a template for all pages. Because a system should not have only a few static pages, with the increase of content and users, its pages should be unlimited. In order to solve this problem, there is a new technology-template engine. Through different data and content, plus a unified template (format), we can get a custom page belonging to a user or a content, which not only reduces a large amount of coding, but also greatly facilitates the possible updating of the style in the future.

Strict template engine definition is, input template characters + data to get the rendered string (page), implementation, from regular replacement to spelling string direct input, and then to AST parsing, there are a variety of ways to output page content, but the definition is similar.

If readers have learned JavaScript or other Web development languages, be sure to try or render the content of the HTML page at the back end and return to the front page to update the user page. But replacing innerHtml with rendered strings is an inefficient way to update. Such a template engine is no longer a good choice in today's pure front-end scenarios.

This is why, because the resources of the back-end server are limited, and the processing of data is superimposed with the increase in the number of users, every user operation and page rendering consumes server resources. a small number of user actions may not cause server stutters, but when there are thousands or more users It is possible that the network request alone will make the server unresponsive or even down (see Spring Festival travel). If you put the rendering of the page on the user side (front end), there is only one user, and the rendering time of tens of milliseconds is not a bottleneck compared with the request delay at all, so it can not only improve the user experience, but also reduce the pressure on the server.

Vue.js as a MVVM-type framework, Vue.js uses a data-driven view binding engine, through the bind status of the front and back end, known back-end data updates, front-end related display will also be changed at the same time.

Vue.js provides users with such a powerful template system, which is one of the reasons why front-end frameworks such as Vue.js are so popular.

There are several reasons why templates should be used.

1. The front-end template engine should be responsible for XSS prevention.

2. The front-end template engine should support the reuse of fragments

3. The front-end template engine should support the processing of data output.

4. The front-end template engine should support dynamic data

5. The front-end template engine should be closely integrated with the asynchronous process.

II. Vue.js template syntax

Vue.js uses HTML-based template syntax, which allows developers to declaratively bind DOM to the underlying Vue.js instance data.

Vue.js is a system that allows developers to use concise template syntax to declaratively render data into DOM.

Combined with the response system, when the application state changes, Vue.js can intelligently calculate the minimum cost of re-rendering components and apply it to DOM operations.

2.1, text output

The most common form of data binding is text interpolation using Mustack syntax (double curly braces), as follows:

Message: {{msg}} this will not change: {{msg}}

Whenever the msg property on the bound data object changes, the content at the interpolation is updated. But through the v-once instruction, developers can also interpolate at one time.

2.2.Pure HTML output

Double curly braces interpret the data as plain text, not HTML code. To output real HTML code, developers need to use the v-html directive:

The contents of this div will be replaced with the attribute value rawHtml, and the data binding in the parsing attribute value will be ignored as a HTML. Developers cannot use v-html to composite local templates because Vue.js is not a string-based template engine. On the other hand, for the user interface (UI), components are better suited as the basic units of reusability and composition.

Direct output mode: {{msg}} output mode after parsing: export default {data () {return {msg: 'helloWorld'}

2.3.The JavaScript expression

Both Vue.js provide support for JavaScript expressions.

{{number + 1}} {{ok?'YES':'NO'}} {{message.split ('') .reverse () .join ('')}}

Complete code:

Number 1: number 2: shows the JavaScript expression. The number you enter adds to {{parseInt (int1) + parseInt (int2)}} export default {data () {return {int1: 0, int2: 0}

Note: each binding can only contain a single expression, so the following examples will not take effect.

{{var a = 1}} {{if (ok) {return message}

2.4, instruction parameters

An Directives is a special attribute with a v-prefix. The value of the instruction property is expected to be a single JavaScript expression (v-for is an exception). The duty of the instruction is to act responsively on the DOM when the value of the expression changes. such as

It's showing up now!

Some instructions can receive a parameter, followed by a colon after the instruction name. For example, v-bind: used to update the html property in response:

V-on: it is used to listen for DOM events:

The modifier (Modifiers) is a special suffix indicated by a half-width period (.) to indicate that an instruction should be bound in a special way.

For example, the prevent modifier tells the v-on instruction to call event.preventDefault () for the triggered event.

III. Computational attributes and observer attributes

In order to make the content of the template cleaner and cleaner without affecting the availability of code and content, Vue.js proposes computational properties and observers.

3.1. Calculation attribute

Expressions within templates are very convenient, but such expressions are actually mostly used for simple operations. Because putting too much logic in the template can make the template overweight and difficult to maintain.

It is also different from it in that it has a "caching" effect. Accessing the calculation property several times will immediately return the previous calculation result, rather than executing the function again.

By default, only getter methods are available for calculating properties, but developers can also provide setter methods when needed.

Attribute: {get:function () {}, set:function (newValue) {dosomething}}

3.2. Observation attribute

Watch: {'attribute': function (par) {dosomething}} the answer to the question on how to use the vuejs template is shared here. I hope the above content can be of some help to everyone. If you still have a lot of doubts to be solved, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.