Detaillierte Beschreibung der leistungsstarken Vue.js-Komponenten

In diesem Artikel wird hauptsächlich die detaillierte Beschreibung der leistungsstarken Vue.js-Komponenten vorgestellt.Js-Komponenten sind eine der leistungsstärksten Funktionen von Vue.js.Was sind Komponenten: Komponenten sind eine der leistungsstärksten Funktionen von Vue.js. Komponenten können das HTML-Element erweitern, um wiederverwendbaren Code zu kapseln. Auf hoher Ebene ist eine Komponente ein selbstdefiniertes -Element, dem der Compiler von Vue.js spezielle Funktionen hinzufügt. Teilweise können Komponenten auch in Form von nativen HTML-Elementen vorliegen, erweitert um das Attribut is. Wie registriere ich eine Komponente? Sie müssen die Methode Vue.extend verwenden, um eine Komponente zu erstellen, und dann die Methode Vue.component verwenden, um die Komponente zu registrieren. Das Format der Vue.extend-Methode ist wie folgt: Wenn Sie diese erstellte Komponente an anderer Stelle verwenden möchten, müssen Sie die Komponente benennen: Vue.component ('my -component', MyComponent) Nachdem Sie es benannt haben, können Sie den Komponentennamen im HTML-Tag verwenden, genau wie bei der Verwendung eines DOM-Elements. Werfen wir einen Blick auf ein vollständiges Beispiel für die Registrierung und Verwendung von Komponenten. HTML-Code: JS-Code: Ausgabeergebnis: Verschachtelte KomponentenDie Komponente selbst kann auch Komponenten enthalten. Die übergeordnete Komponente unten enthält eine Komponente mit dem Namen untergeordnete Komponente, diese Komponente kann jedoch nur von der übergeordneten Komponente verwendet werden: Der obige Definitionsprozess ist relativ umständlich und Sie müssen die Methoden Vue.component und Vue.extend nicht jedes Mal aufrufen: Dynamische Komponente Mehrere Komponenten können denselben Mount-Punkt verwenden und dann dynamisch zwischen ihnen wechseln. Verwenden Sie das reservierte 8c05085041e56efcb85463966dd1cb7e-Element und binden Sie es dynamisch an sein is-Attribut. Das folgende Beispiel verfügt über drei Komponenten: Home, Beiträge und Archiv unter derselben Vue-Instanz, und die Komponentenanzeige wird dynamisch über die Funktion aktuellAnsicht umgeschaltet. HTML-Code: JS-Code: Komponente und V-für 97a0c92c7ded8c387a1239e7163da67d83153a5025b2246e72401680bb5dd683 Daten können nicht an die Komponente übergeben werden, da der Umfang der Komponente unabhängig ist. Um Daten an die Komponente zu übergeben, sollten Requisiten verwendet werden: 464253d3b9d2f3b945edf373281faa2783153a5025b2246e72401680bb5dd683Der Grund, warum das Element nicht automatisch in die Komponente eingefügt wird, liegt darin, dass die Komponente dadurch eng mit der aktuellen Version gekoppelt wird -für. Durch die explizite Angabe, woher die Daten stammen, können Komponenten an anderen Orten wiederverwendet werden. Detailliertes ReaktionsprinzipWenn eine Komponente Daten bindet, wie kann die Bindung effektiv sein und dynamisch geändert und hinzugefügt werden?Attribut? Werfen Sie einen Blick auf die Grundsatzeinführung unten. So verfolgen Sie Änderungen: Übergeben Sie ein anderes Objekt als Datenoption an die Vue-Instanz. vue.js durchläuft seine Eigenschaften mithilfe von Objekt . defineProperty wandelt es in einen Getter/Setter um. Dies ist eine ES5-Funktion und alle vue.js unterstützen IE8 oder niedriger nicht. Jede Anweisung/Datenbindung in der Vorlage verfügt über ein entsprechendes Watcher-Objekt, das die Eigenschaften während des Berechnungsprozesses als Abhängigkeiten aufzeichnet. Wenn später der abhängige Setter aufgerufen wird, wird der Watcher zur Neuberechnung veranlasst. Der Prozess ist wie folgt: Änderungserkennungsproblem: vue.js kann das Hinzufügen oder Löschen von Objektattributen nicht erkennen, die Attribute müssen in Daten sein Nur dadurch kann vue.js es in den Getter/Setter-Modus konvertieren, um zu antworten. Zum Beispiel: Es gibt jedoch auch eine Möglichkeit, Eigenschaften hinzuzufügen, nachdem die Instanz erstellt wurde, damit sie relevant ist. Sie können die Instanzmethode set(key,value) verwenden: vm set('b', 2)// `vm.b` und ` data.b` reagiert jetzt

