Small white learning Vue series directory

  • 1. Introduction
  • Learn Vue 2. Instruction
  • 3. Bind Class and Style
  • Vue 4. Conditional rendering and list rendering


We learned some of the basic instructions of VUE earlier, so this section continues.

instruction

Directives are special attributes prefixed with a V -. The value of the directive attribute is expected to be a single JavaScript expression (v-for is the exception, which we’ll discuss later). The directive’s job is to react to the DOM with the collateral effects of changing the value of an expression.

V-on is used to listen for DOM eventsCopy the code
V-once ="property" performs a one-time assignment. When data changes, the contents of the interpolation are not updatedCopy the code
V-html ="rawHtml" renders a block of HTML code for a string as real HTML, not plain textCopy the code
V-bind :attribute="property" can be abbreviated to :attribute="property"Copy the code
V-on :event="func" can be shortened to @event="func"Copy the code

Matters needing attention

  • When creating VUE instances, use normal functions instead of arrow functions

  • {{statement}} Only one expression or chained method can be inside the curly braces.

{{(function(){
        return message
    })()
}}
Copy the code

The listener

<! DOCTYPE html><html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <! -- the Vue. Js v2.6.12 -- -- >
</head>
<body>

    <div id="app">
        <p>Ask a question: <input v-model="question" /></p>
    </div>
    <hr/>

</body>

<script type="text/javascript">
    var app = new Vue({
        el: '#app'.data: {
            question: ' '
        },
        // Listen for changes in property values (new value, old value)
        watch: {
            question: function (newValue, oldValue) {
                console.log(`question's newValue: ${newValue}`)
                console.log(`question's oldValue: ${oldValue}`)}}})</script>

</html>
Copy the code