Detaillierte Erläuterung der Verwendung gemeinsamer Komponenten in Vue

Dieses Mal werde ich Ihnen die Vorsichtsmaßnahmen bei der Verwendung gemeinsamer Komponenten in Vue ausführlich erläutern. Das Folgende ist ein praktischer Fall.

Projekttechnologie:

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

Vue Beispiele für Betriebsmethoden:

1. Die Array-Daten wurden noch nicht abgerufen und es wurde eine vorinstallierte Animation erstellt

<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. Beurteilen Sie den Status der Schaltfläche und ob die Schaltfläche aktiviert ist kann angeklickt werden

<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, dom anhängen (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:

Äquivalenter Dom in jq string

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

Native js schiebt und fügt Daten in das Array ein (ergreift die Länge des Arrays), da Vue durch Daten gesteuert und anhand von Daten beurteilt wird. Nicht rendern dom

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

4. Klasse hinzufügen Wenn die Szene eine bestimmte Liste durchläuft, hat eine bestimmte Liste eine Klasse und ist an eine Methode gebunden, die 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 Komponente:

Untergeordnete Komponente:

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

Untergeordnete 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 die Funktion (Ereignis), um das Attribut „receiveTitle“ an die übergeordnete Komponente zu übergeben, und dann überwacht die übergeordnete Komponente dieses Attribut. Die Methode übergibt einen zu übergebenden Wert

Parent 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. und Sie müssen diese Variable an die Bezeichnung der untergeordneten Komponente binden, und dann kann die untergeordnete Komponente diese Variable in Requisiten akzeptieren

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

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

Hier erfolgt die Weiterleitung zur Startseite, oder sie kann separat erfolgen. Eine

404-Seite

, Weiterleitung zu dieser Seite in der programmatischen Navigation,

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

8 css in dom

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

9. Überwachen Sie das Scroll-Ereignis

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);
 }

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

@input="search"，

Hören Sie sich die

-Methode des Elements an -UI,

<el-input v-model="input" @keyup.enter.native="add" placeholder="请输入内容" ></el-input>

<el-input Ich glaube, Sie haben es gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Methoden finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Welche Methoden gibt es für die Render-Ausführung?

js implementiert die Funktion zum Kopieren von Textdateien ( ausführliche Schritt-für-Schritt-Erklärung)

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung gemeinsamer Komponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!