Rendering: Get the back-end data, load it into the written template according to certain rules, and output it as HTML.vue.js displayed in the browser is the template rendering performed in the front-end (that is, in the browser).
Front-end and back-end rendering comparison
Backend: 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 to generate HTML, which is then transmitted to the user's browser through the network, and then parsed by the browser into a visible page.
Front-end: Combine data and HTML templates with JS in the browser.
The advantages of front-end rendering are:
1. Business separation, the backend only needs to provide data interfaces, and the frontend does not need to deploy the corresponding backend environment during development. Through some proxy server tools, you can remotely go to the backend data for development, which can improve development efficiency.
2. The amount of calculation is transferred, and the tasks that originally required back-end rendering are transferred to the front-end, reducing the pressure on the server.
Advantages of backend rendering
1. Search engine friendly.
2. The loading time of the home page is short. After the back-end rendering is loaded, the HTML is displayed directly, but the front-end rendering needs a period of js rendering time after the loading is completed.
conditional rendering
1.v-if/v-else
According to the data value, it is judged whether to output the DOM node and the contained child elements.
<div v-if="yes">yes</div> //若当前vm实例中包含data.yes = true，则模板引擎将会编译这个DOM节点，输出<div>yes</div>
<div v-if="yes">yes</div>
<div v-else>no</div>
//注：v-else必须紧跟v-if使用。
v-if绑定的元素包含子元素则不影响和v-else的使用。
<div v-if="yes">
<div v-if="inner">inner</div>
<div v-else>not inner </div>
</div>
<div v-else>no</div>
new Vue({
data: {
yes: true,
inner :false
}
})The output is:
<div>
<div>not inner</div>
</div>2.v-show
<div v-show="show">show</div>
<div v-show="show">show</div>
<div v-else>hidden</div>Note: v-show elements, regardless of the binding value of true or false, are rendered and remain in the DOM. A change in the binding value will only toggle the element's css property display. v-if element, the page will not display the tag.
3.v-if vs v-show
1. When v-if is switched, the DOM operation level is changed. v-show only changes in 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/unloading process, because the template in v-if may also include data binding or subcomponents. v-show will still operate normally, 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 select the appropriate command according to 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 its internal sub-elements according to the received array, and can obtain the data in the array and render it to the node by setting the 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: '#app',
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, item is an alias, you can get each element of the current array traversal through item.
v-for has a built-in $index variable that 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 aliases 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 the view update can be triggered when the array is changed, but the view update cannot be triggered in the following two cases:
1. Directly modify the array elements by index, for example: vm .items[0] = {title:'title-changed'};
2. The length of the "modified array" cannot be directly modified, for example: vm.items.length = 0
For the first case, Vue.js provides the $set method to update 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 the list is rendered, determine the unique identifier id in the array. Set a unique identifier for the array by trace-by. Vue.js will reuse the original object scope and DOM elements as much as possible during the rendering process.
<li v-for="item in items" track-by="_id"></div>v-for traverses the object, you can access the built-in variable $key in the scope, or you can use the (key, value) form to customize the key variable.
<li v-for="(key,value) in objectDemo">
{{ key }} - {{ $key }} : {{ value }}
</li>
var vm = new Vue({
el:'#app',
data: {
objectDemo : {
a:'a-value',
b:'b-value',
c:'c-value'
}
}
})v-for can accept a single integer, which is used as the number of loops:
<li v-for="n in 5">{{ n }}</li>template tag usage
Apply the directive to the template tag, but it will not be present in the final render.
<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>From blog: https://www.cnblogs.com/xiaoguo1210/p/7375770.html