Dieses Mal zeige ich Ihnen, wie Sie die Seitenregionalisierung mit Vuejs durchführen.
Vorteile von Komponenten
Wenn ich Vue zum Schreiben von Seiten verwende, werden viele Datenseiten gerendert und Komponenten eingeführt, um die Codemenge der Hauptseite zu vereinfachen. Wenn die Codebereichsblöcke fast gleich sind, wird der Code durch die Komponentenkapselung noch mehr vereinfacht. Komponenten sind eine der leistungsstärksten Funktionen von Vue.js.
Komponenten können das
HTML-Element
erweitern, um wiederverwendbaren Code zu kapseln. Auf einer hohen Ebene ist eine Komponente ein benutzerdefiniertes 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.
Ich verwende ein Buchlistenbeispiel aus einer Lesesoftware:
Sie können darüber nachdenken, wie Sie die Front-End-Seite dieser Seite mit Vue implementieren und dann die logische Funktion implementieren
Die im Bild gezeigte Listenanzeige der „empfohlenen Bücher“ und „neuesten Bücher“ ist dieselbe. Sie können wiederholten Code verwenden, um den Code der „empfohlenen Bücher“, den Sie zuvor geschrieben haben, zu kopieren und die „neuesten Bücher“ leicht zu erkennen. Seite.
Wenn andere Seiten diese Anzeige ebenfalls benötigen oder ich möchte, dass der Code prägnanter ist, ist die Kapselung der Komponenten hilfreich
Kurzseite: Seite zur Anzeige der Buchliste – Buchlistenkomponente
Für den grundlegenden Teil glaube ich, dass jeder, der Vue verwendet hat, weiß, wie man es verwendet. Ich werde direkt zum Code gehen:
|- book.vue // 图书展示页面
|-- BookList.vue // 图书列列表组件
Nach dem Login kopieren
Erstellen Sie eine Komponente – registrieren Sie die Komponente – verwenden Sie die Komponente
Vue2.0 schreibt vor, dass bei der Einführung von Komponenten die Benennung von Kamelfällen empfohlen wird, um sie bei der Verwendung zu trennen, damit Vue sie besser identifizieren kann
Der Code, der zuvor nicht gekapselt wurde, wird nicht hochgeladen. Bitte laden Sie den Code direkt hoch:
// 引入组件
import BookList from '../../components/bookList/BookList.vue';
// 注册组件
components:{
BookList,
},
// 使用组件
<book-list></book-list>Nach dem Login kopieren
Buchlistenseite – book.vue
Während des Entwicklungsprozesses verwende ich die API-Schnittstelle, um die Daten abzurufen. Es gibt viele dieselben Codes, aber die Prinzipien sind dieselben Schauen Sie es sich an
|- book.vue - html 页面
<template>
<p>
<h2>欢迎来到波波图书馆!</h2>
<!-- 推荐读书 -->
<section class="box recommend-book">
<!-- 大家注意 :books 是BookList.vue组件里图书对象数组 heading 是传给组件的标题 -->
<book-list :books="recommendArray" heading="推荐图书"></book-list>
</section>
<!-- 最新图书 -->
<section class="box update-book">
<!-- 大家注意 :books 是BookList.vue组件里图书对象数组 heading 是传给组件的标题 -->
<book-list :books="updateBookArray" heading="最新图书"></book-list>
</section>
</p>
</template>
Nach dem Login kopieren
Komponente – BookList.vue
|- book.vue - js
<script>
import BookList from '../../components/bookList/BookList.vue';
export default({
data(){
return {
// 推荐图书
recommendArray:[
{
id:1,
img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
book_name:'Vuejs-1',
book_author:'liangfengbo',
},
{
id:2,
img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
book_name:'Vuejs-2',
book_author:'liangfengbo',
},
{
id:3,
img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
book_name:'Vuejs-3',
book_author:'liangfengbo',
},
],
// 最新图书
updateBookArray:[
{
id:5,
img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
book_name:'Vuejs-5',
book_author:'liangfengbo',
},
{
id:6,
img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
book_name:'Vuejs-6',
book_author:'liangfengbo',
},
{
id:7,
img_url: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=671627465,1455045194&fm=173&s=23A2F3039C930EC41A2DB9090300D093&w=640&h=427&img.JPEG',
book_name:'Vuejs-7',
book_author:'liangfengbo',
},
],
}
},
// 引入组件
components:{
BookList,
},
methods : {
},
})
</script>Nach dem Login kopieren
|- book.vue - css
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style:none;
}
.box{
height: auto;
border-bottom: 1px solid #efefef;
margin: 10px 0;
padding: 5px 0;
}
</style>Nach dem Login kopieren
|- Komponente – BookList.vue – html
|- 组件 - BookList.vue - html
<template>
<p>
<!-- 头部 -->
<!--这个是页面传来的标题 -->
<h3 class="heading">{{heading}}</h3>
<!-- 列表 -->
<article class="book-list">
<!-- 遍历图书数据 -->
<li v-for="book in books">
<router-link :to="{ name:'BookDetail',params:{ id: book.id }}">
 <!-- 图书图片 -->
{{book.book_name}} <!-- 图书名字 -->
</router-link>
</li>
</article>
</p>
</template>Nach dem Login kopieren
|- Komponente – BookList.vue – CSS
<script>
export default({
// props 数据传递的意思
props:[
'heading',//标题
'books',//图书对象数组
],
data(){
return {
}
},
methods : {
},
})
</script>Nach dem Login kopieren
Der gesamte Code ist hier, um herauszufinden, dass die Komponentenkapselung tatsächlich mit unserer vorherigen JavaScript-Funktionskapselung übereinstimmt. Sie übergibt Parameter, empfängt Parameter, rendert Daten und verwendet sie direkt Ein Blick. Es gibt Erklärungen in den Kommentaren.
<style scoped>
/*图书列表*/
.book-list {
width:100%;
height:128px;
display: flex;
justify-content: space-around;
}
.heading {
border-left: 4px solid #333;
margin: 10px 0;
padding-left: 4px;
}
.book-list li {
width:80px;
height: 100%;
flex:1;
margin:0 10px;
}
.book-list li img{
height: 100px;
width: 100%;
}
.book-list li a{
text-align: center;
font-size: 12px;
text-decoration: none;
display: inline-block;
width: 100%;
}
</style>Nach dem Login kopieren
Tipps
Die übergeordnete Komponente ruft die Methode der untergeordneten Komponente auf:
Schreiben Sie einen Namen auf die Unterkomponente, z. B.:
Aufrufmethode:
<start-set-timeout seconds=60 ref="contTimer"></start-set-timeout>
Nach dem Login kopieren
Aber
this.$refs.contTimer.countTime(60)
Aufgrund der Datenverzögerung treten beim Aufruf von Unterkomponenten häufig undefinierte Ereignisse auf:
Die Eigenschaft „countTime“ von undefiniert kann nicht gelesen werden
Die Lösung ist
TypeError:
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Empfohlene Lektüre:
// 调用时加一个定时器
setTimeout(() => {
this.$refs.contTimer.countTime(60)
}, 20)Nach dem Login kopieren
Detaillierte Erläuterung der Verwendung von webpack2+React
JQUERY ruft den Wert des Attributs über den Strom ab Tag-Name
Das obige ist der detaillierte Inhalt vonWie Vuejs die Seitenregionalisierung durchführt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
