day3 -- common rendering & lifecycle

conditional rendering

v-if = 'expression'

v-else-if = "expression"

v-else = "expression"

It is suitable for scenes with low switching frequency

Features: DOM elements not displayed are removed directly

When the above three are used together, the results shall not be interrupted

v-show = "expression"

It is suitable for scenes with high switching frequency

Features: DOM elements that are not displayed are not removed, but are only hidden with style (display:none)

Difference between v-if and v-show: v-if elements may not be available, but v-show elements must be available

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>conditional rendering </title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <!-- container -->
    <div id="root">
        <!-- conditional rendering  -->
        <h2>conditional rendering </h2>
        <hr>
        <h3 v-show='show'>hello briup!</h3>
        <!-- v-if -->
        <!-- <h3 v-if='1==2'>Hello, JEP</h3>
        <h3 v-else-if='1==2'>Hello tom</h3>
        <h3 v-else>Hello  terry</h3> -->
        <h3 v-if='1==1'>Hello, JEP</h3>
        <h3 v-if='1==1'>Hello tom</h3>
        <h3 v-if='1==1'>Hello terry</h3>


    </div>
    
</body>
<script>
    const vm=new Vue({
        el:'#root',
        data:{
            show:true
        }
       
    })
</script>
</html>

List rendering

v-for="(item,index) in xxx" :key="yyy"

Used to display list data

You can traverse arrays, objects, strings, and times

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>List rendering</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- List rendering -->
        <h1>List rendering--Personnel information(Traversal of array)</h1>
        <ul>
            <!-- <li>Zhang san12</li>
            <li>Li si13</li>
            <li>Wang wu14</li> -->
            <li v-for='p in persons' :key='p.id'>{{p.name}}--{{p.age}}</li>
        </ul>
        <!-- List rendering -->
        <h1>List rendering--Car information(Traversal of objects)</h1>
        <ul>
            <li v-for='p,index,a,b in cars' :key='index'>{{p}}--{{index}}--{{a}}-{{b}}</li>
        </ul>
        <!-- String traversal -->
        <h2>String traversal</h2>
        <ul>
            <li v-for='(char,index) in str'>{{char}}---{{index}}</li>
        </ul>
        <!-- Traversal of times -->
        <h2>Traversal of times</h2>
        <ul>
            <li v-for='(item,index) in 5'>{{item}}---{{index}}</li>
        </ul>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            persons:[
                {id:1,name:'Zhang San',age:12},
                {id:2,name:'Li Si',age:13},
                {id:3,name:'Wang Wu',age:14},
            ],
            cars:{
                name:'audi',
                price:'70w',
                color:'black'
            },
            str:'hello',

        },
       
    })
</script>
</html>

Other rendering

v-text renders text content to its node

Difference from interpolation syntax: v-text will replace the content in the node, {xxx}} will not

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-test</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>hello,{{name}}</h2>
        <!-- v-text Will replace (overwrite) the original content -->
        <h2 v-text='name'>hello,</h2>
    </div>
    
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'briup'
        }
    })
</script>
</html>

v-html renders HTML to its node

The difference between v-text and v-text is that v-text does not parse the contents, and v-html parses the contents

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-html</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>hello,{{name}}</h2>
        <!-- v-html Will be resolved by html Generated content -->
        <h2 v-html='name'>hello,</h2>
    </div>
    
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            name:'<h3>hello briup</h3>'
        }
    })
</script>
</html>

V-once the node where v-once is located is regarded as static content after the first dynamic rendering

Subsequent data changes will not update the structure of v-once, and can be used to optimize performance

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-once</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2 v-once>this is old {{n}}</h2>
        <h2>this is {{n}}</h2>
        <button @click='n++'>click n add one-tenth</button>
        <button @click='n--'>click n Minus one</button>
    </div>
    
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            n:0
        },
      
    })
</script>
</html>

‚Äč

life cycle

Alias: lifecycle callback function, lifecycle function, hook function

Vue calls some special named functions for us at critical moments

The name of the lifecycle function cannot be changed, but the specific content of the function is written by the programmer according to the requirements

this in the lifecycle function points to the vm or component instance object

Four stages and eight processes

1. Create

beforeCreate before instance creation

The data in data cannot be accessed through vm. The method in methods

Created after instance creation

You can access the data in data and the methods in methods through vm

2. Mount

The pre mount template is more complete than that one, but has not been mounted to the page

After mounting, the compilation is completed and mounted to the page

3. Update

data and page are out of sync before update

data and page synchronization after update

4. Destruction

vm.$destroy() must be manually triggered before destruction

After destruction

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue life cycle</title>
    <script src="../js/vue.js"></script>
    
</head>

<body>
    <div id="app">
        <h2>this is {{n}}</h2>
        <button @click='add'>Click plus one</button>
        <button @click='bye'>Destroy instance</button>
    </div>

</body>
<script>
    new Vue({
        el: '#app',
        // template: '<div>
        //     <h2>this is {{n}}</h2>
        //     < button @ Click ='add '> click Add one < / button >
        //     </div>',
        data: {
            n: 1
        },
        methods: {
            // Click plus one
            add() {
                this.n++
            },
            bye(){
                this.$destroy()
            }
        },
        //Before instance creation is completed
        beforeCreate() {
            console.log('beforecreate');
            // console.log(this.n);//undefined
            // this.add()//not a function

        },
        // Instance creation completed
        created() {
            console.log('created');
            // console.log(this.n);
            // this.add();
            // debugger / / the page has not been parsed yet
        },
        // The template has been compiled but not mounted to the page
        beforeMount() {
            console.log('beforeMount');
            // debugger / / the page has not been parsed
        },
        //data,methods and real DOM are also loaded, compiled and mounted on the page
        mounted() {
            console.log('mounted');
            console.log(this.n);
            // debugger
        },
        // Before data update, data and page are out of sync
        beforeUpdate() {
            console.log('beforeUpdate');
            
        },
        // After the data is updated, the data and page are synchronized
        updated() {
            console.log('updated');
            // debugger
        },
        // vm.$destroy() must be manually triggered before destruction
        beforeDestroy() {
            console.log('beforeDestroy')
            console.log(this.n);
            // debugger
        },

        // After destruction
        destroyed() {
            console.log('destroyed')
        },


    })
</script>

</html>

Tags: Javascript Vue Vue.js

Posted on Mon, 11 Oct 2021 14:54:13 -0400 by php4hosting