How Vue.js implements template rendering in the browser

This article introduces how Vue.js implements template rendering in the browser. It has certain reference value. Now I share it with you. Friends in need can refer to it

Rendering: Obtain the back-end data, load it into the written template according to certain rules, and output it into HTML displayed in the browser. vue.js is a template rendering performed on the front-end (that is, within the browser).

Comparison of front-end and back-end rendering

Back-end: Rendering is performed on the server side. After the server process obtains data from the database, it uses the front-end template engine to load the data. HTML is generated, then transmitted to the user's browser through the network, and then parsed into visible pages by the browser.

Front-end: Use JS to combine data and HTML templates in the browser.

The advantages of front-end rendering are:

#1. Business separation, the back-end only needs to provide a data interface, and the front-end does not need it during development Deploy the corresponding back-end environment, and use some proxy server tools to remotely access the back-end data for development, which can improve development efficiency.
2. The amount of calculation is transferred. The tasks that originally required back-end rendering are transferred to the front-end, reducing the pressure on the server.

Advantages of back-end rendering

1. Friendly to search engines.
2. The loading time of the home page is short. The HTML will be displayed directly after the back-end rendering is loaded, but the front-end rendering still needs some js rendering time after the loading is completed.

Conditional rendering

1.v-if/v-else

Determine whether to output the DOM node based on the data value, and Contains child elements.

    <p v-if="yes">yes</p> //若当前vm实例中包含data.yes = true，则模板引擎将会编译这个DOM节点，输出<p>yes</p>
    <p v-if="yes">yes</p>
    <p v-else>no</p>    //注：v-else必须紧跟v-if使用。v-if绑定的元素包含子元素则不影响和v-else的使用。

    <p v-if="yes">
        <p v-if="inner">inner</p>
        <p v-else>not inner </p>
    </p>
    <p v-else>no</p>    new Vue({
        data: {
            yes: true,
            inner :false
        }
    })

The output result is:

    <p>
        <p>not inner</p>
    </p>

2.v-show

    <p v-show="show">show</p>
    <p v-show="show">show</p>
    <p v-else>hidden</p>

Note: The v-show element, regardless of whether the binding value is true or false, will be rendered and Stay in the DOM. Changing the binding value only switches the element's css attribute display. v-if element, the page will not display this tag.

3.v-if vs v-show

1. When v-if is switched, the dom operation level changes. v-show only changed the style. Therefore, from the perspective of switching, v-show consumes less performance than v-if.

2. When v-if is switched, vue.js will have a partial compilation/uninstallation process, because the template in v-if may also include data binding or sub-components. v-show will still perform normal operations, and then set the css style to display: none.

In general, v-if has higher switching cost and v-show has higher initial rendering cost. Therefore, it is necessary to choose the appropriate instruction based on the actual usage scenario.

List rendering

The v-for instruction is mainly used for list rendering. It will repeatedly render the DOM element bound to v-for and the internal children according to the received array. element, and you can obtain the data in the array and render it into the node by setting an alias.

    v-for遍历数组：    <ul>
        <li v-for="item in items">
            <h3>{{ item.title}}</h3>
            <p>{{item.description}}</p>
        </li>
    </ul>
    var vm = new Vue({
        el: &#39;#app&#39;,        data: {
            items: [
                {_id:1,title:"title-1",description:"description-1"},
                {_id:2,title:"title-2",description:"description-2"},
                {_id:3,title:"title-3",description:"description-3"},
                {_id:4,title:"title-4",description:"description-4"},            ]
        }
    });

//items is the attribute name in data, and item is an alias. You can use item to get each element traversed by the current array.

v-for has a built-in $index variable, which can be called within the v-for instruction to output the index of the current array element.
In addition, we can also make our own alias for the index:

    <li v-for="(index,item) in items">{{ index }} - {{ $index }} - {{ item.title }}</li>

Note: vue.js encapsulates the native method of the array in data, so it can trigger a view update when changing the array, but the following two In this case, the view update cannot be triggered:
1. Directly modify the array elements through the index, for example: vm.items[0] = {title:'title-changed'};
2. Cannot directly modify" modification "array" length, for example: vm.items.length = 0

For the first case, Vue.js provides the $set method, which updates the view while modifying the data, which can be written as:

    vm.items.$set(0,{title:'title-changed'})  
 或者  vm.$set('items[0]',{title:'title-also-changed'});

When rendering the list, determine the unique identifier id in the array. Set a unique identifier for the array through trace-by. Vue.js will try to reuse the original object scope and DOM elements during the rendering process.

    <li v-for="item in items" track-by="_id"></p>

v-for traverses the object, and the built-in variable $key can be accessed within the scope, or the key variable can be customized in the form of (key, value).

    <li v-for="(key,value) in objectDemo">
        {{ key }} - {{ $key }} : {{ value }}    </li>
    var vm = new Vue({
        el:&#39;#app&#39;,        data: {
            objectDemo : {
                a:&#39;a-value&#39;,
                b:&#39;b-value&#39;,
                c:&#39;c-value&#39;
            }
        }
    })

v-for can accept a single integer, used as the number of loops:

    <li v-for="n in 5">{{ n }}</li>

template tag usage

Apply the command to the template tag, But it won't be included in the final rendering result.

    <template v-if="yes">
        <p>this is first dom</p>
        <p>this is second dom</p>
    </template>
    //输出结果    <p>this is first dom</p>
    <p>this is second dom</p>template标签也支持使用v-for指令，用来渲染同级的多个兄弟元素。    <template v-for="item in items">
        <p>{{ item.name }}</p>
        <p>{{ item.desc }}</p>
    </template>

Related recommendations:

##Front-end template and rendering

Detailed usage of jquery jtemplates.js template rendering engine

Design and implementation of template data separation rendering method

flask uses rendering template

WeChat Mini Program - Complex Data Structure Template Rendering

The above is the detailed content of How Vue.js implements template rendering in the browser. For more information, please follow other related articles on the PHP Chinese website!