Explication détaillée de l'utilisation des composants communs dans Vue-js tutoriel-php.cn

Explication détaillée de l'utilisation des composants communs dans Vue

php中世界最好的语言

Libérer： 2018-04-28 13:39:22

original

2709 Les gens l'ont consulté

Cette fois, je vais vous apporter une explication détaillée de l'utilisation des composants communs dans Vue. Quelles sont les précautions lors de l'utilisation de composants communs dans Vue. Ce qui suit est un cas pratique, jetons un coup d'œil.

Technologie du projet :

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

vue Exemples de méthodes de fonctionnement :

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>

Copier après la connexion

2. Déterminez l'état du bouton, si le bouton peut être cliqué. Problème

<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><!-- 可以点， 判断数组为不为空 -->

Copier après la connexion

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>

Copier après la connexion

js :

Équivalent à dom dans jq String

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

Copier après la connexion

Native js pousse et insère les données dans le tableau (capture la longueur du tableau), car la vue est basée sur les données, juger en fonction des données si le dom doit être rendu

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

Copier après la connexion

4. Ajoutez une classe, lorsque la scène parcourt une liste, une liste a une classe, lie une méthode et peut prendre en charge la transmission de paramètres

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>

Copier après la connexion

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

Copier après la connexion

5. Child->Communication du composant parent, vue.$emit vue.on

child Component :

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

Copier après la connexion

Composant parent :

dom

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

Copier après la connexion

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

Copier après la connexion

Routine récapitulative : Le composant enfant utilise des fonctions (événement) transmet l'attribut recevoirTitle 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 à transmettre

6. Parent-> ; Enfant

composant parent :

dom :

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

Copier après la connexion

js :

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

Copier après la connexion

composant enfant :

 props: {
  courseList: {
   type: Array
  }
 }

Copier après la connexion

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. Gestion des erreurs de routage, redirection, ajouter une information de routage dans le routeur

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

Copier après la connexion

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

programmation Dans la navigation des styles,

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

Copier après la connexion

8. Splice css in dom

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

Copier après la connexion

9. Écoutez les é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);
 }

Copier après la connexion

10. Surveillez la valeur d'entrée de la zone de saisie Changez la méthode

@input="search"，

Copier après la connexion

de surveillance de l'élément-UI

, <el-input

<el-input v-model="input" @keyup.enter.native="add" placeholder="请输入内容" > Je pense que vous maîtrisez la méthode après en lisant le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres sites Web chinois php Articles connexes !

Lecture recommandée :

Quelles sont les méthodes pour faire fonctionner l'exécution du rendu

js implémente la fonction de copie de fichiers texte ( explication détaillée étape par étape)

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!