vue的常用元件方法應用

項目技術：

webpack + vue + element（mint-ui, etc...） + axois (vue-resource) + less-loader+ ...

vue的操作的方法案例：

1.數組資料還未擷取到，做出預加載的動畫

<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>// 實際顯示的内容-跑馬燈
      <div v-if="!movieArr.length" class="ticket-index-movie-loading">
        <span class="el-icon-loading "></span>
      </div>// 當 movirArr的數組為空的時候，做出的預加載 loading 
</el-carousel>      

2. 按鈕狀态的判斷，按鈕能不能點的問題

<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.像jquery 一樣，追加dom (vue 是以資料為導向的，應該擺脫jquery的 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='item.id'>   //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：

　　相當于jq 中的 dom 字元串

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

　　原生的js 往數組裡壓入和彈出 資料（抓數組的長度），因為vue的是以資料驅動，以資料判斷，該不該渲染dom

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

4. 追加class , 場景 在循環某個清單時候，某個清單有class,綁定一個方法，可以支援穿參數

dom

<li v-for="section in item.sections" :key='section.id' @click="hideParMask" :class="getSectionId(section.id)">
 <router-link :to="{ name: 'learning', 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.子->父元件的通信，vue.$emit vue.on 

把子元件的 '**@課程‘ 傳遞給父元件

子元件：

created () {
 this.sendNameToparent();
},      

   methods：{　

　　sendNameToparent () {

　　　　this.$emit('receiveTitle', '**@課程')

　　}

　}

父元件：

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

methods: {
  receiveTitle (name) {
   this.titleName = name; // titleName 就是 **@課程   ，name參數 就是子元件傳遞過來的值
  } 
}
      

　總結套路：　子元件使用函數（事件）給父元件傳遞 receiveTitle 屬性，然後父元件監測這個屬性，給這個屬性綁定方法 receiveTitle，方法傳參數，這個參數就是 要傳遞的 值

6.父-> 子

dom:

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

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

props: {
    courseList: {
      type: Array
    }
  }      

總結套路：父元件将變量傳到子元件，需要在子元件标簽上綁定這個變量，然後子元件就可以在props 裡接受這個變量

 7.錯誤路由的處理，重定向， 在router裡添加一個路由資訊

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

這裡是重新定向到首頁，也可以單獨做一個 404頁面，重定向到這個頁面

程式設計式導航裡面，

router.push({ path: 'login-regist' })   //  如果這樣寫的話，會尋找路由最近的 / 然後在後面直接拼接login-regist；

為了防止在多級嵌套路由裡面出現bug ,應該寫全路由的全部資訊，包括  /

router.push({ path: '/login-regist' })  

 8. dom 裡拼接css 

<div class="img" :style="{background: 'url(' + item.logoFileURL + ')'}"></div>      

 9. 監聽滾動事件

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.監聽輸入框輸入值的變化

@input="search"，

監聽 element-UI 的<el-input  的方法，

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

11.某種需求在某個元件裡給body追加樣式或者class,到其他頁面這個樣式或者class 再去掉，因為是單頁面，js追加上樣式後在不重新整理的基礎上，這些class或者樣式是不會消失的，是以需要依賴vue的聲明周期函數将其元件銷毀，以免污染整個應用

mounted () {
    document.body.style.backgroundColor = '#332f86'
 },

destroyed () {
    document.body.style.backgroundColor = 'transparent'
},      

注意： 給body 追加背景顔色必須是在mounted 這個周期函數鈎子裡，放在created 這個方法不行，因為created 時候，el（了解為dom）還沒有形成，mounted 時候完成的dom 的挂載

12、給目前點選的元素添加class

<p v-for="(val, index) in currentQueation.answers" :key='val.id'>
     <span class="answer-item-wrapper" :class="{ active: chooseNum === index }" @click="selectItem(index, currentQueation.rightAnswer)">
       <span class="select-wrapper">
       </span>
       <span class="select-content">
              {{val}}
      </span>
    </span>
</p>      

js:

data () {
  return {
     // ...
    chooseNum : ''
  }
}
methods: {
      // ....
    selectItem (type, rightVal) {
      this.chooseNum = type
    // ...         
}

// 了解： 
 因為清單是循環渲染出來的，這樣每個 item 就有對應的 index， 然後我們點選某個對應的 index選項的時候，就會擷取到他的type （就是index，我們在方法中傳值過去）, 
index擷取到了，我們就可以拿這個點選的index 和他循環的index進行比較，如果相等，則表示我目前點選的對象
　　可以追加 active,   :class="{ active: chooseNum === index }"      

13. 給标簽上拼 字元串 +變量

<van-cell v-for= '(item, i) in arguementListData' :key="i" :title="'《' + item.name + '》'" is-link to="item.url"/>