Heim > Artikel > Web-Frontend > Vue.js-Formularkontrollpraxis

Vue.js-Formularkontrollpraxis

高洛峰Original: 2016-12-08 15:30:341201Durchsuche

In jüngsten Projekten wurde Vue verwendet, um die umständliche JQuery zur Verwaltung von Dom-Datenaktualisierungen zu ersetzen. Es gefiel mir sehr gut, also ging ich auf die offizielle Website, um es ein wenig zu üben.

Das Folgende ist die Praxis der Formularsteuerung. Bitte geben Sie mir den Code direkt, fügen Sie ihn ein und kopieren Sie ihn, um den Effekt zu sehen

<!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(没啥吊用。。。.2->0.2,仅此而已吗?)</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>

Mehrere Vorteile der Verwendung von Vue:

1 Sie müssen sich nur auf die Datenverarbeitung der Modellebene konzentrieren und müssen sich nicht mit komplexen Aktualisierungen der Ansichtsebene befassen Ansichtsebene, wenn sich das Modell ändert;

2. Vue bietet eine Reihe kleiner Tools, die Entwicklern bei der Bewältigung von Problemen bei der Datenbindung helfen können. Beispielsweise können Berechnungserweiterungen sowie Filter, Sortierung und andere Unterstützung bereitgestellt werden ;

3. Der Code ist prägnant und klar geschichtet. Die Datenbindung erfolgt in HTML, während js nur Daten und Hintergrundinteraktionen verarbeiten muss;

4. Stellen Sie benutzerdefinierte Komponentenfunktionen bereit, um die Front-End-Architektur weiter zu standardisieren. Es wird derzeit nicht verwendet und wird in Zukunft untersucht.

Das Obige ist meine aktuelle Erfahrung mit der Verwendung von Vue. Ich habe noch keine Mängel festgestellt und es ist möglicherweise nicht allzu tiefgreifend.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript implementiert Effekte zum Ein- und Ausfahren der Maus, ähnlich wie bei Lagou.comNächster Artikel：JavaScript implementiert Effekte zum Ein- und Ausfahren der Maus, ähnlich wie bei Lagou.com

In Verbindung stehende Artikel

Mehr sehen