Advanced Vue.js Lecture 2

Posted by girlzz on Mon, 07 Oct 2019 11:39:41 +0200

Advanced Vue.js Lecture 2

11. Use transition-group element to implement list animation

<style>
    li{
        border: 1px dashed #999;
        margin: 5px;
        line-height: 35px;
        padding-left: 5px;
        font-size: 13px;
    }
    .v-enter,
    .v-leave-to{
        opacity: 0;
        transform: translateY(100px);
    }
    .v-enter-active,
    .v-leave-active{
        transition: all 0.6s ease;
    }

    /* Delete animation 
    The following v-move and v-leave-activity can be used together to achieve the effect of subsequent elements in the list, gradually floating up.
    */
    .v-move{
        transition: all 0.6s ease;
    }
    .v-leave-active{
        position: absolute;
    }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <label>Id:
                <input type="text" v-model="id">
            </label>
            <label>Name:
                    <input type="text" v-model="name">
            </label>
            <input type="button" value="Add to" @click="add">
        </div>

        <!-- <ul> -->
            <!-- When implementing list transitions, the elements that need to be transitioned are v-for Cyclic rendering, not usable transitino package
            //You need to use transition-group - >.

            <!-- to transition-group Tag adding appear Attributes to achieve the effect of admission -->
            <!-- By setting tag Attribute, specify transition-group Render as the specified element, if not specified tag Property, rendered by default span Label -->
            <transition-group appear tag="ul">
                    <li v-for="(item,i) in list" :key="item.id" @click="del(i)">
                            {{item.id}}---{{item.name}}
                    </li>
            </transition-group>
        <!-- </ul> -->
    </div> 

    <script>
    var app=new Vue({
        el:"#app",
        data:{
            id:"",
            name:"",
            list:[
                {id:1,name:"eunuch who conspired with Li Si to influence the succession to the First Emperor"},
                {id:2,name:"Wang pan"},
                {id:3,name:"Zhang Hao"},
                {id:4,name:"Yuan Meng Yang"}
            ]
        },
        methods:{
            add(){
                this.list.push({id:this.id,name:this.name})
                this.id=this.name=""
            },
            del(i){ //Deleting also implements animation
                this.list.splice(i,1)
            }
        }
    });
    </script>
</body>

12, why the data of the component must be a function

<div id="app">
        <test></test>
    </div>

    <template id="temp">
        <div>
            <input type="button" value="add one-tenth" v-on:click="increment">
            {{count}}
        </div>
    </template>
    <script>
       //Counter component, click the button, number plus one
       var dataObj={count:0}   //Create an object
    Vue.component("test",{
        template:"#temp",
        data:function(){
            return dataObj;
        },
        methods:{
            increment(){
                this.count+=1
            }
        }
    })

    var app=new Vue({
        el:"#app"
    });
    </script>

13. Custom key modifier

<div id="app">
        <!-- to input Frame binding kekyup.enter Event is an event triggered by clicking Enter after the input value 
        keyup.13(Key code)
        -->
        <!-- Input information in input box -->
        <!-- <input type="text" v-model="message" v-on:keyup.enter="add()"> -->
        <!-- Custom global key modifier -->
        <input type="text" v-model="message" v-on:keyup.f2="add()">
    </div>

    <script>
    var app=new Vue({
        el:"#app",
        data:{
            message:"12345"
        },
        methods:{
            add:function(){
                alert(this.message)
            }
        }
    });

    Vue.config.keyCodes.f2=113
    </script>

14. Customize global instructions for text boxes to get focus

<div id="app">
            <!-- The first way to set color instructions -->
            <!-- <input type="text" v-focus v-color> -->
            <!-- The second way to set color instructions -->
            <input type="text" v-focus v-color="'yellow'">
    </div>

    <script>
    // Define global directive v-focus using Vue.directive()
    // The first parameter is the name of the instruction. When defining the instruction name, there is no need to prefix "V-" before the instruction name, but when calling, it must be prefixed with "V-" to make the call.
    // Parametric 2: An object, on which there are some instruction-related functions that can perform related operations at specific stages.
    Vue.directive("focus",{
        bind:function(el){
            // Whenever an instruction is bound to an element, the bind function is executed immediately, once only.
            //Note: In each function, the first parameter is always el, which represents the element bound to the instruction. This El parameter is a native js object.
            //When the element has just bound instructions and has not been found in the dom, calling the focus method does not work.
            //Because an element can only get focus after inserting dom
           // Alert
        },
        inserted:function(el){  //Inserted means that the inserted function is executed when the element is inserted into the dom (triggered once)
            el.focus()  
        },
        updated:function(){ //Updates are executed when vNode updates, which may trigger multiple times

        }
    })
