1. Style binding

Both the class and style attributes control the appearance of elements, and we can bind them using the V-bind directive

(1) Bind class

  • Object syntax

We can pass an object to V-bind :class, which will dynamically switch classes based on the value of the incoming object

<! DOCTYPEhtml>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .warn {
            background: yellow;
        }
        .error {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:class="{ warn: isWarn, error: isError }">Error</div>
    </div>

    <script>
        new Vue({
            el: '#app'.data: {
                isWarn: true.isError: true}})</script>
</body>

</html>
Copy the code
  • Array syntax

We can also pass an array to V-bind :class to apply a class list

And we can use ternary operators in arrays as a condition

<! DOCTYPEhtml>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .warn {
            background: yellow;
        }
        .error {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-bind:class="[warnClass, isError ? errorClass : '']">Error</div>
    </div>

    <script>
        new Vue({
            el: '#app'.data: {
                warnClass: 'warn'.errorClass: 'error'.isError: true}})</script>
</body>

</html>
Copy the code

(2) Binding style

  • Object syntax

We can simply pass a style object to V-bind :style, which will update the style based on the style object

<! DOCTYPEhtml>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <div v-bind:style="styleObject">Hello world</div>
    </div>

    <script>
        new Vue({
            el: '#app'.data: {
                styleObject: {
                    color: 'green'.fontSize: '30px'}}})</script>
</body>

</html>
Copy the code
  • Array syntax

We can bind multiple style objects to the same element

Note, however, that the value of the latter object overrides the value of the previous object for the same attribute

<! DOCTYPEhtml>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <div v-bind:style="[baseStyleObject, overrideStyleObject]">Hello world</div>
    </div>

    <script>
        new Vue({
            el: '#app'.data: {
                baseStyleObject: {
                    color: 'green'.fontSize: '30px'
                },
                overrideStyleObject: {
                    color: 'red'}}})</script>
</body>

</html>
Copy the code

2. Event handling

(1) Event processing

The V-ON directive listens for DOM events and reacts to them, and we can pass a JavaScript expression to v-ON

  • Executing JavaScript code
<! DOCTYPEhtml>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <p>{{ counter }}</p>
        <! Execute JavaScript code when a click event occurs -->
        <button v-on:click="counter += 1">Add 1</button>
    </div>

	<script>
        new Vue({
            el: '#app'.data: {
                counter: 0}})</script>
</body>

</html>
Copy the code
  • Bind JavaScript methods
<! DOCTYPEhtml>
<html>

<head>
    <title>Demo</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>

<body>
    <div id="app">
        <! Execute JavaScript methods when a click event occurs -->
        <button v-on:click="greet">greet</button>
    </div>

    <script>
        new Vue({
            el: '#app'.data: {
                name: 'Vue'
            },
            methods: {
                greet: function () {
                    alert('Hello ' + this.name)
                }
            }
        })
    </script>
</body>

</html>
Copy the code
  • Calling JavaScript methods
<! DOCTYPEhtml>
<html>

<head>
    <meta charset="utf-8">
    <title>Demo</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <! When a click event occurs, call a JavaScript method and pass an argument to the method -->
        <button v-on:click="greet('Alice')">Say Hello To Alice</button>
        </br></br>
        <button v-on:click="greet('Bob')">Say Hello To Bob</button>
    </div>

    <script>
        new Vue({
            el: '#app'.methods: {
                greet: function (name) {
                    alert('Hello ' + name)
                }
            }
        })
    </script>
</body>

</html>
Copy the code

(2) Event modifier

Event modifiers are used to handle DOM event details and are invoked through the instruction suffix represented by dots. Common event modifiers include:

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
<! For example, submit events no longer reload the page -->
<form v-on:submit.prevent="onSubmit"></form>
Copy the code

(3) Key modifier

Keycode modifiers are used to listen for keyboard events and also invoke modifiers via instruction suffixes represented by dots. Common aliases for keycodes include:

  • .enter
  • .tab
  • .delete
  • .esc
  • .space
  • .up
  • .down
  • .left
  • .right
<! -- For example, listen to Enter -->
<input v-on:keyup.enter="onSubmit">
Copy the code

(4) System modifiers

System modifiers can be used to implement a listener that fires a mouse or keyboard event only when the corresponding key is pressed. Common system modifiers include:

  • .ctrl
  • .alt
  • .shift
  • .meta
<! -- For example, listen on Alt and press C -->
<input v-on:keyup.alt.67="clear">
Copy the code