Super umfassende Zusammenfassung der Verwendung von vue.js

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 :is=&#39;curremtView&#39; keep-alive></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 scoped></style>

4. Vuejs fügt Bilder ein eine Schleife

Wenn Sie eine Schleife schreiben, schreiben Sie den folgenden Code:

<p class="bio-slide" v-for="item in items"> 
 <img src="{{item.image}}">
</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 class="bio-slide" v-for="item in items"> 
 <img v-bind:src="item.image">
</p>

Hier ist der Schlüssel, v-bind kann {{}} laut offizieller Aussage nicht mehr beim Schreiben verwenden:

<a v-bind:href="url" rel="external nofollow" ></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 type="checkbox" v-model="toggle">

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 
 type="checkbox"
 v-model="toggle"
 v-bind:true-value="a"
 v-bind:false-value="b">
<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:

1. Die Vorlage enthält mehrere Elemente der obersten Ebene.

2. Die Vorlage enthält nur normalen Text.

3. Die Vorlage enthält nur andere Komponenten (die anderen Komponenten können eine Fragmentinstanz sein).

4. Die Vorlage enthält nur eine Elementanweisung, z. B.

5. 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 v-show="ok" transition="fade"></example>
 
<!-- props 可以 -->
<example :prop="someData"></example>
 
<!-- 流程控制可以，但是不能有过渡 -->
<example v-if="ok"></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 id="test">
 <input type="text" v-model="inputValue">
 <h1>{{changeVaule}}</h1>
</p>
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 v-cloak>{{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 v-el:msg>hello</span>
<span v-el:other-msg>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中文网！

相关文章：

通过纯Vue.js构建Bootstrap组件

强大Vue.js组件详细说明

Vue.js环境搭建教程介绍