Wissenspunkte zu Vue-Interviews

Dieses Mal werde ich Ihnen einige Wissenspunkte zum Vue-Interview mitteilen. Freunde, die es brauchen, können darauf achten, es zu lernen.

[Verwandte Empfehlungen: Vue-Interviewfragen (2020)]

1. Einführung in Vue

Vue ist ein Build user Das Framework der Schnittstelle. Es handelt sich um ein leichtes MVV-Framework, das die sogenannte bidirektionale Datenbindung und komponentenbasierte Front-End-Entwicklung implementiert. Es implementiert eine reaktionsfähige Datenbindung und die Kombination von Ansichtskomponenten ist einfach zu bedienen und kompakt.

2. Installieren Sie das vue-devtools-Plugin, um das Debuggen von Vue zu erleichtern. Konfigurieren Sie, ob vue-devtools den Code überprüfen darf, um das Debuggen zu erleichtern. devtools = false;

vue.config.produktionTip=false; Verhindert den Start von Produktionsnachrichten.

3. Allgemeine Befehle.

V-Modell bidirektionale Datenbindung, im Allgemeinen für Formularelemente verwendet.

v-for führt Schleifenoperationen für Arrays oder Objekte aus. Verwenden Sie v-for anstelle von v-repeat zum Binden Zeit einstellen, Verwendung: v-on : time = 'function'

v-show/v-if wird zum Ein- oder Ausblenden von Elementen verwendet, v-show wird durch Anzeige implementiert , v- if wird nach jedem Löschen erstellt

4. Ereignisse und Attribute

v-on:click = "Abkürzung @click=" "

$event-Ereignisobjekt, das ereignisbezogene Informationen wie Ereignisquelle, Zeittyp, Offset usw. enthält.

Ereignis bubbling, Die native js-Methode basiert auf Ereignisobjekten, während die vue-Methode nicht auf Ereignisobjekten basiert. @click.stop verhindert das Bubbling von Ereignissen.

Tastaturereignisse: @keydown.13 oder Keydown. Geben Sie

Ereignismodifikator .stop ruft event.stopPropagation();

v-bind wird für die Attributbindung und Verwendung v -bind :Attribute="" Beispiel v-bind:src="" Abkürzung: src=""

Vorlage

vue .js Mithilfe der HTML-basierten Vorlagensyntax wird die Datenvorlage, die Dom an die Vue-Instanz bindet, {{}} verwendet, um Daten zu binden und auf der Seite anzuzeigen

bidirektionale Bindung V-Modell

Einzelne Bindung {{}} kann Probleme mit Flackern haben, Sie können auch V-Text V-HTML

andere Befehle verwenden v -once Daten werden gebunden, sobald v-pre nicht mutiert und direkt so angezeigt wird, wie sie sind

6. Filter

ist gewohnt Modelldaten filtern. Verarbeiten und filtern Sie Datenpaare vor der Anzeige

Syntax: {{data |.filter (parameter)}}

Integrierte Filter werden nach 2.0 gelöscht. Wenn Sie sie verwenden, können Sie Bibliotheken von Drittanbietern wie lodash data-fns, Datumsformatierung, Accounting.js, Währungsformatierung und Anpassung verwenden

7. Ajax-Anfrage senden

Vue selbst unterstützt das Senden von Ajax-Anfragen nicht, um es zu implementieren Axios verwenden

axios ist ein Promise-basierter HTTP-Anfrage-Client, der zum Senden von Anfragen verwendet wird

Grundlegende Verwendung:

axios.get(url[,options]);  传参方式，url或者params传参
axios.post(url,data,[options]);

Hinweis: Wenn Axios standardmäßig Daten sendet, ist das Datenformat die Anforderungsnutzlast und nicht das von uns verwendete Formulardatenformat. Daher müssen Parameter als Schlüsselwertobjekte übergeben werden

, Parameter können nicht im JSON-Format übergeben werden

Möglichkeiten zum Übergeben von Parametern: Spleißen Sie die Schlüssel-Wert-Paare selbst, verwenden Sie transformrequst, um die Anforderungsdaten vor dem Senden der Anforderung zu konvertieren, oder verwenden Sie qs Modul zum Konvertieren von

axios unterstützt keine domänenübergreifenden Anfragen. Sie können vue-resource verwenden, um domänenübergreifende Anfragen zu senden.

Senden Sie eine domänenübergreifende Anfrage: this.$http.get(url,[options]); this.$http.post(url,[options]);

