This time I will bring you the use of vue components in practical cases. What are the precautions for using vue components in practical cases? The following is a practical case, let's take a look.
zProject technology:
webpack vue element axois (vue-resource) less-loader...
Vue operation method case:
1. The array data has not been obtained, and a preloaded animation is made
// 实际显示的内容-跑马灯 ![]()
// 当 movirArr的数组为空的时候,做出的预加载 loading
2. Determining the button status, The question of whether the button can be clicked
导出
导出
3. Like jquery, append dom (vue is data-oriented and should get rid of the complicated operations of jquery's dom)
//绑定模型,检测输入的格式 //绑定方法,增加dom的操作 //timeArr数组与数据就渲染下面的dom,没有就不显示
js:
Equivalent to the dom string in jq
timeInputString: ''
Native js pushes and pops data into the array (grabs the length of the array), because vue is driven by data and judged by data. The dom
addTime () { this.timeArr.push('str') }, minusTime () { this.timeArr.shift('str') }
should not be rendered. 4. Add a class. When the scene is looping a certain list, a certain list has a class and is bound to a method, which can support passing parameters
dom
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
js
methods: { receiveTitle (name) { this.titleName = name; // titleName 就是 **@课程 } }
Summary routine: The child component uses a function (event) to pass the receiveTitle attribute to the parent component, and then the parent component monitors this attribute and binds a method to this attribute. receiveTitle, the method passes parameters, this parameter is the value to be passed
6. Parent-> Child
Parent component:
dom:
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, you need to bind this variable on the subcomponent label, and then the subcomponent can be in the props Accept this variable
7. Handle error routing, redirect, add routing information in the router
{ path: '*', redirect: '/' }
Here is a redirect to the home page, or you can make a separate 404 page and redirect Go to this page
Programmatic navigation,
router.push({ path: 'login-regist' }) // 如果这样写的话,会寻找路由最近的 / 然后在后面直接拼接login-regist; 为了防止在多级嵌套路由里面出现bug ,应该写全路由的全部信息,包括 / router.push({ path: '/login-regist' })
8. Splice css in dom
9. Monitor scrolling 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 input Changes in the box input value
@input="search",
The method of monitoring the
I believe you have mastered the method after reading the case in this article, and more How exciting, please pay attention to other related articles on php Chinese website!
Recommended reading:
Detailed explanation of render case in React
Detailed explanation of Vue Mixin function use case
The above is the detailed content of Use of vue components in practical cases. For more information, please follow other related articles on the PHP Chinese website!