对于普通对象可以使用全局方法：Vue.set(object, key, value)：
Vue.set(data, 'c', 3)
// `vm.c` 和 `data.c` 现在是响应的 

初始化数据：尽管Vue.js提供动态的添加相应属性，还是推荐在data对象上声明所有的相应属性。

不这么做： 

var vm = new Vue({
 template: &#39;<p>{{msg}}</p>&#39;
})
// 然后添加 `msg`
vm.$set(&#39;msg&#39;, &#39;Hello!&#39;)

应该这么做： 

var vm = new Vue({
 data: {
 // 以一个空值声明 `msg`
 msg: ''
 },
 template: &#39;<p>{{msg}}</p>&#39;
})
// 然后设置 `msg`
vm.msg = &#39;Hello!&#39;

组件完整案例
下面介绍的例子实现了模态窗口功能，代码也比较简单。

html代码：

<!-- 实现script定义一个模板 -->
<script type="x/template" id="modal-template">
 <!--模板是否显示通过v-show="show"来设置， transition设置动画效果-->
 <p class="modal-mask" v-show="show" transition="modal">
 <p class="modal-wrapper">
  <p class="modal-container">
  <p class="modal-header">
   <!--slot 相当于header占位符-->
   <slot name="header">
   default header
   </slot>
  </p>
  <p class="modal-body">
   <!--slot 相当于body占位符-->
   <slot name="body">
   default body
   </slot>
  </p>
  <p class="modal-footer">
   <!--slot 相当于footer占位符-->
   <slot name="footer">
   default footer
   </slot>
   <button class="modal-default-button" @click="show = false">OK</button>
  </p>
  </p>
 </p>
 </p>
</script>
<p id="app">
 <!--点击按钮时设置vue实例特性showModal的值为true-->
 <button id="show-modal" @click="showModal = true">show modal</button>
 <!--modal是自定义的一个插件，插件的特性show绑定vue实例的showModal特性-->
 <modal :show.sync="showModal">
 <!--替换modal插件中slot那么为header的内容-->
 <h3 slot="header">Custom Header</h3>
 </modal>
</p>

 js代码： 

//定义一个插件，名称为modal
Vue.component("modal", {
 //插件的模板绑定id为modal-template的DOM元素内容
 template: "#modal-template",
 props: {
 //特性，类型为布尔
 show:{
  type: Boolean,
  required: true,
  twoWay: true
 }
 }
});
//实例化vue，作用域在id为app元素下，
new Vue({
 el: "#app",
 data: {
 //特性，默认值为false
 showModal: false
 }
});

css代码： 

.modal-mask {
 position: fixed;
 z-index: 9998;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, .5);
 display: table;
 transition: opacity .3s ease;
}

.modal-wrapper {
 display: table-cell;
 vertical-align: middle;
}

.modal-container {
 width: 300px;
 margin: 0px auto;
 padding: 20px 30px;
 background-color: #fff;
 border-radius: 2px;
 box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
 transition: all .3s ease;
 font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
 margin-top: 0;
 color: #42b983;
}

.modal-body {
 margin: 20px 0;
}

.modal-default-button {
 float: right;
}

/*
* the following styles are auto-applied to elements with
* v-transition="modal" when their visiblity is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/

.modal-enter, .modal-leave {
 opacity: 0;
}

.modal-enter .modal-container,
.modal-leave .modal-container {
 -webkit-transform: scale(1.1);
 transform: scale(1.1);
}

相关文章：

通过纯Vue.js构建Bootstrap组件

Vue.js环境搭建教程介绍

超全面的vue.js使用总结

Das obige ist der detaillierte Inhalt vonDetaillierte Beschreibung der leistungsstarken Vue.js-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!