1 Event Listening

1.1 Use of V-ON

V-on :click can be written as @click

<div class="app"> {{num}} < button@click ="increment"> </button> </div> <script SRC ="js/vue.js"></script> <script> const  app = new Vue({ el: '.app', data: { num: 1, }, methods: { increment() { this.num++; ,}}}); </script>Copy the code

Listen for events via V-ON and point to a function in methods.

1.2 v – on parameters

<button @click="increment"> </button>Copy the code
  • If you don’t need a parameter, you don’t need to add () to the end of the method.
  • When there are no arguments in parentheses,Vue passes the browser-generated Event event object into the method as an argument
<button @click="btn3Click(ABC, $event)"> </button>Copy the code

If you need to pass in both parameters and events, you can pass in $event.

1.3 V-ON modifier

Usage:

<button @click.stop="increment"> </button>Copy the code

Common modifiers:

.stop: stop events from bubbling, called

. Prevent: prevents default events

. Enter: listens for the enter key

. Once: This event is triggered only once

2. Conditional Judgment

2.1 V-if, V-else -if, V-else, v-show

< h2 v - if = "score > = 90" > good < / h2 > < h2 v - else - if = "score > = 80" > good < / h2 > < h2 v - else - if = "score > = 60" > in < / h2 > < h2 v - else > fail < / h2 >Copy the code

When the condition after v-if is false, the corresponding element, tag, and its child elements are not rendered.

2.2 Differences between V-IF and V-show

<h2 v-if="isShow" id="aaa">{{message}}</h2>
<h2 v-show="isShow" id="bbb">{{message}}</h2>
Copy the code

When isShow is true, both render, but when isShow is false, the v-if tag is not rendered in the DOM, and the v-show tag is hidden in the DOM, equivalent to display: None;

3 Iterate

3.1 V-for Traversal objects

ul>
    <li v-for="(value, key, index) in info">{{value}}-{{key}}-{{index}}</li>
  </ul>
Copy the code

You can get the value, name, and index number

3.2 V-for traversal number group

<ul>
    <li v-for="(item, index) in names">
      {{index+1}}.{{item}}
    </li>
  </ul>
Copy the code

You can get elements, index values

3.3 Adding the Key Attribute when V-for is Used

<ul>
    <li v-for="item in letters" :key="item">{{item}}</li>
</ul>
Copy the code

The key’s main purpose is to update the virtual DOM efficiently

  • Without a key: for example, if you add an F between B and C, the Diff algorithm defaults to update C to F, D to C, E to D, and then insert E.
  • When the key is added, the Diff algorithm can correctly identify the node and find the correct location to insert the new node.

Note the key binding element, not the index number

4 case exercises

A shopping cart case to practice event listening and loop traversal.

Duheng678. Making. IO/Vue – not…

5 v-model

5.1 usage

<div class="app"> <h2>{{message}}</h2> <input type="text" v-model="message" /> </div> <script src=".. / js/vue. Js "> < / script > < script > const app = new vue ({el: 'app', data: {message: 'departure,},}); </script>Copy the code
  • When the input content is entered in the input box, because the V-Model in the input is bound to Message, the input content will be transmitted to Message in real time, and message will change.
  • When a message changes, the DOM changes in response because we use Mustache syntax above to insert the value of a message into the DOM. Therefore, two-way binding is achieved through v-Model.

5.2 the principle

<div class="app">
    <input type="text" v-model="message" />
    <input type="text" :value="message" @input="message = $event.target.value" />
    <h2>{{message}}</h2>
</div>
Copy the code

V-model can be understood as syntax sugar, equivalent to v-bind binding value, and then V-on listening for input events.

5.3 V-model is used with radio,checkbox and SELECT

V – model combined with the radio

<div class="app"> <label for="man"> <input type="radio" id="man" value=" male "V-model ="sex" /> male </label> <label For ="woman"> <input type="radio" id="woman" value=" female "V-model ="sex" /> female </label> <h2> {{sex}}</h2> </div> <script src=".. / js/vue. Js "> < / script > < script > const app = new vue ({el: 'app', data: {sex: 'male',},}); </script>Copy the code

Connect the value of radio with sex in data through V-model. Click “boy” and the value of “sex” will be changed to “male” and vice versa.

V – model combining the checkbox

<div class="app"> <! - 1. The radio -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- > < label for = "something" > < input type = "checkbox" id = "something" IsAgree v - model = "" / > agreement < / label > < h2 > agreement: {{isAgree}} < / h2 > <! - 2. Alternative -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- > < label v - for = "item in balls" : for = "item" > < input Type = "checkbox" : id = "item" : value = "item" v - model = "hobbies" / > {{item}} < / label > < h2 > your hobby is {{hobbies}} < / h2 > < / div > < script  src=".. /js/vue.js"></script> <script> const app = new Vue({ el: '.app', data: { isAgree: true, hobbies: [], balls: [' basketball ', 'football ',' baseball ', 'football ',' tennis '],},}); </script>Copy the code

V – model combined with the select

<div class="app"> <! - 1. The radio -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- > < select name = "" id =" "v - model =" ball "> < option Value =" soccer "> soccer </option> <option value=" basketball "> basketball </option> <option value=" baseball "> baseball </option> <option value=" tennis "> tennis </option> </select> <h2> select {{ball}}</h2> <! - 2. Radio -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- > < select name = "" id =" "v - model =" balls "multiple > < option Value =" soccer "> soccer </option> <option value=" basketball "> basketball </option> <option value=" baseball "> baseball </option> <option value=" tennis "> tennis </option> < / select > < h2 > select {{balls}} < / h2 > < / div > < script SRC = ".. / js/vue. Js "> < / script > < script > const app = new vue ({el: 'app', data: {ball: 'basketball', balls: '},}); </script>Copy the code

5.4 modifier

  • Lazy: changes only when you press Enter or lose focus
  • Number: By default, v-model assigns a string value, and adding. Number converts it to number
  • Trim: Trim input with whitespace, line breaks, etc