vue的常用元件操作方式應用詳解
摘要：
本文主要介紹了vue的常用元件操作方法應用分析,非常不錯，具有參考借鑑價值，需要的朋友可以參考下
專案技術：
webpack + vue + element + axois (vue-resource) + less-loader+ ...
vue的操作的方法...
本文主要介紹了vue的常用元件操作方法應用分析,非常不錯，具有參考借鑑價值，需要的朋友可以參考下
專案技術：
webpack + vue + element + 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>
- 按鈕狀態的判斷，按鈕能不能點的問題
<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>//歡迎加入全棧開發交流圈一起學習交流：864305860 <span class="el-icon-minus"> </span>'
原生的js 往數組裡壓入和彈出 資料（抓陣列的長度），因為vue的是以資料驅動，以資料判斷，該不該渲染dom
addTime () {
this.timeArr.push('str')
},
minusTime () {
this.timeArr.shift('str')
}
-
追加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,
}//歡迎加入全棧開發交流圈一起學習交流：864305860
}
5.子->父元件的通訊，vue.$emit vue.on
子元件：
getSectionId (sectionId) {
return {
active: this.$route.params.sectionId === sectionId,
}//歡迎加入全棧開發交流圈一起學習交流：864305860
}
父元件：
dom
<v-child :courseId="courseId" v-on:receiveTitle="receiveTitle"> </v-child>
js
methods: {
receiveTitle (name) {
this.titleName = name; // titleName 就是 **@課程
}
}
總結套路：子元件使用函式（事件）給父元件傳遞 receiveTitle 屬性，然後父元件監測這個屬性，給這個屬性繫結方法 receiveTitle，方法傳引數，這個引數就是 要傳遞的 值
6.父-> 子
父元件：
dom:
<course-tab :courseList = courseList ></course-tab>
js：
courseList().then(res => {
this.courseList = res.data.courses;
}).catch( err => {
console.log(err)
});
子元件：
props: {
courseList: {
type: Array
}//歡迎加入全棧開發交流圈一起學習交流：864305860
}
總結套路：父元件將變數傳到子元件，需要在子元件標籤上繫結這個變數，然後子元件就可以在props 裡接受這個變數
7.錯誤路由的處理，重定向， 在router裡新增一個路由資訊
{//歡迎加入全棧開發交流圈一起學習交流：864305860
path: '*',
redirect: '/'
}
這裡是重新定向到首頁，也可以單獨做一個 404頁面，重定向到這個頁面
程式設計式導航裡面，
router.push({ path: 'login-regist' })
// 如果這樣寫的話，會尋找路由最近的
// 然後在後面直接拼接login-regist；為了防止在多級巢狀路由裡面出現bug ,應該寫全路由的全部資訊，包括 /
router.push({ path: '/login-regist' })
- dom 裡拼接css
<div class="img" :style="{background: 'url(' + item.logoFileURL + ')'}"></div>
- 監聽滾動事件
data () {
return {
scrolled: false，
show: true
}
},
methods: {
handleScroll () {
this.scrolled = window.scrollY > 0;
if (this.scrolled) {
this.show = false;
}//歡迎加入全棧開發交流圈一起學習交流：864305860
}
},
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>
本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q群：864305860，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。