Home >Web Front-end >Vue.js >What is the use of vuejs template?
What is the use of vuejs template?
- 青灯夜游Original
- 2021-09-18 18:49:461762browse
vuejs template fundamentally stipulates the interaction form and UI style that a system should face users in, and follow this set of templates to design and improve functions; its functions are: 1. Responsible for the prevention of XSS; 2. Support the reuse of fragments; 3. Support the processing of data output; 4. Support dynamic data; 5. Closely integrate with asynchronous processes.
The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.
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 displayed to the user, it is necessary to provide the best user experience and performance, and Vue.js provides a very convenient and applicable template system, making it popular and popular among developers.
1. What is a template system
Any application used for Web writing or user-oriented must have templates. Templates fundamentally stipulate the interaction form and UI style that a system should face users with, 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 for all pages based on the template. Because a system should not only have a few static pages, but as the content and users increase, its pages should be infinite. In order to solve this problem, a new technology emerged—template engine. Through different data and content, plus a unified template (format), you can get a customized page belonging to a user or a content, which not only reduces a lot of coding, but also greatly facilitates possible future style updates. Replacement.
The definition of a strict template engine is to input template character data and obtain a rendered string (page). In implementation, from regular replacement to direct spelling string input to AST analysis, there are There are various ways to output page content, but they are all similar in definition.
If readers have learned JavaScript or other web development languages, they must try or render the HTML page content on the backend and return it to the front-end page, so as to update the user page. But replacing innerHtml with the rendered string is a very inefficient update method. Such a template engine is no longer a good choice in today's pure front-end scenario.
Why is this? Because the resources of the back-end server are limited, and the processing of data is superimposed as the number of users increases. Every operation of the user and page rendering consumes the server. Resources, a small number of user operations may not cause the server to freeze, but when there are thousands or even more users, network requests alone may cause the server to become unresponsive or even crash (refer to Spring Festival travel). And if the rendering of the page is placed on the user side (front-end), and there is only one user, the rendering time of tens of milliseconds is not a bottleneck at all compared with the request delay, so it can not only improve the user experience, but also reduce the pressure on the server. .
Vue.js is an MVVM type framework. Vue.js uses a data-driven view binding engine. Through the bind status of the front and back ends, it is known that the back-end data is updated, and the front-end related displays will also change 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.
The reasons why you should use templates are as follows
1. The front-end template engine must be responsible for preventing XSS;
2. The front-end template engine must support the reuse of fragments;
3. The front-end template engine must support the processing of data output;
4. The front-end template engine must support dynamic data ;
5. The front-end template engine must be closely integrated with the asynchronous process;
2. Vue.js template syntax
Vue.js It uses HTML-based template syntax, allowing developers to declaratively bind the DOM to the underlying Vue.js instance data.
Vue.js is a system that allows developers to declaratively render data into the DOM using concise template syntax.
Combined with the response system, when the application state changes, Vue.js can intelligently calculate the minimum cost of re-rendering the component and apply it to DOM operations.
2.1. Text output
#The most common form of data binding is text interpolation using Mustache syntax (double braces), as follows:
<span>Message:{{ msg }}</span>
<span v-once>这个将不会改变:{{ msg }}</span> Whenever the msg attribute on the bound data object changes, the content at the interpolation point will be updated. But through the v-once command, developers can also perform one-time interpolation.
2.2. Pure HTML output
Double curly brackets will interpret the data as ordinary text instead of HTML code. In order to output real HTML code, developers need to use the v-html directive:
5de0f04cfff460c993d059c2702ae5a916b28748ea4df4d9c2150843fecfba68
这个div的内容将会被替换成为属性值rawHtml，直接作为HTML会忽略解析属性值中的数据绑定。开发者不能使用v-html来复合局部模板，因为Vue.js不是基于字符串的模板引擎。反之，对于用户界面（UI），组件更适合作为可重用和可组合的基本单位。
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b
2e1cf0710519d5598b1f0f14c36ba674直接输出的模式：8c1ecd4bb896b2264e0711597d40766c
dc6dce4a544fdca2df29d5ac0ea9906b{{msg}}16b28748ea4df4d9c2150843fecfba68
2e1cf0710519d5598b1f0f14c36ba674解析后输出的模式：8c1ecd4bb896b2264e0711597d40766c
cfe05ddd0349085145840ec346b4bae816b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2
3f1c4e4b6b16bbbd69b2ee476dc4f83a
export default {
data () {
return {
msg: '6d587d38616572144abecc5790e4dc77helloWorld16b28748ea4df4d9c2150843fecfba68'
}
}
}
2cacc6d41bbb37262a98f745aa00fbf0
2.3、JavaScript表达式
Vue.js都提供了JavaScript表达式支持。
{{number + 1}}
{{ok?'YES':'NO'}}
{{message.split('').reverse().join('')}}
<div v-bind:id="'list-'+ id"></div>完整代码：
<template>
<div>
<label>数字1：</label>
<input v-model="int1"/>
<br/>
<br/>
<label>数字2：</label>
<input v-model="int2"/>
<br/>
<label> 展示JavaScript表达式，您输入的数字加和为</label>
{{parseInt(int1)+parseInt(int2)}}
</div>
</template>
<script>
export default {
data () {
return {
int1: 0,
int2: 0
}
}
}
</script>注意：每个绑定都只能包含单个表达式，所以下面的例子都不会生效。
<!-- 这是语句，不是表达式 -->
{{ var a = 1}}
<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if(ok) {return message }}}2.4、指令参数
指令(Directives)是带有v-前缀的特殊属性。指令属性的值预期是单个JavaScript表达式（v-for是个例外情况）。指令的职责是当表达式的值改变是，将其产生的连带影响，响应式地作用于DOM。比如
<p v-if="seen">现在出现啦！</p>
有一些指令能够接收一个参数，在指令名称之后以冒号表示。比如v-bind:用于响应式地更新html属性：
<a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 在这里href是参数，告知v-bind指令将该元素的href属性与表达式URL的值进行绑定 -->
v-on:它用于监听DOM事件：
<a v-on:click="doSomething"> <!-- 缩写 --> <a @click="doSomething">
修饰符（Modifiers）是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault();
<form v-on:submit.prevent="onSubmit"></form>
三、计算属性和观察者属性
为了让模版的内容变得更加干净和整洁，同时不会影响代码和内容的可用性，Vue.js提出了计算属性和观察者。
3.1、计算属性
模板内的表达式非常便利，但这类表达式实际上多用于简单运算。因为在模板中放入太多的逻辑会让模板过重且难以维护。
跟它的区别还有就是有“缓存”效果，多次访问计算属性会立即返回之前的计算结果，而不是再次执行函数。
计算属性默认只有getter方法，但在需要时开发者也可以提供setter方法。
'属性':{
get:function(){},
set:function(newValue){
dosomething
}
}3.2、观察属性
watch:{
'属性':function(par){
dosomething
}
}相关推荐：《vue.js教程》
The above is the detailed content of What is the use of vuejs template?. For more information, please follow other related articles on the PHP Chinese website!