Vue.js ist derzeit eine sehr beliebte JavaScript-MVVM-Bibliothek. Sie basiert auf datengesteuerten und komponentenbasierten Ideen. Im Vergleich zu Angular.js bietet Vue.js eine einfachere und leichter verständliche API, die uns einen schnellen Einstieg und die Verwendung von Vue.js ermöglicht. Der folgende Artikel führt Sie hauptsächlich in die relevante Zusammenfassung der Verwendung von vue.js ein. Freunde in Not können darauf verweisen.
1. Vue.js-Komponente
vue.js wird zum Erstellen von Komponenten verwendet
Vue.component('componentName',{ /*component*/ });
Hier ist zu beachten, dass die Komponente registriert werden muss vor der Verwendung, das heißt:
Vue.component('mine',{ template:'#mineTpl', props:['name','title','city','content'] }); var v=new Vue({ el:'#vueInstance', data:{ name:'zhang', title:'this is title', city:'Beijing', content:'these are some desc about Blog' } });
Wenn es umgekehrt ist, wird ein Fehler gemeldet, da dies bedeutet, dass die Komponente zuerst verwendet wird, die Komponente jedoch nicht registriert ist.
Nachdem Webpack einen Fehler gemeldet hat, verwenden Sie webpack --display-error-details zur Fehlerbehebung
2. Befehl keep-alive
Wie Sie beim Ansehen sehen können Die Demo In Vue-Router ist Keep-Alive geschrieben und die Bedeutung von Keep-Alive ist:
Wenn Sie die umgeschaltete Komponente im Speicher behalten, können Sie ihren Zustand beibehalten oder ein erneutes Rendern vermeiden . Zu diesem Zweck können Sie eine Keep-Alive-Anweisung hinzufügen
<component></component>
3. Wie CSS nur in der aktuellen Komponente funktioniert
In jeder Vue-Komponente können Sie definieren sein eigenes CSS, js, wenn Sie möchten, dass das in die Komponente geschriebene CSS nur Auswirkungen auf die aktuelle Komponente hat, müssen Sie nur einen Gültigkeitsbereich im Stil schreiben, das heißt:
<style></style>
4. Vuejs fügt Bilder ein eine Schleife
Wenn Sie eine Schleife schreiben, schreiben Sie den folgenden Code:
<p> <img src="/static/imghwm/default1.png" data-src="{{item.image}}" class="lazy" alt="Super umfassende Zusammenfassung der Verwendung von vue.js" > </p>
Zu diesem Zeitpunkt erscheint eine Warnung auf der Konsole
[Vue Warn]: src ="{{item.image}}": Die Interpolation im Attribut „src“ führt stattdessen zu einer 404-Anfrage. Verwenden Sie stattdessen v-bind:src. Dies bedeutet, dass die Interpolation im Attribut „src“ eine 404-Anfrage verursacht. Verwenden Sie stattdessen v-bind:src.
Also ersetzen Sie es durch Folgendes:
<p> <img src="/static/imghwm/default1.png" data-src="item.image" class="lazy" alt="Super umfassende Zusammenfassung der Verwendung von vue.js" > </p>
Hier ist der Schlüssel, v-bind kann {{}} laut offizieller Aussage nicht mehr beim Schreiben verwenden:
<a></a>
Hier ist href ein Parameter, der die v-bind-Direktive anweist, das href-Attribut des Elements an den Wert der Ausdrucks-URL zu binden. Möglicherweise ist Ihnen aufgefallen, dass Sie mit der Feature-Interpolation href="{{url}}" rel="external nofollow" das gleiche Ergebnis erzielen können: Das ist richtig, und intern wird die Feature-Interpolation tatsächlich in eine V-Bind-Bindung konvertiert.
5. Wert an ein dynamisches Attribut der Vue-Instanz binden
Für Optionsfelder, Kontrollkästchen und Auswahlfeldoptionen ist der an das V-Modell gebundene Wert normalerweise eine statische Zeichenfolge ( für Kontrollkästchen ist es ein logischer Wert):
<!-- `toggle` 为 true 或 false --> <input>
Aber manchmal möchten Sie den Wert an ein dynamisches Attribut der Vue-Instanz binden. In diesem Fall können Sie v-bind verwenden, um dies zu erreichen , und dieses Attribut Der Wert von darf keine Zeichenfolge sein. Binden Sie beispielsweise den Wert von Checkbox an ein dynamisches Attribut der Vue-Instanz:
<input> <p>{{toggle}}</p>
Nach der Bindung hier bedeutet dies nicht, dass Sie nach dem Klicken von true und false zu a und b wechseln können, weil Die hier definierten dynamischen a und b sind a und b im Bereich und können zu diesem Zeitpunkt nicht direkt angezeigt werden,
//当选中时 vm.toggle === vm.a //当没选中时 vm.toggle === vm.b
, daher müssen a und b zu diesem Zeitpunkt in den Daten definiert werden ist:
new Vue({ el:'...', data:{ a:'a', b:'b' } });
6. Fragmentinstanz
Die folgenden Situationen verwandeln die Instanz in eine Fragmentinstanz:
Die Vorlage enthält mehrere Elemente der obersten Ebene.
Die Vorlage enthält nur normalen Text.
Die Vorlage enthält nur andere Komponenten (die anderen Komponenten können eine Fragmentinstanz sein).
Die Vorlage enthält nur eine Elementanweisung, z. B.
Der Vorlagenstammknoten verfügt über eine Flusskontrollanweisung, z. B. v-if oder v-for.
In diesen Fällen sind Instanzen mit einer unbekannten Anzahl von Elementen der obersten Ebene zulässig, die ihre DOM-Inhalte als Fragmente behandeln. Fragmentinstanzen rendern Inhalte weiterhin korrekt. Es verfügt jedoch nicht über einen Wurzelknoten und sein $el zeigt auf einen Ankerknoten, bei dem es sich um einen leeren Textknoten handelt (ein Kommentarknoten im Entwicklungsmodus).
Aber was noch wichtiger ist: Nicht-Flusskontrollanweisungen, Nicht-Prop-Attribute und Übergänge auf Komponentenelementen werden ignoriert, da kein Stammelement zum Binden vorhanden ist:
<!-- 不可以,因为没有根元素 --> <example></example> <!-- props 可以 --> <example></example> <!-- 流程控制可以,但是不能有过渡 --> <example></example>
Fragmentinstanzen können nützlich sein, aber im Allgemeinen ist es besser, einen Stammknoten für die Komponente zu haben, der sicherstellt, dass Anweisungen und Eigenschaften der Komponentenelemente korrekt übersetzt werden und die Leistung etwas besser ist.
7. Routenverschachtelung
Routenverschachtelung rendert andere Komponenten in die Komponente, anstatt die gesamte Seite zu überspringen Wenn Sie zur Seite springen möchten, müssen Sie die Seite bei der Konfiguration der Route wie folgt rendern:
var App = Vue.extend({ root }); router.start(App,'#app');
Hier registrieren Sie zunächst die Root-Komponente, um die Route zu konfigurieren gerendert, und dann wird die Stammkomponente auf dem Element gemountet, das mit #app übereinstimmt.
8. Implementieren Sie mehrere Methoden zum Anzeigen unterschiedlicher Texte entsprechend unterschiedlicher Bedingungen
v-if, v-else kann eine bedingte Auswahl realisieren, aber wenn es sich um eine mehrfache kontinuierliche bedingte Auswahl handelt, können Sie Sie müssen das berechnete Attribut verwenden, um es zu berechnen. Um beispielsweise die Zeichenfolge „leer“ anzuzeigen, wenn nichts in das Eingabefeld geschrieben wird, andernfalls den Inhalt im Eingabefeld anzuzeigen, lautet der Code wie folgt:
<p> <input> </p><h1 id="changeVaule">{{changeVaule}}</h1> new Vue({ el:'#test', data:{ changeVaule:'123' }, computed :{ changeVaule:function(){ if(this.inputValue!==''){ return this.inputValue; }else{ return 'empty'; } } } });
Vuejs-Änderungserkennungsprobleme
1. Arrays erkennen
Aufgrund von JavaScript-Einschränkungen können vuejs keine Änderungen in den folgenden Arrays erkennen:
Einstellungselemente wie vm.item[0 direkt indizieren ]={} ;
Ändern Sie die Länge der Daten, z. B. vm.item.length.
Um Problem 1 zu lösen, erweitert Vuejs das Beobachtungsarray und fügt ihm eine $set()-Methode hinzu:
// 与 `example1.items[0] = ...` 相同,但是能触发视图更新 example1.items.$set(0, { childMsg: 'Changed!'})
问题2,需要一个空数组替换items。
除了$set() ,vuejs也为观察数组添加了$remove()方法,用于从目标数组中查找并删除元素,在内部调用了splice() 。
因此,不必:
var index = this.items.indexOf(item) if (index !== -1) { this.items.splice(index, 1) }
只需:
this.items.$remove(item);
2.检测对象
受ES5的显示,Vuejs不能检测到对象属性的添加或删除。因为Vuejs在初始化时候将属性转化为getter/setter,所以属性必须在data对象才能让Vuejs转换它,才能让它是响应的,例如:
var data = { a: 1 } var vm = new Vue({ data: data }) // `vm.a` 和 `data.a` 现在是响应的 vm.b = 2 // `vm.b` 不是响应的 data.b = 2 // `data.b` 不是响应的
不过,有办法在实例创建之后添加属性并且让它是响应的。对于Vue实例,可以使用$set(key,value)实例方法:
vm.$set('b', 2) // `vm.b` 和 `data.b` 现在是响应的
对于普通数据对象,可以使用全局方法Vue.set(object, key, value) :
Vue.set(data, 'c', 3) // `vm.c` 和 `data.c` 现在是响应的
有时你想向已有对象上添加一些属性,例如使用 Object.assign() 或 _.extend() 添加属性。但是,添加到对象上的新属性不会触发更新。这时可以创建一个新的对象,包含原对象的属性和新的属性:
// 不使用 `Object.assign(this.someObject, { a: 1, b: 2 })` this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })
十、关于vuejs页面闪烁{{message}}
在vuejs指令中有v-cloak,这个指令保持在元素上直到关联实例结束编译。和CSS规则如[v-cloak]{display:none}一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。
用法如下:
[v-cloak]{ display:none; } <p>{{message}}</p>
这样
不会显示,直到编译结束
十一、关于在v-for循环时候v-model的使用
有时候需要循环生成input,用v-model绑定后,利用vuejs操作它,此时我们可以在v-model中写一个数组selected[$index] ,这样就可以给不同的input绑定不同的v-model,从而分别操作他们。这个我在demo中的dataBind.vue中用到。
十二、vuejs中过渡动画
在vuejs中,css定义动画:
.zoom-transition{ width:60%; height:auto; position: absolute; left:50%; top:50%; transform: translate(-50%,-50%); -webkit-transition: all .3s ease; transition: all .3s ease; } .zoom-enter, .zoom-leave{ width:150px; height:auto; position: absolute; left:20px; top:20px; transform: translate(0,0); }
其中动画在定的时候要注意上下对应,上面有什么,下面有什么,都要变化的,如果有不变化的,应该抽离出去,作为公共css样式,在上面的css中,如果我只写 transform: translate(-50%,-50%);而不写下面的transform: translate(0,0);则会导致上面的transform: translate(-50%,-50%);被添加到下面,认为这个是不变的。
十三、指令v-el的使用
有时候我们想就像使用jquery那样去访问一个元素,此时就可以使用v-el指令,去给这个元素注册一个索引,方便通过所属实例的$el访问这个元素。
注意
HTML不区分大小写,所以v-el:someEl将转换为全小写。可以用v-el:some-el然后设置this.$el.someEl。
示例
<span>hello</span> <span>world</span> this.$els.msg.textContent // -> "hello" this.$els.otherMsg.textContent // -> "world" this.$els.msg //-><span>hello</span>
十四、关于vuejs中使用事件名
在vuejs中,我们经常要绑定一些事件,有时候给DOM元素绑定,有时候给组件绑定。绑定事件在HTML中用v-on:click-"event" ,这时evet的名字不要出现大写,因为在1.x中不区分大小写,所以如果我们在HTML写v-on:click="myEvent"而在js中写myEvent就出错误,所以在vuejs的1.x绑定事件时候,要尽量避免使用大写字母。在2.0中没有该限制!
十五、v-if与v-show的区别
v-if直接不渲染这个DOM元素,而v-show是会渲染DOM元素,只是使用display:none隐藏,打开开发者工具可以看到该DOM
十六、关于transition全局钩子如何在组件中使用
Vue.transition是定义一个全局transition钩子的,如果想针对组件定义,则需要如下写法:
export default{ transition:{ 'fade':{ enter() {}, leave() {} } } }
这样fade这个过度钩子只会作用于组件内,如果同时有同名的全局钩子,则会优先使用组建定义的
十七、利用vue-router如何实现组件在渲染出来前执行某个事件
export default{ data(){ return{ selected:0, currentView:'view_0' } }, methods:{ choose(index) { this.selected=index; this.currentView='view_'+index; } }, route:{ data() { /*每次切换路由,在渲染出页面前都会执行*/ } } }
更多超全面的vue.js使用总结相关文章请关注PHP中文网!
相关文章:

Zu den Hauptanwendungen von JavaScript in der Webentwicklung gehören die Interaktion der Clients, die Formüberprüfung und die asynchrone Kommunikation. 1) Dynamisches Inhaltsaktualisierung und Benutzerinteraktion durch DOM -Operationen; 2) Die Kundenüberprüfung erfolgt vor dem Einreichung von Daten, um die Benutzererfahrung zu verbessern. 3) Die Aktualisierung der Kommunikation mit dem Server wird durch AJAX -Technologie erreicht.

Es ist für Entwickler wichtig, zu verstehen, wie die JavaScript -Engine intern funktioniert, da sie effizientere Code schreibt und Leistungs Engpässe und Optimierungsstrategien verstehen kann. 1) Der Workflow der Engine umfasst drei Phasen: Parsen, Kompilieren und Ausführung; 2) Während des Ausführungsprozesses führt die Engine dynamische Optimierung durch, wie z. B. Inline -Cache und versteckte Klassen. 3) Zu Best Practices gehören die Vermeidung globaler Variablen, die Optimierung von Schleifen, die Verwendung von const und lass und die Vermeidung übermäßiger Verwendung von Schließungen.

Python eignet sich besser für Anfänger mit einer reibungslosen Lernkurve und einer kurzen Syntax. JavaScript ist für die Front-End-Entwicklung mit einer steilen Lernkurve und einer flexiblen Syntax geeignet. 1. Python-Syntax ist intuitiv und für die Entwicklung von Datenwissenschaften und Back-End-Entwicklung geeignet. 2. JavaScript ist flexibel und in Front-End- und serverseitiger Programmierung weit verbreitet.

Python und JavaScript haben ihre eigenen Vor- und Nachteile in Bezug auf Gemeinschaft, Bibliotheken und Ressourcen. 1) Die Python-Community ist freundlich und für Anfänger geeignet, aber die Front-End-Entwicklungsressourcen sind nicht so reich wie JavaScript. 2) Python ist leistungsstark in Bibliotheken für Datenwissenschaft und maschinelles Lernen, während JavaScript in Bibliotheken und Front-End-Entwicklungsbibliotheken und Frameworks besser ist. 3) Beide haben reichhaltige Lernressourcen, aber Python eignet sich zum Beginn der offiziellen Dokumente, während JavaScript mit Mdnwebdocs besser ist. Die Wahl sollte auf Projektbedürfnissen und persönlichen Interessen beruhen.

Die Verschiebung von C/C zu JavaScript erfordert die Anpassung an dynamische Typisierung, Müllsammlung und asynchrone Programmierung. 1) C/C ist eine statisch typisierte Sprache, die eine manuelle Speicherverwaltung erfordert, während JavaScript dynamisch eingegeben und die Müllsammlung automatisch verarbeitet wird. 2) C/C muss in den Maschinencode kompiliert werden, während JavaScript eine interpretierte Sprache ist. 3) JavaScript führt Konzepte wie Verschlüsse, Prototypketten und Versprechen ein, die die Flexibilität und asynchrone Programmierfunktionen verbessern.

