Dynamic components

  • Dynamic components are suitable for handling the frequent switching of multiple components.
  • <component>Used to render a ‘meta-component’ as a dynamic component, with the is attribute value determining which component to render.
  • Used for quick switching of multiple components, such as TAB effects.
  • The IS property creates a new component instance each time a component is switched.
<div id="app"> <! Button V -for="title in titles" :key="title" @click="currentCom = title" > {{title}} </button> <! Var ComA = {template:} var ComA = {template:} var ComA = {template:} '<p> This is the content of component A: <input type="text"></p>'}; Var ComB = {template: '<p> this is the content of component B: <input type="text"></p>'}; Var ComC = {template: '<p>'}; New Vue({el: '#app', data: {// All components titles: ['ComA', 'ComB', 'ComC'], { ComA, ComB, ComC } }); </script>Copy the code

Keep alive – components

  • Primarily used to preserve component state or avoid component rerendering.
  • The include attribute is used to specify which components are cached and can be set in a variety of ways.
  • The exclude attribute is used to specify which components will not be cached.
  • The Max property is used to set the maximum number of caches.
<div id="app"> <button v-for="title in titles" :key="title" @click="currentCom = title" > {{title}} </button> <! Set which components will be cached via include --> <! -- <keep-alive include="ComA,ComB,ComC"> --> <! -- <keep-alive :include="['ComA', 'ComB', 'ComC']"> --> <! -- <keep-alive :include="/Com[ABC]/"> --> <! Exclude sets which components will not be cached --> <! -- <keep-alive exclude="ComD"> --> <! -- <keep-alive :exclude="['ComD']"> --> <! -- <keep-alive :exclude="/ComD/"> --> <keep-alive max="2"> <! <component :is="currentCom"></component> </keep-alive> </div> <script> var ComA = {template: <div> please select staple food: <br> <label for="mantou"> steamed bread: </label> <input id="mantou" type="radio" name="zhushi" value="mantou"> <br> <label for="mifan"> </label> <input id="mifan" type="radio" name="zhushi" value="mifan"> </div> ` }; var ComB = { template: '<div> Please select the dish: <br> <label for="luobo"> Saute radish: </label> <input id="luobo" type="checkbox" name=" CAI "value="luobo"> <br> <label for="niurou"> fried beef: </label> <input id="niurou" type="checkbox" name=" CAI "value="niurou"> <br> <label for="pingguo"> </label> <input id="pingguo" type="checkbox" name="cai" value="pingguo"> </div> ` }; var ComC = { template: '<div> Please select soup: <br> <label for="tang1""> Tomato and egg soup: </label> <input ID ="tang1"" type="radio" name="tang" value="tang1""> <br> <label for="tang2"> </label> <input ID ="tang2" type="radio" name=" Tang "value="tang2"> <br> <label for=" Tang3 "> </label> <input ID ="tang3" type="radio" name="tang" value="tang3"> </div> ` }; var ComD = { template: '<div> Please enter payment information: <br> <label for="account""> Please enter account number: </label> <input ID ="account"" type="text" name="account"> <br> <label for="password"> please input password: </label> <input id="password" type="password" name="password"> <br> </div> ` }; new Vue({ el: '#app', data: { titles: ['ComA', 'ComB', 'ComC', 'ComD'], currentCom: 'ComA' }, components: { ComA, ComB, ComC, ComD } }); </script>Copy the code

Transitional components

Provides a variety of transitions and animations for Vue when inserting, updating, or removing the DOM.

The transition component

  • Used to add in/out transitions to elements and components: Conditional rendering (using V-if) conditional display (using V-show) Dynamic component component root node
  • The component provides six classes for setting the concrete effects of transitions. v-enter v-enter-to v-enter-active v-leave v-leave-to v-leave-active
<style> /* Used to set the final state */. V-leave-to {opacity: 0; } /* Used to set the execution of the transition */. V-leave-active {transition: opacity 1s; Opacity: 0;} /* Used to set the initial state of entry */. Opacity: 0.5;} /* Used to set the final state of entry */. } /* Set the entry process */. V-enter-active {transition: all 1s; } </style> <div id="app"> <button @click="show = ! <p v-if="show"> Hello world</p> </transition> </div> <script> new Vue({el: '#app', data: { show: true } }); </script>Copy the code

Relevant properties

  • The name attribute can be used to set different transition effects for multiple elements and components. In this case, you need to change the form of V – to the corresponding name-.
  • The Appear property allows components to transition during initial rendering.
<style> /* First set of transition effects */. V-enter,. V-leave-to {opacity: 0; } .v-enter-active, .v-leave-active { transition: opacity .5s; } /* Setting opacity: 0; */.demo-enter,.demo-leave-to {opacity: 0; transform: translateX(200px); } .demo-enter-active, .demo-leave-active { transition: all .5s; } </style> <div id="app"> <button @click="show = ! </button> <! Transition is not set to name. </p> </transition> <br> < button@click ="showDemo =! </button> <! Transition for name <transition name="demo" appear > <p v-if="showDemo"> </p> </div> <script> new Vue({ el: '#app', data: { show: true, showDemo: true } }); </script>Copy the code

Custom transition class name

  • Custom class names take precedence over regular class names and are useful when using third-party CSS animation libraries.
  • The attributes used to set the custom transition class name are as follows: enter-class enter-active-class enter-to-class leave-class leave-active-class leave-to-class appear-class appear-to-class appear-active-class
<style> .v-enter, .v-leave-to { opacity: 0; } .v-enter-active, .v-leave-active { transition: all .5s; } .test { transition: all 3s; } </style> <div id="app"> <button @click="show = ! </button> <transition enter-active-class="test" leave-active-class="test" > <p v-if="show"> </transition> </div> <script> new Vue({ el: '#app', data: { show: true } }); </script>Copy the code

The transition – group components

  • <transition-group>Use to animate a list uniformly.
  • The tag attribute is used to set container elements, which default to<span>.
  • Transitions are applied to inner elements, not containers.
  • Child nodes must have independent keys for the animation to work properly.
  • When a list element changes and the element moves, you can use the.v-move class name to set the effect of the move.
<style> ul { position: relative; } .v-enter, .v-leave-to { opacity: 0; transform: translateX(100px); } .v-enter-active, .v-leave-active { transition: all .5s; } /* Make the element depart from the standard flow */. V-leave-active {position: absolute; } .v-move { transition: all .5s; } </style> <div id="app"> <input type="text" v-model="newTitle" @keyup.enter="addItem" > <transition-group tag="ul" > <li v-for="item in items" :key="item.id" @click="removeItem(item)" > {{ item.title }} </li> </transition-group> </div> <script> new Vue({el: '#app', data: {items: [{id: 1, title: 'sample content 1'}, {id: 2, title:' sample content 2'}, {id: 3, title: }, {id: 4, title: '5'},], newTitle: '', latestId: 5}, methods: { addItem () { this.items.push({ id: this.latestId + 1, title: this.newTitle }); this.latestId++; this.newTitle = ''; }, removeItem (item) { var i = this.items.indexOf(item); this.items.splice(i, 1); }}}); </script>Copy the code

conclusion

If you are committed to a career in programming, start with a basic plan for your studies and a basic understanding of the technical requirements of the industry. Have an employment-oriented learning goal and work hard to see it through. If you are lucky enough to read this article, I hope it will help you and I wish you a satisfactory job.

No matter you are a zero-based cute new, or want to change the small partner, as long as you want to understand the front end, proficient in the front end, you are welcome to join our front end self-study group.

Here, you can find like-minded friends, learning partners who encourage each other, and the opportunity to share the experience of the great god and participate in the actual project. If you want to join a self-study group, do it now

Want to learn front-end Web and need PDF document friends can join this penguin skirt, front: 938,, middle: 051,, and finally: 673 skirt from students to big guys have, there are resources free to share, be there or be square oh!Copy the code