Einsatz von Vue-Komponenten in praktischen Fällen

Dieses Mal werde ich Ihnen die Verwendung von Vue-Komponenten in praktischen Fällen vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung von Vue-Komponenten in praktischen Fällen?

zProjekttechnologie:

Webpack + Vue + Element + Axois (Vue-Ressource) + Less-Loader+ ...

Vue-Betriebsmethodenbeispiele:

1. Die Array-Daten wurden noch nicht abgerufen. Erstellen Sie eine vorinstallierte Animation.

<el-carousel :interval="3000" type="card" height="200px" class="common-mt-md">
   <el-carousel-item v-for="item in movieArr" :key="item.id" class="text-center">
    <img v-bind:src="item.images.small" alt="电影封面" class="ticket-index-movie-img">
   </el-carousel-item>// 实际显示的内容-跑马灯
   <p v-if="!movieArr.length" class="ticket-index-movie-loading">
    <span class="el-icon-loading "></span>
   </p>// 当 movirArr的数组为空的时候，做出的预加载 loading 
</el-carousel>

2. Beurteilung des Schaltflächenstatus , die Frage, ob die Schaltfläche angeklickt werden kann

<p v-if="!multipleSelection.length">
  <el-button type="success" round disabled>导出</el-button>
</p><!-- 不能点， 判断数组为空 -->
<p v-else>
  <el-button type="success" round >导出</el-button>
</p><!-- 可以点， 判断数组为不为空 -->

3. Wie jquery, append dom (vue ist datenorientiert und sollte die komplizierten Operationen von jquerys dom loswerden)

<el-form-item label="时间" prop="name">
  <el-input v-model="ruleForm.name"></el-input>//绑定模型，检测输入的格式
  <span class="el-icon-plus ticket-manage-timeinput" @click="addTime(this)"></span>//绑定方法，增加dom的操作
 </el-form-item> 
<el-form-item label="时间" prop="name" v-for="item in timeArr" :key=&#39;item.id&#39;>  //timeArr数组与数据就渲染下面的dom，没有就不显示
　　<el-input v-model="ruleForm.name"></el-input> 
　　<span class="el-icon-minus ticket-manage-timeinput" @click="minusTime(this)"></span> 
</el-form-item>

js :

Entspricht der Dom-Zeichenfolge in jq

 timeInputString: '<el-input v-model="ruleForm.name"></el-input><span class="el-icon-minus"></span>'

Natives js schiebt und fügt Daten in das Array ein (ergreift die Länge des Arrays), da Vue datengesteuert ist, also Datenbeurteilung, ob dom gerendert werden soll

 addTime () {
 this.timeArr.push('str')
 },
 minusTime () {
 this.timeArr.shift('str')
 }

Klasse hinzufügen, wenn die Szene eine bestimmte Liste durchläuft, eine bestimmte Liste eine Klasse hat, eine Methode bindet und die Übergabe von Parametern unterstützen kann

dom

<li v-for="section in item.sections" :key=&#39;section.id&#39; @click="hideParMask" :class="getSectionId(section.id)">
 <router-link :to="{ name: &#39;learning&#39;, params: { sectionId: section.id}, query: { courseId: courseId}}" >
   <span>{{item.orderInCourse}}.{{section.sectionNumber}}</span>
   <span>{{section.name}}</span>
 </router-link>
</li>

js

getSectionId (sectionId) {
 return {
  active: this.$route.params.sectionId === sectionId,
 }
}

5. Untergeordnete->übergeordnete Komponentenkommunikation, vue.$emit vue.on

Untergeordnete Komponente:

getSectionId (sectionId) {
 return {
  active: this.$route.params.sectionId === sectionId,
 }
}

übergeordnete Komponente:

dom

<v-child :courseId="courseId" v-on:receiveTitle="receiveTitle"></v-child>

js

methods: {
 receiveTitle (name) {
  this.titleName = name; // titleName 就是 **@课程
 }
}

Zusammenfassungsroutine: Die untergeordnete Komponente verwendet eine Funktion (Ereignis), um das Attribut „receiveTitle“ an die übergeordnete Komponente zu übergeben, und die übergeordnete Komponente überwacht dies Attribut und gibt dieser Attributbindungsmethode „receiveTitle“ an, die Methode übergibt Parameter, dieser Parameter ist der zu übergebende Wert

6. Übergeordnete Komponente:

dom:

<course-tab :courseList = courseList ></course-tab>

js:

courseList().then(res => {
 this.courseList = res.data.courses;
 }).catch( err => {
 console.log(err)
});

Untergeordnete Komponente:

 props: {
  courseList: {
   type: Array
  }
 }

Zusammenfassungsroutine: Die übergeordnete Komponente übergibt die Variable an die untergeordnete Komponente. Sie müssen diese Variable an die untergeordnete Komponente binden Beschriftung der untergeordneten Komponente und dann die untergeordnete Komponente. Diese Variable kann in Requisiten akzeptiert werden

7. Fehler bei der Routing-Verarbeitung, Umleitung, Routing-Informationen im Router hinzufügen

{
  path: '*',
  redirect: '/'
}

Hier ist eine Weiterleitung zur Homepage , oder Sie können eine separate 404-Seite erstellen und zu dieser Seite weiterleiten.

router.push({ path: 'login-regist' })  // 如果这样写的话，会寻找路由最近的 / 然后在后面直接拼接login-regist；
为了防止在多级嵌套路由里面出现bug ,应该写全路由的全部信息，包括 /
router.push({ path: '/login-regist' })

8. Achten Sie auf Scroll-Ereignisse

<p class="img" :style="{background: &#39;url(&#39; + item.logoFileURL + &#39;)&#39;}"></p>

10. Überwachen Sie die Änderung des Eingabewerts im Eingabefeld

data () {
  return {
   scrolled: false，
　　　　show: true
  }
},
methods: {
  handleScroll () {
   this.scrolled = window.scrollY > 0;
   if (this.scrolled) {
    this.show = false;
   }
  }
 },
 mounted () {
  window.addEventListener('scroll', this.handleScroll);
 }

Überwachen Sie die

Methode der Element-UI,

@input="search"，

Ich glaube, Sie haben es gemeistert Nachdem Sie den Fall in diesem Artikel gelesen haben, achten Sie bitte auf weitere spannende Dinge. Weitere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

<el-input 

Detaillierte Erläuterung der Renderfälle in React

Detaillierte Erläuterung der Anwendungsfälle der Vue Mixin-Funktion

Das obige ist der detaillierte Inhalt vonEinsatz von Vue-Komponenten in praktischen Fällen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!