Detailed explanation of the use of common components in Vue

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

Project technology:

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

Vue operation method Case:

1. The array data has not been obtained yet, 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. Judging the status of the button and 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 in jq String

 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 it is judged by the data whether the dom should be rendered or not.

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

4. Add class, the scene is when looping a certain list, a certain list has a class, binds a method, and 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: Child component uses function (event) to pass the receiveTitle attribute to the parent component, and then the parent component monitors this attribute and binds it to Define the method receiveTitle, and pass parameters to the method. 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, and you need to bind this variable on the subcomponent label, and then the subcomponent can Accept this variable in props

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

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

Here is a redirect to the homepage, you can also make a separate one 404 page, redirect to this page

Programmatic navigation,

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

8. Splicing css in dom

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

9. Listening to scroll 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 the changes in the input value of the input box

@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 read this article You have mastered the case method. For more exciting information, please pay attention to other related articles on the PHP Chinese website! 
Recommended reading: 
What are the methods to operate render execution

js realizes the function of copying text files (detailed step-by-step explanation) 
The above is the detailed content of Detailed explanation of the use of common components in Vue. For more information, please follow other related articles on the PHP Chinese website!