Vue의 공통 구성 요소 사용에 대한 자세한 설명
- php中世界最好的语言원래의
- 2018-04-28 13:39:222673검색
이번에는 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>// 实际显示的内容-跑马灯 <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는 데이터 지향적이며 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과 동일합니다. String
timeInputString: '<el-input v-model="ruleForm.name"></el-input><span class="el-icon-minus"></span>'
vue는 데이터에 의해 구동되고 데이터에 의해 판단되기 때문에 네이티브 js는 데이터를 배열에 푸시하고 팝합니다(배열의 길이를 파악). dom
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. 상위 구성 요소 vue.$emit vue.on
하위 구성 요소:
getSectionId (sectionId) {
return {
active: this.$route.params.sectionId === sectionId,
}
}
상위 구성 요소:
dom
<v-child :courseId="courseId" v-on:receiveTitle="receiveTitle"></v-child>
js
methods: {
receiveTitle (name) {
this.titleName = name; // titleName 就是 **@课程
}
}
요약 루틴: 하위 구성 요소는 상위 구성 요소에 함수(이벤트)를 사용합니다. 구성 요소는 receiveTitle 속성은 이 속성을 모니터링하고 receiveTitle 메소드를 매개변수로 전달합니다. 이 매개변수는
6.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
}
}
요약 루틴: 상위 구성 요소가 하위 구성 요소 레이블에 이 변수를 바인딩해야 합니다. 그러면 하위 구성 요소가 이를 수행할 수 있습니다. props
에서 이 변수를 허용합니다. 7. 라우팅 처리 오류, 리디렉션, 라우터에 라우팅 정보 추가
{
path: '*',
redirect: '/'
}
여기 홈페이지로 리디렉션됩니다. 별도의
404 페이지를 만들어 이 페이지로 리디렉션할 수도 있습니다In 프로그래밍 방식 탐색,
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 중국어 웹사이트의 다른 관련 기사를 주목해 보세요! 추천 도서:
렌더 실행을 조작하는 방법은 무엇인가요? js는 텍스트 파일 복사 기능을 구현합니다(자세한 단계별 설명)위 내용은 Vue의 공통 구성 요소 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!