Use of vue components in practical cases

This time I will bring you the use of vue components in practical cases. What are the precautions for using vue components in practical cases? The following is a practical case, let's take a look.

zProject technology:

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

Vue operation method case:

1. The array data has not been obtained, and a preloaded animation is made

<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. Determining the button status, The question of whether the button can be clicked

<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. Like jquery, append dom (vue is data-oriented and should get rid of the complicated operations of jquery's dom)

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

Equivalent to the dom string in jq

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

Native js pushes and pops data into the array (grabs the length of the array), because vue is driven by data and judged by data. The dom

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

should not be rendered. 4. Add a class. When the scene is looping a certain list, a certain list has a class and is bound to a method, which can support passing parameters

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. Child->parent component communication, vue.$emit vue.on

Child component:

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

Parent component:

dom

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

js

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

Summary routine: The child component uses a function (event) to pass the receiveTitle attribute to the parent component, and then the parent component monitors this attribute and binds a method to this attribute. receiveTitle, the method passes parameters, this parameter is the value to be passed

6. Parent-> Child

Parent component:

dom:

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

js:

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

Subcomponent:

 props: {
  courseList: {
   type: Array
  }
 }

Summary routine: the parent component passes the variable to the subcomponent, you need to bind this variable on the subcomponent label, and then the subcomponent can be in the props Accept this variable

7. Handle error routing, redirect, add routing information in the router

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

Here is a redirect to the home page, or you can make a separate 404 page and redirect Go to this page

Programmatic navigation,

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

8. Splice css in dom

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

9. Monitor scrolling events

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. Monitor input Changes in the box input value

@input="search"，

The method of monitoring the <el-input of element-UI,

<el-input v-model="input" @keyup.enter.native="add" placeholder="请输入内容" >
I believe you have mastered the method after reading the case in this article, and more How exciting, please pay attention to other related articles on php Chinese website! 
Recommended reading: 
Detailed explanation of render case in React

Detailed explanation of Vue Mixin function use case
 
The above is the detailed content of Use of vue components in practical cases. For more information, please follow other related articles on the PHP Chinese website!