1.1 HelloVuejs

How to start learning Vue, of course, is to write a simple demo, directly into the code. Here by the CDN < script SRC = “https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js” > < / script > get vuejs.

Vue is declarative programming, unlike the imperative programming of jquery.

1.1.1 Imperative programming

Native JS practices (imperative programming)

  1. Create the div element and set the ID attribute
  2. Define a variable called message
  3. Display the message variable in a div element
  4. Modify message data
  5. Replace the modified element with a div

1.1.2 Declarative programming

Vue (declarative)

  1. Create a div element and set the ID attribute
  2. Define a VUE object on which to mount the div
  3. Define the variable Message inside the VUE object and bind the data
  4. Display the message variable on the div element
  5. If you modify the message variable in the vue object, the div element data automatically changes

      
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <title>HelloVuejs</title>
</head>
<body>
  <div id="app">
      <h2>{{message}}</h2>
      <p>{{name}}</p>
  </div>
  <script>
    //let variable /const constant
    // Programming paradigm: declarative programming
    const app = new Vue({
      el:"#app".// Used to mount the element to be managed
      data:{// Define data
        message:"HelloVuejs",
        name:"zzz"}})</script>
</body>
</html>
Copy the code

Press F12 in Chrome, console in Developer mode, change the message value of the vue object, and the page display changes accordingly.

{{message}} means to output the variable message to the tag h2. All vUE syntax must be in the div element mounted by the vue object. It is not valid if used outside the div element. El :”#app” means to mount a div with id app on a vue object, and data represents a variable object.

1.2 Display of VUE List (V-for)

Common arrays in development have a lot of data and need to be displayed in whole or in part. In native JS, you need to use a for loop to replace div elements in turn. In VUE, you can use V-for to simply iterate to generate element nodes.


      
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <title>Vue list display</title>
</head>
<body>
  <div id="app">
      <h2>{{message}}</h2>
      <ul>
        <li v-for="(item, index) in movies" :key="index">{{item}}</li>
      </ul>
  </div>
  <script>
    const app = new Vue({
      el:"#app".// Used to mount the element to be managed
      data:{// Define data
        message:"Hello?",
        movies:["Interstellar"."Sea king"."A Chinese Odyssey".The Avengers]// Define an array}})</script>
</body>
</html>
Copy the code

The display result is as follows:

  • {{item}}

    • item indicates the element currently iterated, index indicates the element index, and to give Vue a hint that it can track the identity of each node, To reuse and reorder existing elements, you need to provide a unique key attribute for each item. It is recommended to provide key attributes whenever possible with V-for, unless traversing the output DOM content is simple or you deliberately rely on default behavior for performance gains.

    Because it is a general mechanism for Vue to identify nodes, key is not specifically associated with V-for.

    Do not use non-primitive values such as objects or arrays as v-for keys. Use a string or numeric value.

    1.3 VUE case – Counters

    Use vUE to implement a small counter, click the + button, counter +1, use the – button counter -1.

    
      
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <title>Vue counter</title>
</head>
<body>
  <div id="app">
      <h2>Current count: {{count}}</h2>
      <! -- <button v-on:click="count--">-</button> <button v-on:click="count++">+</button> -->
      <button v-on:click="sub()">-</button>
      <button @click="add()">+</button>
  </div>
  <script>
    const app = new Vue({
      el:"#app".// Used to mount the element to be managed
      data:{// Define data
        count:0
      },
      methods: {
        add:function(){
          console.log("add")
          this.count++
        },
        sub:function(){
          console.log("sub")
          this.count--
        }
      },
    })
  </script>
</body>
</html>
Copy the code

    1. Define a vue object and initialize a variable count=0

    2. Define two methods add and sub for count++ or count–

    3. Define two button objects and add click events to the button

      Use methods in vue objects to represent collections of methods, bind elements to listen for click events using the v-on:click keyword, bind buttons to click events respectively, and bind the add and sub callbacks to trigger events. You can also use expressions directly in callback methods. For example: count++ and count–.