//Customize an instruction to set font color
//  The first way to set color instructions 
// Vue.directive("color",{
//     bind:function(el){
//         el.style.color="red"// and style-related operations can generally be performed in bind
//     }
// })
//  The second way to set color instructions
//  Get the passed value using the second parameter binding of the hook function
Vue.directive("color",{
    bind:function(el,binding){
        el.style.color=binding.value
    }
})
    new Vue({
        el:"#app"
    });
    </script>

15, Component - Way to Create Components 1

<div id="app">
            <my-com1></my-com1>
    </div>

    <script>
        //1.1 Use Vue.extend to create global Vue components
        var com1=Vue.extend({
            template:"<h3>This is used. Vue.extend Components created</h3>"    //Through the template attribute, the html structure to be displayed by the component is specified
        })
        //1.2 Use Vue.component("Component Name") to create component template objects
        //When Vue.component defines a global component, if the component name is named by hump, it needs to change the capitalized hump to lowercase when referring to the component, and use "-" links between the two words.
        Vue.component("myCom1",com1)

        // It can also be written like this.
        // Vue.component("mycom",Vue.extend({
        //     Template: "<h3> This is a component created using Vue.extend </h3>"
        // }))
    var app=new Vue({
        el:"#app"
    });
    </script>

16. Components - Ways to Create Components 2

<div id="app">
            <my></my>
    </div>

    <script>
        Vue.component("my",{
            //Note: No matter which way the component is created, the template attribute of the component points to the template content, which must have and can only have a single root element.
            template:"<div><h3>This is direct use. Vue.component Components created</h3><span>123</span></div>"
        })
       
    var app=new Vue({
        el:"#app"
    });
    </script>

17. Components - Ways to Create Components 3

<div id="app">
           <mycom3></mycom3>
    </div>
    <div id="app2">
        <login></login>
    </div>
<!--Under control div External use template Element Definition Component html Template structure -->
<template id="temp">
    <div>
        <h2>This is a component.</h2>
        <span>123</span>
    </div>
</template>
    <script>
       Vue.component("mycom3",{
           template:"#temp"
       });
       
    var app=new Vue({
        el:"#app"
    });
    // Customize private components using component properties
    new Vue({
        el:"#app2",
        components:{
            login:{
                template:"<h3>Customize private components</h3>"
            }
        }
    });
    </script>

18, Component Switching - Mode 1

<div id="app">
       <a href="" @click.prevent="isShow=true">Land</a>
       <a href="" @click.prevent="isShow=false">register</a>
       <login v-if="isShow==true"></login>
       <register v-if="isShow==false"></register>
   </div>

   <script>
       Vue.component("login",{
           template:"<h3>Landing module</h3>"
       });
       Vue.component("register",{
           template:"<h3>Registration module</h3>"
       });
   var app=new Vue({
       el:"#app",
       data:{
           isShow:true
       }
   });
   </script>

19, Component Switching - Mode 2

<div id="app">
       <a href="" @click.prevent="comName='login'">Land</a>
       <a href="" @click.prevent="comName='register'">register</a>
       <!-- vue Provided component To show the corresponding components
    component It's a placeholder.:is Property can be used to specify the name of the component being displayed-->
      <component :is="comName">

      </component>
   </div>

   <script>
       Vue.component("login",{
           template:"<h3>Landing module</h3>"
       });
       Vue.component("register",{
           template:"<h3>Registration module</h3>"
       });
   var app=new Vue({
       el:"#app",
       data:{
           comName:"login"   //Name of: is-bound component in current component
       }
   });
   </script>

20, component switching animation

 <style>
    .v-enter,
    .v-leave-to{
        opacity: 0;
        transform: translateX(150px);
    }
    .v-enter-active,
    .v-leave-active{
        transition: all 0.5s ease;
    }
    </style>
</head>
<body>
   <div id="app">
       <a href="" @click.prevent="comName='login'">Land</a>
       <a href="" @click.prevent="comName='register'">register</a>
      <!-- To achieve animation, use transition Just wrap up the components. Use transition You need the two groups above. style style -->
      <!-- adopt mode Property to set the mode of component switching -->
      <transition mode="out-in">
            <component :is="comName"></component>
      </transition>
   </div>

   <script>
       Vue.component("login",{
           template:"<h3>Landing module</h3>"
       });
       Vue.component("register",{
           template:"<h3>Registration module</h3>"
       });
   var app=new Vue({
       el:"#app",
       data:{
           comName:"login"   
       }
   });
   </script>

Topics: Vue Attribute

Hot Topics

©2024 Programmer Think