Heim > Artikel > Web-Frontend > Wozu dient die VueJS-Vorlage?
Wozu dient die VueJS-Vorlage?
- 青灯夜游Original
- 2021-09-18 18:49:461712Durchsuche
vuejs-Vorlage legt im Wesentlichen die Interaktionsform und den UI-Stil fest, mit denen ein System Benutzern gegenübertreten soll, und folgt diesem Satz von Vorlagen, um seine Funktionen zu entwerfen und zu verbessern: 1. Verantwortlich für die Verhinderung von XSS; 2. Unterstützung der Wiederverwendung von Fragmenten 3. Unterstützung der Datenausgabeverarbeitung; 4. Unterstützung dynamischer Daten; 5. Enge Integration mit asynchronen Prozessen.
Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.
Da es sich bei Vue.js um eine Technologie handelt, die auf der Ansichtsebene basiert, ist das Vorlagensystem von Vue.js eine der sehr wichtigen Funktionen. Für die dem Benutzer angezeigte Ansichtsseite ist es notwendig, die beste Benutzererfahrung und Leistung bereitzustellen, und Vue.js bietet ein sehr praktisches und anwendbares Vorlagensystem, was es bei Entwicklern beliebt und beliebt macht.
1. Was ist ein Vorlagensystem?
Jede Anwendung, die zum Schreiben im Web oder für benutzerorientierte Anwendungen verwendet wird, muss über Vorlagen verfügen. Vorlagen legen im Wesentlichen die Interaktionsform und den UI-Stil fest, mit denen ein System Benutzern gegenübertreten soll, und die Befolgung dieser Vorlagen zum Entwerfen und Verbessern von Funktionen ist auch das Grundmuster der Softwareentwicklung.
Allerdings ist es fast unmöglich, basierend auf der Vorlage eine einzige Seite für alle Seiten zu schreiben. Denn ein System sollte nicht nur über ein paar statische Seiten verfügen, sondern seine Seiten sollten mit zunehmendem Inhalt und steigenden Nutzerzahlen unendlich groß sein. Um dieses Problem zu lösen, wurde eine neue Technologie entwickelt – die Template Engine. Durch unterschiedliche Daten und Inhalte sowie eine einheitliche Vorlage (Format) können Sie eine benutzerdefinierte Seite eines Benutzers oder eines Inhalts erhalten, was nicht nur viel Codierung reduziert, sondern auch zukünftige Stilaktualisierungen erheblich erleichtert.
Die Definition einer strikten Vorlagen-Engine besteht darin, Vorlagenzeichen + Daten einzugeben und eine gerenderte Zeichenfolge (Seite) zu erhalten. In der Implementierung gibt es verschiedene Ausgaben, von der regulären Ersetzung über die direkte Eingabe von Rechtschreibzeichenfolgen bis hin zur AST-Analyse sie sind alle gleich.
Wenn Leser JavaScript oder andere Webentwicklungssprachen gelernt haben, müssen sie versuchen, den HTML-Seiteninhalt im Backend zu rendern und an die Front-End-Seite zurückzugeben, um die Benutzerseite zu aktualisieren. Das Ersetzen von innerHtml durch die gerenderte Zeichenfolge ist jedoch eine sehr ineffiziente Aktualisierungsmethode. Eine solche Template-Engine ist im heutigen reinen Frontend-Szenario keine gute Wahl mehr.
Warum ist das so? Weil die Ressourcen des Back-End-Servers begrenzt sind und die Verarbeitung von Daten mit zunehmender Benutzerzahl und Seitenrendering zunimmt führt möglicherweise nicht zum Einfrieren des Servers, aber wenn es Tausende oder mehr Benutzer gibt, können Netzwerkanfragen allein dazu führen, dass der Server nicht mehr reagiert oder sogar abstürzt (siehe Spring Festival Transport). Und wenn das Rendern der Seite auf der Benutzerseite (Front-End) erfolgt und es nur einen Benutzer gibt, stellt die Renderzeit von mehreren zehn Millisekunden im Vergleich zur Anforderungsverzögerung überhaupt keinen Engpass dar, sodass dies nicht der Fall ist Verbessern Sie das Benutzererlebnis, reduzieren Sie aber auch den Druck auf den Server.
Vue.js ist ein MVVM-Framework. Vue.js verwendet eine datengesteuerte Ansichtsbindungs-Engine. Durch den Bindungsstatus des Front-Ends und des Back-Ends ist bekannt, dass die Daten des Back-Ends aktualisiert werden Gleichzeitig werden auch die Anzeigen des Frontends geändert.
Vue.js bietet Benutzern ein so leistungsstarkes Vorlagensystem, was einer der Gründe ist, warum Front-End-Frameworks wie Vue.js so beliebt sind.
Die Gründe, warum Sie Vorlagen verwenden sollten, sind wie folgt: 1. Die Front-End-Vorlagen-Engine muss für die Verhinderung von XSS verantwortlich sein. 2
3. Die Frontend-Vorlagen-Engine muss die Verarbeitung von Daten unterstützen 5 Prozesse; 2. Vue.js-VorlagensyntaxVue.js ist ein System, das es Entwicklern ermöglicht, Daten mithilfe einer prägnanten Vorlagensyntax deklarativ in das DOM zu rendern.Vue.js verwendet HTML-basierte Vorlagensyntax, die es Entwicklern ermöglicht, das DOM deklarativ an die zugrunde liegenden Vue.js-Instanzdaten zu binden.
In Kombination mit dem Antwortsystem kann Vue.js bei einer Änderung des Anwendungsstatus die Mindestkosten für das erneute Rendern der Komponente intelligent berechnen und auf DOM-Vorgänge anwenden.
2.1. Textausgabe Die häufigste Form der Datenbindung ist die Textinterpolation mit der Mustache-Syntax (doppelte geschweifte Klammern) wie folgt:<span>Message:{{ msg }}</span>
<span v-once>这个将不会改变:{{ msg }}</span>Immer wenn das msg-Attribut auf dem gebundenen Datenobjekt auftritt, wenn es geändert wird, Der Inhalt am Interpolationspunkt wird aktualisiert. Über den Befehl können Entwickler aber auch eine einmalige Interpolation durchführen.
2.2. Reine HTML-Ausgabe
v-once
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教程》
Das obige ist der detaillierte Inhalt vonWozu dient die VueJS-Vorlage?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!