In our last article, we talked about how to display data from Vue instances into a view, and we used our templates very briefly. Templates have many other features as well. Today we’ll look at some other features of templates.

Template syntax

The templates in Vue are htML-based template syntax. All Vue templates are legal HTML, so they can be parsed by standards-compliant browsers and HTML parsers. This is also very much in line with Vue’s ease of use to reduce learning costs for developers.

At the bottom of the implementation, Vue compiles templates into virtual DOM rendering functions. Combined with a responsive system, Vue can intelligently calculate how many components need to be rerendered and minimize DOM operations.

But if you’re a React developer or if you’re familiar with the virtual DOM and prefer native Javascript, you can skip the templates altogether and use render or JSX syntax instead.

<div id="root"> < h1 > super handsome {{name}} < / h1 > < / div > < script > var = new vm Vue ({el:'#root',
        data: {
            name: 'Modeng'}}); </script>Copy the code

You can see where we’re going with the most common form of data binding in the template known as “Mustache” syntax, where the tag is replaced by the corresponding attribute in the data, and the attribute of the bound object changes, and the content of the difference changes in response.

Mustache is Chinese for “Mustache,” but {{}} doesn’t look like one to me either. I don’t know how you came up with the name.

One might wonder if Mustache syntax can also bind attributes of HTML elements.

<h1 id="{{id}}"></h1>
Copy the code

You can’t do that here, Mustache syntax can’t be used to bind attributes of an HTML element, so if we need to bind attributes of an element, Vue gives us an instruction method called V-bind that we can use to bind attributes of an element.

It says that the content of the binding will be replaced as long as we modify the data we bind. However, Vue provides us with a directive to change this feature. We can use the V-once directive to keep our content from being replaced when the data changes.

expression

Not only can we do simple data binding in templates, we can also do simple Javascript expressions in templates.

<div id="root"</h1> </div> <script> var vm = new Vue({el:'#root',
        data: {
            name: 'Modeng',
            age: 14
        }
    });
</script>
Copy the code

+, -, *, and/are supported. In addition to the operations, we can also use ternary expressions so let’s look at an example

<div id="root"{{name}} {{realAge > 18?'not' : 'is'{{name}} {{fakeAge > 18?'not' : 'is'</h1> </div> <script> var vm = new Vue({el:'#root',
        data: {
            name: 'Modeng',
            realAge: 14,
            fakeAge: 20
        }
    });
</script>
Copy the code

Since we are using triadic expressions we certainly think of the if statement, but Vue only provides us with simpler expressions (single expressions) to use in templates. If your logic is more complex, you should not do it in templates, but in our instance methods.

Let’s continue with an example of how we can use it for character inversion.

<div id="root">
    <h1>{{ name }} </h1>
    <h1>{{ name.split("").reverse().join("") }} </h1>
</div>
<script>
    var vm = new Vue({
        el: '#root',
        data: {
            name: 'Modeng'}}); </script>Copy the code

You can see that Mustache syntax is very powerful, and that we only use one aspect of the above expression, and you can use it in many ways.

In addition to using Mustache syntax ({{}}) to insert data into a template, you can also use two instructions v-text and V-html for data-to-insert.

When we use templates, we don’t just insert data and sometimes we do template rendering according to certain conditions, so we can use V-if and V-show, and not only that, but we do a lot of list and template loops and we use the V-for directive. We will talk about these in a later chapter.

Template rendering

As we mentioned at the beginning of this article, the Vue template is HTML-based, and we can also use the virtual DOM and JSX syntax.

From the above figure, we can see the entire rendering process of Vue template. First, our template is compiled into AST (Abstract syntax tree), and then the AST generates the rendering function, which generates the Virtual DOM tree by combining the data. The new UI is then generated by diff and path to the Virtual DOM

conclusion

This article focuses on template syntax, which can be used not only to insert data into templates, but also to perform simple expression calculations. We also briefly described the whole process of template compilation. Of course, there are a lot of details in the template rendering process that we haven’t explained, but it doesn’t affect our project development and use of Vue at all. If you are very interested in the details of the whole rendering, you can also feel confident to refer to the materials for understanding.

This article was originally published on wechat official account: Modeng. Follow and reply “1024” to receive the programmer package