실제 사례에서 Vue 구성 요소 사용
- php中世界最好的语言원래의
- 2018-06-08 11:20:491726검색
이번에는 실제 사례에서 Vue 컴포넌트를 사용하는 방법을 가져오겠습니다. 실제 사례에서 Vue 컴포넌트를 사용할 때 주의 사항은 무엇입니까?
z프로젝트 기술:
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>// 实际显示的内容-跑马灯 <p v-if="!movieArr.length" class="ticket-index-movie-loading"> <span class="el-icon-loading "></span> </p>// 当 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는 데이터 지향적이며 dom의 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='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이 있어야 하는지 여부를 결정합니다. render
addTime () {
this.timeArr.push('str')
},
minusTime () {
this.timeArr.shift('str')
}
4. 클래스 추가, 장면이 특정 목록을 반복할 때 특정 목록에 클래스가 있고 매개변수 전달을 지원할 수 있는 메서드를 바인딩합니다
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 .child->parent 컴포넌트 통신, vue.$emit vue.on
child 컴포넌트:
getSectionId (sectionId) {
return {
active: this.$route.params.sectionId === sectionId,
}
}
parent 컴포넌트:
dom
<v-child :courseId="courseId" v-on:receiveTitle="receiveTitle"></v-child>
js
methods: {
receiveTitle (name) {
this.titleName = name; // titleName 就是 **@课程
}
}
요약 루틴: 자식 컴포넌트는 함수(이벤트)를 부모에게 사용합니다. 컴포넌트는 receiveTitle 속성을 전달합니다. 그런 다음 상위 구성 요소는 이 속성을 모니터링하고 receiveTitle 메소드를 매개변수로 전달합니다.
6. Parent->Parent 구성 요소:
dom :
<course-tab :courseList = courseList ></course-tab>
js:
courseList().then(res => {
this.courseList = res.data.courses;
}).catch( err => {
console.log(err)
});
Child 구성 요소:
props: {
courseList: {
type: Array
}
}
요약 루틴: 상위 구성 요소는 하위 구성 요소 라벨에 이 변수를 바인딩해야 하며, 그러면 하위 구성 요소가 이 변수를 받아들일 수 있습니다. in props
7 .오류 처리 라우팅, 리디렉션, 라우터에 라우팅 정보 추가
{
path: '*',
redirect: '/'
}
여기 홈페이지로 리디렉션이 있으며 프로그래밍 방식 탐색에서 별도의 404 페이지를 만들어 이 페이지로 리디렉션
할 수도 있습니다.
router.push({ path: 'login-regist' }) // 如果这样写的话，会寻找路由最近的 / 然后在后面直接拼接login-regist；
为了防止在多级嵌套路由里面出现bug ,应该写全路由的全部信息，包括 /
router.push({ path: '/login-regist' })
8 .dom에서 CSS 스플라이싱
<p class="img" :style="{background: 'url(' + item.logoFileURL + ')'}"></p>
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"，
요소 UI
,<el-input v-model="input" @keyup.enter.native="add" placeholder="请输入内容" ></el-input>
<el-input 믿습니다. 이 기사의 사례를 읽은 후 방법을 마스터했습니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 도서:
React의 렌더링 사례에 대한 자세한 설명Vue Mixin 기능 사용 사례에 대한 자세한 설명위 내용은 실제 사례에서 Vue 구성 요소 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!