8.vue-Lebenszyklus

Der Prozess von der Erstellung bis zur Zerstörung einer Vue-Instanz wird zum Lebenszyklus

9. Berechnete Attribute

Berechnete Attribute werden auch zum Speichern von Daten verwendet. Sie haben diese beiden Eigenschaften: Daten können logisch verarbeitet werden und die Daten in den berechneten Attributen können überwacht werden.

10.vue-Instanzeigenschaften und -methoden

Eigenschaften vm.$el vm.$data vm.$options vm.$refs

Methode vm.$mount() vm.$destroy vm.$nextTick(callback) vm.$set(object,key,vlaue) vm.$delete(object,key) vm. $watch(data,callback)

11, benutzerdefinierte Anweisung

benutzerdefinierte globale Anweisung vue.directive (Anweisungs-ID, Definitionsobjekt)

12. Übergang (Animation)

Vue bietet verschiedene Möglichkeiten, den Prozess beim Einfügen von Updates oder einem Dom anzuwenden,

Grundlegende Verwendung: Verwenden Sie die Übergangskomponente und platzieren Sie das zu animierende Element innerhalb der Komponente

Verwenden Sie es zusammen mit der Animationsbibliothek eines Drittanbieters animater.css

 <transition enter-active-class="animated fadeInLeft" leave-active-class="animated fadeOutRight">
        <p v-show="flag">显示内容</p>
    </transition>

13 .Component

Komponente ist eine der leistungsstärksten Funktionen von Vue. Komponenten können HTML-Elemente wild bekämpfen, wiederverwendeten Code kapseln und Komponenten sind benutzerdefinierte Elementobjekte.

Definieren Sie die Komponentenmethode. Erstellen Sie zunächst einen Komponentenkonstruktor und verwenden Sie dann den Komponentenkonstruktor, um die Komponente zu erstellen. b>Direkt erstellen

Um auf die Vorlage zu verweisen, wird auf den Komponenteninhalt in der Vorlage d477f9ce7bf77f53fbcf36bec1b69b7a verwiesen. Die Daten in der Komponentendatenfunktion unterscheiden sich von den in der gespeicherten Daten Vue-Instanz

componect :is="" Komponente, mehrere Komponenten verwenden denselben Hängepunkt, dynamisches Umschalten,

Keep-Alive-Cache-Komponente , Neuerstellung vermeiden, Effizienzvergleich Hoch

Nutzung 7c9485ff8c3cba5ae9343ed63c2dc3f795543a64d6150a5d6f46db7704427e2a Datenübertragung: Eltern-Kind-Komponente, in Eine Komponente definiert eine andere Komponente darin, die als Eltern-Kind-Komponente bezeichnet wird.

       子组件只能在付组件中使用，默认情况下，子组件不能访问付组件数据。每个组件的作用域是独立的。

       组件间数据的通信：在调用组件时，绑定想要获取的付组件的数据，在子组件内部，使用props选项来生命获取

的数据，接收来自付组件的数据。例子：props:['msg']   props可以是数组，也可以是对象props:{} 允许配置高级设计比如类型判断

数据的校验，设置默认值 props:{messge:String,age:Number,name:{type:String,rquired:true,default:19,validator:function(){}}},对象做数组的默认值，

对象必须使用函数返回。

组件中的数据有三种形式：data  props computed 

付组件访问子组件数据方式：

a.在子组件中使用vm.$emit（事件名，数据） 出发一个自定义事件，事件名自定义

b.付组件在使用子组件的地方监听子组件出发事件，并在付组件中定义方法，用来获取数据

单项数据流：

props是单项绑定的，当付组件的属性变化时，将传导给子组件，但是不会反过来，而且不允许子组件直接

修改付组件中的数据

解决方案： a.如果子组件享把他作为局部数据来使用，可以将数据存入另一个变量在操作

b.如果子组件想修改数据并同步付组件，使用.sync  2.3开始支持，或者将付组件数据包装成udixiang，

然后在子组件中修改对象的属性。

非父子组件间通信：

可以通过一个空的vue实例来作为中央事件总线，用他来出发事件或监控事件

var Event = new Vue();    空对象

Event.$emit(事件名，数据)；  发送数据

Event.$on(事件名，data=>{})  监听接收数据

slot内容分发：

用来获取组件中的元内容，就是组件标签中的内容；

