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中文网!
相关文章:

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

Dieser Artikel zeigt die Frontend -Integration mit einem Backend, das durch die Genehmigung gesichert ist und eine funktionale edtech SaaS -Anwendung unter Verwendung von Next.js. erstellt. Die Frontend erfasst Benutzerberechtigungen zur Steuerung der UI-Sichtbarkeit und stellt sicher, dass API-Anfragen die Rollenbasis einhalten

JavaScript ist die Kernsprache der modernen Webentwicklung und wird für seine Vielfalt und Flexibilität häufig verwendet. 1) Front-End-Entwicklung: Erstellen Sie dynamische Webseiten und einseitige Anwendungen durch DOM-Operationen und moderne Rahmenbedingungen (wie React, Vue.js, Angular). 2) Serverseitige Entwicklung: Node.js verwendet ein nicht blockierendes E/A-Modell, um hohe Parallelitäts- und Echtzeitanwendungen zu verarbeiten. 3) Entwicklung von Mobil- und Desktop-Anwendungen: Die plattformübergreifende Entwicklung wird durch reaktnative und elektronen zur Verbesserung der Entwicklungseffizienz realisiert.

Zu den neuesten Trends im JavaScript gehören der Aufstieg von Typenkripten, die Popularität moderner Frameworks und Bibliotheken und die Anwendung der WebAssembly. Zukunftsaussichten umfassen leistungsfähigere Typsysteme, die Entwicklung des serverseitigen JavaScript, die Erweiterung der künstlichen Intelligenz und des maschinellen Lernens sowie das Potenzial von IoT und Edge Computing.

JavaScript ist der Eckpfeiler der modernen Webentwicklung. Zu den Hauptfunktionen gehören eine ereignisorientierte Programmierung, die Erzeugung der dynamischen Inhalte und die asynchrone Programmierung. 1) Ereignisgesteuerte Programmierung ermöglicht es Webseiten, sich dynamisch entsprechend den Benutzeroperationen zu ändern. 2) Die dynamische Inhaltsgenerierung ermöglicht die Anpassung der Seiteninhalte gemäß den Bedingungen. 3) Asynchrone Programmierung stellt sicher, dass die Benutzeroberfläche nicht blockiert ist. JavaScript wird häufig in der Webinteraktion, der einseitigen Anwendung und der serverseitigen Entwicklung verwendet, wodurch die Flexibilität der Benutzererfahrung und die plattformübergreifende Entwicklung erheblich verbessert wird.

Python eignet sich besser für Datenwissenschaft und maschinelles Lernen, während JavaScript besser für die Entwicklung von Front-End- und Vollstapel geeignet ist. 1. Python ist bekannt für seine prägnante Syntax- und Rich -Bibliotheks -Ökosystems und ist für die Datenanalyse und die Webentwicklung geeignet. 2. JavaScript ist der Kern der Front-End-Entwicklung. Node.js unterstützt die serverseitige Programmierung und eignet sich für die Entwicklung der Vollstapel.

JavaScript erfordert keine Installation, da es bereits in moderne Browser integriert ist. Sie benötigen nur einen Texteditor und einen Browser, um loszulegen. 1) Führen Sie sie in der Browser -Umgebung durch, indem Sie die HTML -Datei durch Tags einbetten. 2) Führen Sie die JavaScript -Datei nach dem Herunterladen und Installieren von node.js nach dem Herunterladen und Installieren der Befehlszeile aus.

So senden Sie im Voraus Aufgabenbenachrichtigungen in Quartz Wenn der Quartz -Timer eine Aufgabe plant, wird die Ausführungszeit der Aufgabe durch den Cron -Ausdruck festgelegt. Jetzt...


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

DVWA
Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software

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

EditPlus chinesische Crack-Version
Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion

Dreamweaver Mac
Visuelle Webentwicklungstools

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung