Fading Coder

One Final Commit for the Last Sprint

Home > Tech > Content

Vue Event Handling and Form Binding with Advanced Syntax

Tech 1
  1. v-on Event Listening
<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>Event Listening</title>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
        <button @click="message='New Content'">Button 1</button>
        <button @click="message='Content from Button 2'">Button 2</button>
        <button @click="updateMessage">Button 3</button>
        <button @click="processValue(500, $event)">Button 4</button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                message: 'Default Content'
            },
            methods: {
                updateMessage(event) {
                    console.log(event);
                    this.message = 'Updated Content from Method';
                },
                processValue(value, event) {
                    console.log(value, event);
                }
            }
        });
    </script>
</body>
</html>
  1. v-model Two-way Data Binding
<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>
</head>
<body>
    <div id="app">
        <p>Input value is: {{ inputVal }}</p>
        <input type="text" v-model="inputVal">
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                inputVal: ''
            }
        });
    </script>
</body>
</html>
  1. v-model for Textarea
<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>
</head>
<body>
    <div id="app">
        <p>Textarea content is: {{ textAreaVal }}</p>
        <textarea v-model="textAreaVal"></textarea>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                textAreaVal: ''
            }
        });
    </script>
</body>
</html>
  1. Radio Button Binding
<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>
</head>
<body>
    <div id="app">
        <p>Selected radio value is: {{ selectedRadio }}</p>
        <input type="radio" id="option1" value="Option 1" v-model="selectedRadio">
        <label for="option1">Option 1</label>
        <input type="radio" id="option2" value="Option 2" v-model="selectedRadio">
        <label for="option2">Option 2</label>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                selectedRadio: ''
            }
        });
    </script>
</body>
</html>
  1. Checkbox Binding
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <p>Checked values are: {{ checkedValues }}</p>
        <input type="checkbox" id="check1" value="Check 1" v-model="checkedValues">
        <label for="check1">Check 1</label>
        <input type="checkbox" id="check2" value="Check 2" v-model="checkedValues">
        <label for="check2">Check 2</label>
        <input type="checkbox" id="check3" value="Check 3" v-model="checkedValues">
        <label for="check3">Check 3</label>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            data: {
                checkedValues: []
            }
        });
    </script>
</body>
</html>
  1. Select Box Binding
<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>Select Box Binding</title>
</head>
<body>
    <div id="app">
        <p>Single select value: {{ singleSelect }}</p>
        <select v-model="singleSelect">
            <option value="">Please select</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
        <p>Multiple select value: {{ multiSelect }}</p>
        <select v-model="multiSelect" multiple>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                singleSelect: '',
                multiSelect: []
            }
        });
    </script>
</body>
</html>

  1. Custom Directives =======

  2. Global Directive

<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>Global Directive</title>
</head>
<body>
    <div id="app">
        <p v-highlight>Example of a global directive 1</p>
        <p v-highlight="highlightColor">Example of a global directive 2</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script>
        Vue.directive('highlight', {
            bind: function(el, binding) {
                el.style.backgroundColor = binding.value || 'red';
            }
        });
        new Vue({
            el: '#app',
            data: {
                highlightColor: 'green'
            }
        });
    </script>
</body>
</html>
  1. Local Dierctive
<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>Local Directive</title>
</head>
<body>
    <div id="app">
        <p v-highlight="'yellow'">Example of a local directive 1</p>
        <p v-highlight="highlightColor">Example of a local directive 2</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                highlightColor: 'green'
            },
            directives: {
                highlight: {
                    bind: function(el, binding) {
                        el.style.backgroundColor = binding.value || 'red';
                    }
                }
            }
        });
    </script>
</body>
</html>

  1. Filters =====

  2. Global Filter

<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>Global Filter</title>
</head>
<body>
    <div id="app">{{ timestamp | formatTime }}</div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script>
        Vue.filter('formatTime', function(value) {
            const date = new Date(value);
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
        });
        new Vue({
            el: '#app',
            data: {
                timestamp: 1623041514000
            }
        });
    </script>
</body>
</html>
  1. Local Filter
<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>Local Filter</title>
</head>
<body>
    <div id="app">{{ timestamp | formatTime }}</div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                timestamp: 1623041514023
            },
            filters: {
                formatTime(value) {
                    const date = new Date(value);
                    const year = date.getFullYear();
                    const month = date.getMonth() + 1;
                    const day = date.getDate();
                    return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
                }
            }
        });
    </script>
</body>
</html>
Tags: vueEvent Handlingform binding
Back to List

Prev: Configuring DingTalk Alerts with Prometheus Operator Alertmanager

Next: Cross-Domain Data Fetching Using JSONP in JavaScript

Related Articles

Understanding Strong and Weak References in Java

Strong References Strong reference are the most prevalent type of object referencing in Java. When an object has a strong reference pointing to it, the garbage collector will not reclaim its memory. F...

Comprehensive Guide to SSTI Explained with Payload Bypass Techniques

Introduction Server-Side Template Injection (SSTI) is a vulnerability in web applications where user input is improper handled within the template engine and executed on the server. This exploit can r...

Implement Image Upload Functionality for Django Integrated TinyMCE Editor

Django’s Admin panel is highly user-friendly, and pairing it with TinyMCE, an effective rich text editor, simplifies content management significantly. Combining the two is particular useful for bloggi...

Leave a Comment

Anonymous

◎Feel free to join the discussion and share your thoughts.

Copyright © fadingcoder.top