获得指定标签内容可以给标签定义  slot="s1"   获取  f995f70ae2091cccd4738847b20f1f7b

14.vue-router 路由

使用vue.js 开发spa 单页面应用，根绝不同url地址，显示不同内容，但实现在统一页面红，称单页面应用。

bower info vue-router    cnpm install vue-router -S

<p id="itany">
<p>
<!-- 使用router-link组件来定义导航，to属性指定链接url -->
<router-link to="/home">主页</router-link>
<router-link to="/news">新闻</router-link>
</p>
<p>
<!-- router-view用来显示路由内容 -->
<router-view></router-view>
</p>
</p>

<script>
//1.定义组件
var Home={
template:&#39;<h3>我是主页</h3>&#39;
}
var News={
template:&#39;<h3>我是新闻</h3>&#39;
}

//2.配置路由
const routes=[
{path:'/home',component:Home},
{path:'/news/:username/:password'',component:News},
{path:'*',redirect:'/home'} //重定向
]

//3.创建路由实例
const router=new VueRouter({
routes, //简写，相当于routes:routes
// mode:'history', //更改模式
linkActiveClass:'active' //更新活动链接的class类名
});

//4.创建根实例并将路由挂载到Vue实例上
new Vue({
el:'#itany',
router //注入路由
});
</script>

知识点：30e8033e360bcffb1ce9b4703e10b64c /* scoped表示该样式只在当前组件中有效 */

路由嵌套和参数传递：

a.查询字符串   login?name=tome&pwd=123     显示  {{$route.query}}

b。rest风格url       regist/alice/324    显示获取 {{$router.params}}

Route-Instanzmethode:

router.push(); Route hinzufügen, die Funktion ist die gleiche wie 6a078d9a0c4b84a49fc544194c8dfb2b, beide Sprungseiten

router.replace() ersetzt die Route, genau wie die obige Funktion, es wird kein Verlaufsdatensatz generiert

Einzelne Dateikomponente:

. vue-Dateiname Die Dateikomponente ist ein benutzerdefiniertes Dateiformat von vue.js. Eine .vue-Datei ist ein separater Giftpfeil, der

separates JS-CSS-HTML

kapselt Die .vue-Datei besteht aus drei Teilen: Skript im Vorlagenstil

vue-loader Der Browser selbst erkennt Ihre .vue-Datei nicht und muss daher die .vue-Datei laden und analysieren. In diesem Fall Loaderhaiyou von vue-loaderleisi ist erforderlich

Viele, HTML-Loader CSS-Loader Style-Loader Babel-Loader Es sollte beachtet werden, dass Vue-Loader für Webpack geplant ist

Webpack ist ein Front-End-Ressourcenmodullader und Verpackungstool,

Zugehörige Vorlagen installieren:

cnpm install vue-template-compiler -D //Vorkompilierte Vorlage
Zusammenführen: cnpm install -D webpack webpack-dev-server vue-loader vue- html-loader css-loader vue-style-loader file-loader babel-loader babel-core babel-preset-env vue-template-compiler

Führen Sie den Test aus: npm run dev

15. Gerüst vue-cli

vue-cli ist ein Vue-Gerüst, mit dem das Projekt schnell erstellt werden kann Struktur,

Gemeinsame Projektvorlagen: Webpack garantiert die Überprüfung der EsLint-Codespezifikation und Unit-Unit-Tests,

Webpack-simple verfügt über keine Codeprüfung und Einheit Testen

browserify wird auch häufig verwendet

browserigy-simple

Installieren Sie vue-cli und konfigurieren Sie die Vue-Befehlsumgebung
cnpm install vue-cli -g
vue --version
vue list
Initialisieren Sie das Projekt und generieren Sie die Projektvorlage
Syntax: vue init template name project name
Geben Sie das generierte Projekt ein Verzeichnis und installieren Sie das Modulpaket
cd vue-cli-demo
cnpm install
Ausführen
npm run dev //Starten Sie den Testdienst
npm run build //Packen Sie das Projekt und geben Sie es aus dist-Verzeichnis. Wenn das Projekt online ist, kopieren Sie das dist-Verzeichnis auf den Server
Webpack-Vorlage verwenden
vue init webpack vue-cli-demo2
ESLint ist ein Tool zur Vereinheitlichung von Codespezifikationen und -stilen, z Einrückungen, Leerzeichen, Symbole usw. Die Anforderungen sind relativ streng
16. Modulare Entwicklung

Erstellen Sie zunächst ein Projekt in einem Verzeichnis vue init webpack-simple vue-cli-demo

Geben Sie das Verzeichnis cd vue-cli-demo cmpn install ein und führen Sie dann npm run dev aus. Führen Sie test aus

cmpn install vue-router -S -S bedeutet Produktionsabhängigkeit;

Edit main .js import VueRouter form ''vue-router' vue.use(Vue/ router); Nach der Verwendung können Sie app.vue und router.config, js

bearbeiten cnpm install axios -S

Es gibt zwei Möglichkeiten, axios zu verwenden:

a. In Komponenten, die Axios verwenden, muss Axios aus 'axios' axios.get('url').then(resp ->{resp.data}) eingeführt werden. .catch(eorr->){}

b. Importieren Sie Axios aus „axios“ in main.js und fügen Sie es dem Vue-Prototyp vue.prototype.$http=axios hinzu

vue.$http.get(); oder this.$http.get();

Ereignisse für benutzerdefinierte Komponenten hinzufügen:

Für Wenn Sie beispielsweise eine Schaltflächen-Vue-Registrierung anpassen, kann @click=send nicht standardmäßig gebunden werden. Wenn Sie @click.ntaive=send schreiben, können Sie

17ui-Bibliothekselement-UI

ist eine UI-Komponentenbibliothek, die auf Vue 2.0 basiert und von Ele.me bereitgestellt wird. Sie kann schnell URLs entwickeln und die Effizienz verbessern.

UI-Element auf der PC-Seite von Mintui Mobile. eleme.io

cnpm install element-ui -S

npm run dev

Führen Sie diese Komponente in main.js ein und verwenden Sie sie. Importieren Sie ElementUI aus dem Importelement „elemtn-ui“. -ui/lib/eheme=default/ index.css

vue.use(ElementUI); Diese Einführungsmethode dient zur Einführung des gesamten Komponenteninhalts

Loader im webpack.confgi.js-Test hinzufügen: /.css$/,loader :'style-loader!css-loader'

cnpm instal style-loader -D Schriftart-Font-Loader-Konfiguration

Webpack-Konfigurationsänderungen neu starten

Der dynamische Stil besteht darin, less zu verwenden

Weniger verwenden, um den Loader weniger zu installieren less-loader configure test:/.less$/,loader:less-loader Stil angeben l ang=less Der Stil muss angegeben werden

Benutzerdefinierte globale Komponente:

Globale Komponente: Sie können vue.use in main.js verwenden, um den globalen Import einzugeben, und dann

verwenden um es in anderen Komponenten zu erstellen. Vue-Komponente, index.js-Datei erstellen, Login von „./Login.vue“ importieren
Standard exportieren {
install:function(Vue){
Vue .component('Login',Login);
}
}

Gewöhnliche Komponenten: müssen jedes Mal eingeführt werden, z. B. Axios

18.vuex-Statusverwaltungsmodus

Verwendet einen zentralen Speicher, um den Status aller Komponenten der Anwendung zu verwalten. Einfach ausgedrückt ähnelt die zentralisierte Datenverwaltung Redux in React. Basierend auf dem Flux-Front-End-State-Management-Framework.

Grundlegende Verwendung: nmp install vuex -S

Store.js-Datei erstellen, vuex-bezogene Konfiguration. In main.js importieren, Store aus Vue importieren >

Vuex-Kernspeicher entspricht einem Container. Eine Speicherinstanz enthält die folgenden Attribute und Methoden:

Getter Attribute abrufen

Aktionen Methoden definieren Aktionen, z. B. Prozessbeurteilung Asynchrone Anforderungen const action={Methodenname (Kontext){})} Kontextobjekt hat Commit-Dispatch-Status

Commit bedeutet Übermittlung, die einzige Möglichkeit, Daten zu ändern, conmit('add) übermittelt eine Änderung namens add

Mutationen definieren Änderungen

var state= { count:6} //Store-Objekt erstellen const store=new Vuex.Store{{state}}; Standardspeicher exportieren;

App bearbeiten. js edit store, als berechnetes Attribut: berechnet:(){return this.$store.state.count};

Methode eins this.#store access Methode zwei mapGetters mapActios access

mapGetter get Attribute

mapActions Get method

Hilfsfunktion importieren, {mapGetter} aus vuex importieren

computed:mapGetters{('count')}

Das obige ist der detaillierte Inhalt vonWissenspunkte zu Vue-Interviews. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!