Basic usage steps

① Import the script file of vue.js

<script src="./lib/vue-2.6.12.js"></script>

② Create vm instance object (vue instance object)
③ With the el option, declare a DOM area in the page that will be controlled by vue

 <script>
    const vm = new Vue({
      el: "#app",
      data: {
        username: "zs",
      },
    });
  </script>

④ Declare the corresponding el element

 <div id="app">full name:{{username}}</div>

instructions

① Content rendering instructions:

Used to assist developers in rendering the text content of DOM elements

instructions	matters needing attention
v-text	(rarely used) because it overrides the default value in the element
{{ }}	Default values within elements are not overridden
v-html	Render the string containing HTML tags as HTML elements of the page (the above two are not allowed)

usage method:

<div id="app">
      <p v-text="username"></p>
      <p>{{username}}</p>
      <p v-html="gender"></p>
    </div>

<script>
    const vm = new Vue({
      el: "#app",
      data: {
        username: "crystal",
        gender: "<b>female</b>",
      },
    });
  </script>

result:

② Attribute binding instruction

Dynamically bind attribute values for the attributes of an element

instructions	matters needing attention
v-bind	Binding instruction

usage method:

<input type="text" v-bind:placeholder="info" />

const vm = new Vue({
      el: "input",
      data: {
        info: "Please enter",
      },
    });

result:

Abbreviation: because v-bind is often used, vue officially provides a simplified form for it (abbreviation in English:)

Abbreviation:

  <input type="text" :placeholder="info" />

③ Event binding instruction

Auxiliary programmers bind event listeners for DOM elements

instructions	Abbreviation
v-on:click	@click
v-on:input	@input
v-on:keyup	@keyup

usage method:

  <div id="app">
      <button v-on:click="btn">Button</button>
    </div>

 const vm = new Vue({
      el: "#app",
      //Node that declares the event handler function
      methods: {
        btn: function () {
          console.log("ok");
        },
      },
    });

Abbreviation: (abbreviated as @)

Abbreviation:

 <div id="app">
      <button @click="btn">Button</button>
    </div>

Case: self adding

Bind a click event, press the button once, and the count value is increased by 1

  <div id="app">
      <h3>count Value of:{{count}}</h3>
      <button @click="add">+1</button>
    </div>

 <script>
    const vm = new Vue({
      el: "#app",
      data: {
        count: 0,
      },
      //Node that declares the event handler function
      methods: {
        add() {
          vm.count++;
          return;
        },
      },
    });
   
  </script>

$event:

e v e n t yes v u e carry Supply of special Special change amount ， use come surface show primary living of matter piece ginseng number yes as e v e n t . Event is a special variable provided by vue to represent the native event parameter object event. Event is a special variable provided by vue to represent the native event parameter object event. Event resolves the event parameter object event
Covered issues.

Event modifier:

To assist programmers to control the triggering of events more conveniently.

Event modifier	explain
.prevent	Block default behavior (for example, prevent a connection from jumping, prevent form submission, etc.)
.stop	Prevent event bubbling
.capture	Trigger the current event handler in capture mode
.once	The bound event is triggered only once
.self	The event handler function is triggered only when event.target is the current element itself

Key modifier:

When monitoring keyboard events, we often need to judge the detailed keys. At this point, you can add key modifiers for keyboard related events

Key modifier	The key pressed is
vm.submit()	Enter
vm.clearInput	Esc

④ Bidirectional binding instruction

It is used to assist developers to quickly obtain form data without operating DOM.

instructions	explain
v-model	Facilitate the processing of user input

v-model modifier:

Modifier	explain
.number	Automatically convert user input values to numeric types
.trim	Automatically filter the first and last white space characters entered by the user
.lazy	Update at change instead of input

Note: the v-model instruction can only be used with form elements, not with ordinary tags

usage method:

 <div id="app">
      <h3>count Value of:{{count}}</h3>
      <input type="text" v-model="count" />
    </div>

 <script>
    const vm = new Vue({
      el: "#app",
      data: {
        count: "0",
      },
    });
  </script>

result:

⑤ Conditional rendering instruction

Control the display and hiding of DOM on demand.

instructions	explain
v-if	Create or remove DOM elements dynamically
v-show	style = "display: none;" styles are dynamically added or removed for elements

• If you need to switch very frequently, it is better to use v-show
• If the conditions rarely change at run time, it is better to use v-if

usage method:

 <div id="app">
      <button @click="flag=!flag">toggle</button>
      <p v-if="flag">v-if</p>
      <p v-show="flag">v-show</p>
    </div>

 const vm = new Vue({
      el: "#app",
      data: {
        flag: true,
        // If the flag is true, it will be displayed
        // If the flag is false, it is hidden
      },
    });

result:

⑥ List rendering instructions

It is used to assist developers to render a list structure based on an array

instructions	explain
v-for	The v-for instruction requires special syntax in the form of item in items

• items is the array to be cycled
• Item is each item that is cycled

Index in v-for:

The v-for instruction also supports an optional second parameter, the index of the current item. The syntax format is (item, index) in items

Use key to maintain the status of the list:

In order to give vue a hint so that it can track the identity of each node, so as to improve the rendering performance on the premise of ensuring that the stateful list is updated correctly. In this case, you need to provide a unique key attribute for each item

key precautions:

① The value of key can only be string or numeric type
② The value of the key must be unique (that is, the value of the key cannot be repeated)
③ It is recommended to take the value of the data item id attribute as the value of the key (because the value of the id attribute is unique)
④ It makes no sense to use the value of index as the value of key (because the value of index is not unique)
⑤ It is recommended to specify the value of key when using the v-for instruction (not only to improve performance, but also to prevent list state disorder)

usage method:

 <div id="app">
      <!-- Add user's area -->
      <div>
        <input type="text" v-model="name" />
        <button @click="addNewUser">add to</button>
      </div>

      <!-- User list area -->
      <ul>
        <li v-for="(user, index) in userlist" :key="user.id">
          <input type="checkbox" />
          full name:{{user.name}}
        </li>
      </ul>
    </div>

 <script src="./lib/vue-2.6.12.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          // User list
          userlist: [
            { id: 1, name: "zs" },
            { id: 2, name: "ls" },
          ],
          // Enter your user name
          name: "",
          // Next available id value
          nextId: 3,
        },
        methods: {
          // Click the Add button
          addNewUser() {
            this.userlist.unshift({ id: this.nextId, name: this.name });
            this.name = "";
            this.nextId++;
          },
        },
      });
    </script>