Vue Learning Notes (Horselight) (Simple Calculator)

Posted by sms.sanal on Sun, 03 Oct 2021 23:21:59 +0200

Vue Base Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
    <!-- VUE The area of the element under control is V  -->
    <div id="app">
        <p>{{ msg }}</p>
    </div>
    <script>
        //There is an extra Vue constructor in the browser's memory after importing the package
        //The VM object is the VM dispatcher in MVVM
        var vm = new Vue({
            el:'#app', // indicates the current Vue instance, which area of the page to control
            //Here, data is M in MVVM that holds data for each page
            data: { //Stores data for el
                msg: 'Welcome to Learning vue'
            }
        })
    </script>
</body>
</html>

Basic Instructions

v-cloak solves flickering of interpolation expression

<style>
    [v-cloak]{
        display: none;
    }
</style>

The v-text does not flicker and covers the original content of the element, but the interpolation expression only replaces its placeholder and does not empty the entire content

v-html overwrites the content in the element, but parses the HTML content

Short description of v-bind property binding mechanism: (legal js expressions can be written)

Short form of v-on event binding mechanism @

v-model bidirectional data binding

v-if removes or creates elements every time, with high switching performance consumption

v-show does not delete or create the DOM at a time, but switches the display:none style of the element with higher initial rendering consumption

Note: The difference between v-bind and v-model

v-bind only implements one-way data binding, from M to V

v-model can only be used in form elements such as input(radio,text,address,email...) checkbox...

Note: v-on event modifiers:

Stop to stop bubbles

.prevent prevents default behavior

.capture implements capture

The.self implementation triggers the event handler only when the current element is clicked

The.Once event is triggered only once

.self only prevents the triggering of bubbling on itself, not others like stop.

horse race lamp

Bind a click event to the wave button. In the event handler of the button, write the relevant business logic code: get the msg string, call substring of the string to intercept the string, intercept the first character, and put it in the last position.
To achieve automatic interception, you need to place it in a timer.
Bind a click event to the button. In the button's event handler, get the id value returned by the timer and empty it.
You need to determine if the id value is null to ensure continuous operation.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="Wave up" @click="lang">
        <input type="button" value="Low-key">
        <h4>
            {{msg}}
        </h4>
    </div>
</body>

JS Code

var vm = new Vue({
    el:'#app',
    data:{
        msg:'Obscene development, no waves~~',
        intervalId = null
    },
    methods:{
        lang(){
            //Intercept the first character to the last position, where the first character follows the rest
            //Place in timer for automatic interception
            /* setInterval(function(){
                var start = this.msg.substring(0,1);
                var end = this.msg.substring(1);
                this.msg = end + start;
            } ,400)			*/
            //this is pointing to window within the timer instead of calling msg in data
            
            if(this.intervalId != null) return 0;
            this.intervalId = setInterval( ()=>{	//If you set the id directly here, the stop function cannot get it, so the definition is obtained in the data through this
                var start = this.msg.substring(0,1);
                var end = this.msg.substring(1);
                this.msg = end + start;
            } ,400)
            //Using the arrow function, the this inside the arrow function is consistent with the outside
            //Data data changes, data updates automatically, synchronization from data to page
        },
        stop(){
            //Get the id returned by setInterval and empty it
            clearInterval(this.intervalId);
            this.intervalId = null;		//Re-set intervalId to null whenever timer is cleared, otherwise waves cannot continue 
        }
    }
})

Note: setInterval() function

SetInterval (code string/function, time interval (ms))

Returns an ID that can be passed to clearInterval(), clearTimeout(), to cancel execution.

Simple calculator

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>6</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>

<body>
    <div id="app">
        <input type="text" v-model="n1">
        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="n2">
        <input type="button" value="=" @click="calc">
        <input type="text" v-model="result">
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                n1: 0,
                n2: 0,
                result: 0,
                opt: '+',
            },
            methods: {
                calc() {
                    switch (this.opt) {
                        case '+':
                            this.result = parseInt(this.n1) + parseInt(this.n2);
                            break;
                        case '-':
                            this.result = parseInt(this.n1) - parseInt(this.n2);
                            break;
                        case '*':
                            this.result = parseInt(this.n1) * parseInt(this.n2);
                            break;
                        case '/':
                            this.result = parseInt(this.n1) / parseInt(this.n2);
                            break;
                    }


                    //Be opportunistic
                    // var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'
                    // this.result=eval(codeStr);
                }
            },
        });
    </script>
</body>

</html>

Topics: Javascript Vue.js html

Programmer Think