Use of vue components in practical cases-JS Tutorial-php.cn

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

Copy after login

2. Determining the button status, The question of whether the button can be clicked

导出

Copy after login

3. Like jquery, append dom (vue is data-oriented and should get rid of the complicated operations of jquery's dom)

 //绑定模型，检测输入的格式 //绑定方法，增加dom的操作   //timeArr数组与数据就渲染下面的dom，没有就不显示

Copy after login

js:

Equivalent to the dom string in jq

timeInputString: ''

Copy after login

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') }

Copy after login

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

  {{item.orderInCourse}}.{{section.sectionNumber}} {{section.name}}

Copy after login

getSectionId (sectionId) { return { active: this.$route.params.sectionId === sectionId, } }

Copy after login

5. Child->parent component communication, vue.$emit vue.on

Child component:

getSectionId (sectionId) { return { active: this.$route.params.sectionId === sectionId, } }

Copy after login

Parent component:

dom

Copy after login

methods: { receiveTitle (name) { this.titleName = name; // titleName 就是 **@课程 } }

Copy after login

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:

Copy after login

js:

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

Copy after login

Subcomponent:

props: { courseList: { type: Array } }

Copy after login

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: '/' }

Copy after login

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' })

Copy after login

8. Splice css in dom

Copy after login

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); }

Copy after login

10. Monitor input Changes in the box input value

@input="search"，

Copy after login

The method of monitoring theof element-UI,


       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!