编程知识 cdmana.com

Vue (miscellany)

Common modifiers and functions are as follows :

  • .stop: Stop the event from bubbling , Equivalent to calling event.stopPropagation();
  • .prevent: Block default events , Equivalent to event.preventDefault();
  • .capture: Listen for events in capture mode , namely addEventListener(event, fn, true);
  • .self: Only when event.target Start for yourself , When bubbling out of an internal element, it doesn't trigger ;
  • .once: Only one trigger after binding .

also Key modifier , It simplifies our handling of key events .

  • keyCode: Such as @keyup.13, I.e. monitoring keyCode by 13( Enter key ) The button lift event of .
  • Alias : Use it directly keyCode It's also more troublesome , After all, we don't remember all the buttons keyCode, The nicknames here provide easy access to the buttons , Such as @keyup.enter, Common nicknames are :

    • .enter
    • .tab
    • .delete
    • .esc
    • .space
    • .up
    • .down
    • .left
    • .right
  • System modifier keys : Modifier keys are different from regular keys , In the and keyup When things are together , The modifier key must be pressed when the event is triggered . for example :@keyup.ctrl.enter, That is, press and hold ctrl key , lift enter The key will trigger , Single lift ctrl Will not be triggered .Vue In total, there are four kinds of system modifiers :

    • .ctrl
    • .alt
    • .shift
    • .meta:Mac On the system keyboard ,meta Corresponding command key (⌘). stay Windows System keyboard meta Corresponding Windows Winkey (⊞).

in addition , Modifiers support superposition , And Execute in order , for example :

  • @click.stop.prevent="doSth" That is to prevent default events and prevent bubbling ;
  • @keyup.ctrl.enter I.e. monitoring ctrl+ Press enter to release the event ;
  • @click.self.prevent Only block default events to the element itself , and @click.prevent.self All default actions will be blocked ( hinder .self It didn't work ).
  • v-text: Update element textContent, With direct use {{}} comparison , You can avoid Vue Instances have not yet been applied to elements , Users can directly see {{ data }} This template syntax .
  • v-html: Update element innerHTML.
  • v-pre: Skip the compilation of elements and their children , Speed up compilation , Such as <div v-pre>...</div>.
  • v-cloak: Keep the attribute on the element , until The associated instance ends compiling , It is often used to hide uncompiled tags until the end of compilation . for example :

v-once: Render only elements and components once , After that, even if a retransmission is triggered , The element or node within the component that acts will be treated as static content , It won't be updated with it .

Earliest Vue Communication between components is realized by using distributed (dispatch, The event bubbled up , Stop bubbling when triggered ) and radio broadcast (broadcast, Events are passed down to all descendants ) To achieve communication between components . But this way is more suitable for communication between father and son , But there are two problems :

  • Communication flow between brother components is too long : Communication between sibling components needs to be transferred through the parent component . for example , Brother components A、B, Parent component C,A The distribution event bubbled up to C,C After receiving it, broadcast it again to A、B,B Trigger your own event after listening to it , The process is relatively long .
  • Communication flow depends on DOM structure : Both dispatch and bubbling processes depend on the structure between components , This creates coupling , It's not conducive to the splitting of components .

So in Vue 2.0 After that, the support for this mode of communication was canceled , It is recommended to use Event bus The way , In a simple scenario , You can use an empty Vue Instance as event bus , for example :

`var bus = new Vue()

 Components A:
bus.$emit('action', data)    //  Trigger action event 

 Components B:
bus.$on('action', funtion (data) { ... }) //  monitor action event ` 

 Copy 

So no matter the component A In which position ,B Can be monitored A The trigger action event , And DOM The structure is decoupled . In more complex situations , We will use State management : vuex To develop ~~~~

Vue.js It also provides a way to render child component data within the parent component , That's it Scope slot , It's usually used in some forms 、 List type plug-ins , In this way, users can customize the rendering of each specific item

// List.vue
<ul>
  <slot name="item" v-for="item in items" :item="item"></slot>
</ul> 

// ListDemo.vue
<list :items="items">
  <template slot-scope="props" slot="item">
    <li>{{ props.item.text }}</li> 
    //  Control of rendering specific properties is left to the parent component 
    //  Without changing the subcomponents , We can base on the parent component , To render different properties , for example  props.item.value  And so on 
    //  This is more extensible than rendering directly between sub components , But relatively speaking , The ability to encapsulate subcomponents is also relatively weakened ( Not responsible for the logic of rendering , All need to be completed by the parent component )
  </template>
</list>

In the parent , Need to use with slot-scope Of <template> label , Indicates that it is a template for the scope slot .slot-scope The value of a variable is used as a temporary name , This variable receives the prop object .
<list :items="items"><li slot-scope="props" slot="item">{{ props.item }}</li></list>

1、 How to understand Vue Is the scope of the slot
for instance , For example, I wrote a list component that can implement alternate stripes , After the release of , Users can customize the content or style of each line ( ordinary slot You can finish the work ). And the key to the scope slot is , The parent component can receive slot The parameters passed in , See the case and the notes .

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Vue Scope slot </title>
        <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script>
    </head>
    <body>
        <div id="app2">
            <!--  Component users simply pass users Data is enough  -->
            <my-stripe-list :items="users" odd-bgcolor="#D3DCE6" even-bgcolor="#E5E9F2">
                <!-- props Object receives from the subcomponent slot Of $index Parameters  -->
                <template slot="cont" scope="props">
                    <span>{{users[props.$index].id}}</span>
                    <span>{{users[props.$index].name}}</span>
                    <span>{{users[props.$index].age}}</span>
                    <!--  It's up to you [ edit ][ Delete ] Links and styles of buttons  -->
                    <a :href="'#edit/id/'+users[props.$index].id"> edit </a>
                    <a :href="'#del/id/'+users[props.$index].id"> Delete </a>
                </template>
            </my-stripe-list>
        </div>
        <script> Vue.component('my-stripe-list', {
                /*slot Of $index Can be passed to the parent component */
                template: `
                    <div>
                        <div v-for="(item, index) in items" style="line-height:2.2;" :style="index % 2 === 0 ? 'background:'+oddBgcolor : 'background:'+evenBgcolor">
                            <slot name="cont" :$index="index"></slot>
                        </div>
                    </div>
                `,
                props: {
                    items: Array,
                    oddBgcolor: String,
                    evenBgcolor: String
                }
            });
            new Vue({
                el: '#app2',
                data: {
                    users: [
                        {id: 1, name: ' Zhang San ', age: 20},
                        {id: 2, name: ' Li Si ', age: 22},
                        {id: 3, name: ' Wang Wu ', age: 27},
                        {id: 4, name: ' Zhang long ', age: 27},
                        {id: 5, name: ' Zhao Hu ', age: 27}
                    ]
                }
            }); </script>
    </body>
</html>

版权声明
本文为[stray]所创,转载请带上原文链接,感谢

Scroll to Top