Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you about how to implement hover events and v-model in Vue custom components. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

In CSS, it is easy to make changes while the mouse is hover, simply:

.item {background: blue;} .item: hover {background: green;}

In Vue, it gets a little more complicated because we don't have this built-in feature. We have to do this ourselves. But don't worry, the workload is not very heavy.

Listen for the right events. So, what events do we need to monitor?

We want to know when to hover over the element, which can be determined by tracking when the mouse enters the element and when it leaves the element. To track when the mouse leaves, you can use the mouseleave event.

Detecting when the mouse enters can be done through the corresponding mouseenter event, but we don't use this.

The reason is that serious performance problems can occur when using mouseenter on deeply nested DOM trees. This is because mouseenter triggers a unique event to the input element and to each individual ancestor element.

So what will we use instead?

We use the mouseover event.

The essential difference between the two is that mouseenter does not bubble, simply put, it is not affected by the state of its own child elements. But mouseover is affected by its child elements, and when a child element is triggered, mouseover bubbles to trigger its parent element. (if you want to stop the bubbling of mouseover, use mouseenter)

To concatenate the knowledge points, we use the Vue event to listen for the state of the mouse as it enters and leaves, and updates the status accordingly.

-export default {data () {return {hover: false,};}}

Now you can respond to the entry and exit of the mouse through the variable hover.

Display an element when hovering over the mouse

If you want to display elements based on hover state, you can pair them with v-if instructions

This content is displayed when the mouse hovers here is a secret message-export default {data () {return {hover: false,};}}

Switching style classes when hovering over the mouse can also do similar things to switch classes

Hover me to change the background!-export default {data () {return {hover: false,} }}-.active {background: green;}

Although this is feasible, it is not the best solution.

In this case, it is best to use CSS

Hover me to change the background!-- span:hover {background: green;}

Hover over a Vue component

If you want to use a Vue component to implement this behavior, then we need to make some minor changes. We can't listen to mouseover and mouseleave events like we used to.

If the Vue component does not emit those events, then we cannot listen to them.

Instead, we can add the. native event modifier to listen directly for DOM events on custom Vue components.

-export default {data () {return {hover: false,};}}

With .native, we listen for local DOM events instead of events emitted from Vue components.

Next let's look at how to implement v-model in a custom component.

While v-model is a powerful way to add two-way data binding to common components, it's not always easy to add v-model support to your own custom components, but it's simple.

V-model introduction

To understand how to implement v-model support in a component, you need to understand how it works. As magical as it may seem, VMI model = syncedProp is actually a very simple abbreviation: value= syncedProp @ input= syncedProp = arguments [0] (or value= syncedProp @ input= syncedProp = $event.target).

Therefore, to be compatible with v-model, all your component needs to do is accept the value property and issue the @ input event when the user changes the value.

Basic case

Suppose you have a date selector component that accepts the values of month and year in an object in the format: {month:1,year:2017}. This component needs to pass in two property values, month and year, and update the bound object through v-model.

/ / DatePicker.vue Month: Year: export default {props: ['value'], methods: {updateDate () {this.$emit (' input', {month: + this.$refs.monthPicker.value, year: + this.$refs.yearPicker.value})}

Mode of use:

/ / WrapperComponent.vue

Month: {{date.month}} Year: {{date.year}}

Import DatePicker from'. / DatePicker.vue'; export default {components: {DatePicker}, data () {return {date: {month: 1, year: 2017})

As you can see above, it just takes a: value attribute and issues a @ input event with an update date, which is not complicated at all

Advanced usage

By using one or more calculation attributes, we can de-normalize input data, such as strings, into a format that is easier to handle with input elements. This is often used in conjunction with more advanced custom components that must handle a variety of possible input formats, such as color selectors.

For the date selector example, it is assumed that the format of the date delivery is a string of m/yyyy structures. By using the calculation property (in this case, splitDate), we can split the input string into objects with month and year properties, with minimal modifications to the date selector component.

/ / StringyDatePicker.vue Month: Year: export default {props: ['value'], computed: {splitDate () {const splitValueString = this.value.split (' /') Return {month: splitValueString [0], year: splitValueString [1]}}, methods: {updateDate () {const monthValue = this.$refs.monthPicker.value; const yearValue = this.$refs.yearPicker.value; this.$emit ('input', `${monthValue} / ${yearValue}`);}

Once you are familiar with the concepts introduced here, you may find yourself using v-model for any and every component we create that accepts user input. This is a very simple but powerful way to add bi-directional data binding support to your own custom components.

The above is the editor for you to share how to achieve Vue custom components in the hover event and v-model, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.