Utilisation des composants vue dans des cas pratiques

Cette fois, je vais vous présenter l'utilisation des composants vue dans des cas pratiques. Quelles sont les précautions à prendre pour utiliser les composants vue dans des cas pratiques ? Ce qui suit est un cas pratique, jetons un coup d'oeil.

zTechnologie du projet :

webpack + vue + element + axois (vue-resource) + less-loader+ ...

Exemples de méthodes d'opération Vue :

1. Les données du tableau n'ont pas encore été obtenues, créez une animation préchargée

<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 . de l'état du bouton, la question de savoir si le bouton peut être cliqué

<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 Comme jquery, ajoutez dom (vue est orientée données et devrait se débarrasser des opérations compliquées du dom de jquery)

<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 :

Équivalent à la chaîne dom dans jq

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

Le js natif pousse et insère les données dans le tableau (saisit la longueur du tableau), car Vue est pilotée par les données, et on juge par les données si le dom doit être rendu

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

4 Lorsque la scène boucle une certaine liste, une certaine liste a une classe, et. une méthode peut y être liée. Prise en charge des paramètres de transmission

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. Communication entre le composant enfant->parent, vue. $emit vue.on

Sous-composant :

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

Composant parent :

dom

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

js

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

Routine récapitulative : utilisation du sous-composant La fonction (événement) transmet l'attribut recevoirTitre au composant parent, puis le composant parent surveille cet attribut et lie la méthode recevoirTitre à cet attribut. La méthode transmet les paramètres, et ce paramètre est la valeur à prendre. réussi

6. Parent-> Enfant

Composant parent :

dom :

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

js :

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

Composant enfant :

 props: {
  courseList: {
   type: Array
  }
 }

Routine récapitulative : le composant parent transmet la variable au composant enfant. Cette variable doit être liée à l'étiquette du composant enfant, puis le composant enfant peut accepter cette variable dans les accessoires.

7. Erreur de traitement du routage, redirection, dans Ajouter une information de routage dans le routeur

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

Voici la redirection vers la page d'accueil, vous pouvez également créer une page 404 séparée et rediriger vers celle-ci page

Dans la navigation programmatique,

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

8. Épissage des CSS dans dom

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

9. Écoute des événements de défilement

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. Surveillance des changements dans la valeur d'entrée de la zone de saisie

@input="search"，

La méthode de surveillance

de l'élément-UI, <el-input

<el-input v-model="input" @keyup.enter.native="add" placeholder="请输入内容" > Je crois que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP ! 
Lecture recommandée : 

Explication détaillée des cas de rendu dans React

Explication détaillée des cas d'utilisation de la fonction Vue Mixin 
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!