Practice of Vue.js Form Controls

Recently, I used vue to replace the cumbersome jquery to handle DOM data updates in a project, and I really like it, so I practiced a little on the official website.

The following is a practice of form controls, the code is hereby submitted, simply create a new HTML file and paste the code to see the effect

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>PlayAround2 Have Fun</title>
 <script src="https://cdn.jsdelivr.net/vue/1.0.26/vue.min.js"></script>
 <style>
  h2{
   text-decoration:underline;
  }
  .red{
   color: red;
  }
  .green{
   color: green;
  }
 </style>
</head>
<body>
 <div id="app">
  <h2>checkBox</h2>
  <input type="checkbox" v-model="checked">
  <label>{{checked}}</label>
  <h2>multi checkbox</h2>
  <input type="checkbox" id="Kobe" value="Kobe" v-model="names">
  <label for="Kobe">Kobe</label>
  <input type="checkbox" id="Curry" value="Curry" v-model="names">
  <label for="Curry">Curry</label>
  <input type="checkbox" id="Aaron" value="Aaron" v-model="names">
  <label for="Aaron">Aaron</label>
  <br>
  <span>Checked names: {{names | json}}</span>
  <h2>Radio/h2>
  <input type="radio" id="one" value="one" v-model="picked">
  <label for="one">one/label>
  <br>
  <input type="radio" id="two" value="two" v-model="picked">
  <label for="two">two/label>
  <br>
  <span>Picked: {{picked}}</span>
  <h2>Select/h2>
  <select v-model="selected">
   <option selected>Kobe/option>
   <option>Curry/option>
   <option>Aaron/option>
  </select>
  <span>Selected: {{selected}}</span>
  <h2>Multi Select/h2>
  <select multiple v-model="multiSelected">
   <option>Kobe/option>
   <option>Curry/option>
   <option>Aaron/option>
  </select>
  <span>Selected: {{multiSelected}}</span>
  <h2>Select with for/h2>
  <select v-model="selectedPlayer">
   <option v-for="option in options" :value="option.value">{{option.text}}</option>
  </select>
  <span>Selected: {{selectedPlayer}}</span>
  <h2>Lazy-改变更新的事件从input->change/h2>
  <input v-model="msg" lazy>
  <span>Msg:{{msg}}</span>
  <h2>Number(Not very useful...。2->0.2,Just that much?63;)</h2>
  <input v-model="age" number>
  <span>age:{{age}}</span>
  <h2>debounce-延迟更新view</h2>
  <p>Edit me<input v-model="delayMsg" debounce="500"></p>
  <span>delayMsg:{{delayMsg}}</span>
 </div>
 <script>
  var vm = new Vue({
   el: "#app",
   data:{
    checked:false,
    names:[],
    picked:"",
    selected:"",
    multiSelected:"",
    options:[
     {"text":"Kobe","value":"Bryant"},
     {"text":"Stephen","value":"Curry"},
     {"text":"Aaron","value":"Kong"}
    ],
    selectedPlayer:"",
    msg:"",
    age:"",
    delayMsg:""
   },
   methods:{
   }
  }
 </script>
</body>
</html>

Several advantages of using vue:

1Focus only on the data processing of the model layer, without handling complex view layer updates, Vue will automatically update the view layer when the model changes;

2Vue provides a series of small tools to help developers handle data binding issues, such as computed to provide extended calculations, as well as filters, sorting, and other support;

3The code is concise, and the layers are clear. Data binding is performed in html, and only data handling and background interaction are needed in js;

4Provide custom component functionality to further standardize the front-end architecture. Currently not in use, will study it later.

That's my current experience with vue, no disadvantages have been found yet, it may not be very deep, overall, the experience is very good!

This article has been organized into the 'Vue.js Front-end Component Learning Tutorial', welcome to learn and read.

That's all for this article. I hope it will be helpful to your learning, and I also hope that everyone will support the Yelling Tutorial more.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously, and this website does not own the copyright, nor has it been manually edited, nor does it assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.)

Basic Tutorial