Vue introductory tutorial – Properties, events, and bidirectional binding

Welcome to pay attention to the blogger public number “Java master”, focus on sharing the Java field dry goods article, pay attention to reply to “resources”, free to receive the network’s hottest Java architect study PDF, reproduced please specify the source www.javaman.cn/vue/vue-mod…

In the last section we looked at the basic syntax of Vue and the conditional and loop statements. Today we will continue to talk about vue event binding!

1, v-ON (can be usedv-onThe directive listens for DOM events and runs some JavaScript code when triggered.)

(1) Introducing vue.js–Vue. Min.js is introduced through CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>- the CDN is introduced into the vue. Min. JsCopy the code
(2) the HTML code

(3) The running results are shown as follows:

2. V-bind (bind data and element attributes)

(1) Introducing vue.js–Vue. Min.js is introduced through CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>- the CDN is introduced into the vue. Min. JsCopy the code
(2) the HTML code

(3) The running results are shown as follows:

PS: the difference between v-ON and V-bind is: V-ON is an event binding; Don’t use v-bind incorrectly for attribute binding
<a v-bind:click="submit()"> Click on me </a><br>Copy the code

Can be executed, but page refresh directly runs the function, which does not meet the requirements

3. V-model (Form input binding)

Internally, the V-Model uses different properties for different input elements and throws different events:

  • Text and Textarea elements are usedvalueThe property andinputEvents;
  • Checkbox and radio usecheckedThe property andchangeEvents;
  • The select field willvalueAs prop and willchangeAs an event.
(1) Introducing vue.js–Vue. Min.js is introduced through CDN
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>- the CDN is introduced into the vue. Min. JsCopy the code
(2) the HTML code

A) Input box bidirectional binding

Running results:

B) Select bidirectional binding (binding events are all change, binding attribute is value)

The running result is shown as follows:

C) Radio single check box bidirectional binding (binding events are checked, binding attribute is value)

The running result is shown as follows:

D) checkbox checkbox bidirectional binding (bind events are checked, bind attribute is value)

The running result is shown as follows: