Dieses Mal zeige ich Ihnen, wie Sie die Seitenregionalisierung mit Vuejs durchführen.
Vorteile von KomponentenWenn 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-Elementerweitern, 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 // 图书列列表组件
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>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>
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>|- 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>|- 组件 - 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><script>
export default({
// props 数据传递的意思
props:[
'heading',//标题
'books',//图书对象数组
],
data(){
return {
}
},
methods : {
},
})
</script><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>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>
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:
// 调用时加一个定时器
setTimeout(() => {
this.$refs.contTimer.countTime(60)
}, 20)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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