Unterschiedliche JavaScript -Motoren haben unterschiedliche Auswirkungen beim Analysieren und Ausführen von JavaScript -Code, da sich die Implementierungsprinzipien und Optimierungsstrategien jeder Engine unterscheiden. 1. Lexikalanalyse: Quellcode in die lexikalische Einheit umwandeln. 2. Grammatikanalyse: Erzeugen Sie einen abstrakten Syntaxbaum. 3. Optimierung und Kompilierung: Generieren Sie den Maschinencode über den JIT -Compiler. 4. Führen Sie aus: Führen Sie den Maschinencode aus. V8 Engine optimiert durch sofortige Kompilierung und versteckte Klasse.

Zu den Anwendungen von JavaScript in der realen Welt gehören die serverseitige Programmierung, die Entwicklung mobiler Anwendungen und das Internet der Dinge. Die serverseitige Programmierung wird über node.js realisiert, die für die hohe gleichzeitige Anfrageverarbeitung geeignet sind. 2. Die Entwicklung der mobilen Anwendungen erfolgt durch reaktnative und unterstützt die plattformübergreifende Bereitstellung. 3.. Wird für die Steuerung von IoT-Geräten über die Johnny-Five-Bibliothek verwendet, geeignet für Hardware-Interaktion.

Ich habe eine funktionale SaaS-Anwendung mit mehreren Mandanten (eine EdTech-App) mit Ihrem täglichen Tech-Tool erstellt und Sie können dasselbe tun. Was ist eine SaaS-Anwendung mit mehreren Mietern? Mit Multi-Tenant-SaaS-Anwendungen können Sie mehrere Kunden aus einem Sing bedienen


Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Sicherer Prüfungsbrowser
Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.

WebStorm-Mac-Version
Nützliche JavaScript-Entwicklungstools

SAP NetWeaver Server-Adapter für Eclipse
Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

MinGW – Minimalistisches GNU für Windows
Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.

Herunterladen der Mac-Version des Atom-Editors
Der beliebteste Open-Source-Editor