Práctica de controles de formulario en Vue.js

Recientemente utilicé vue para reemplazar el complicado jquery en el proyecto actual para actualizar datos DOM, realmente me gustó, así que practiqué un poco en el sitio web oficial.

A continuación se muestra un ejemplo práctico de controles de formulario, el código se adjunta directamente, cree un archivo html nuevo, pegue y copie para ver los resultados.

<!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>Nombres seleccionados: {{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>Escogido: {{picked}}</span>
  <h2>Select/h2>
  <select v-model="selected">
   <option selected>Kobe/option>
   <option>Curry/option>
   <option>Aaron/option>
  </select>
  <span>Seleccionado: {{selected}}</span>
  <h2>Multi Select/h2>
  <select multiple v-model="multiSelected">
   <option>Kobe/option>
   <option>Curry/option>
   <option>Aaron/option>
  </select>
  <span>Seleccionado: {{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>Seleccionado: {{selectedPlayer}}</span>
  <h2>Lazy-El evento de actualización cambia de input->cambio/h2>
  <input v-model="msg" lazy>
  <span>Msg:{{msg}}</span>
  <h2>Número(no es muy útil...。2->0.2,¿solo eso es todo?&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>

algunas ventajas del uso de vue:

1solo se debe prestar atención al manejo de datos de la capa model, no es necesario manejar la actualización de la capa view compleja, vue actualizará automáticamente la capa view cuando cambie el model;

2vue proporciona una serie de herramientas pequeñas para ayudar a los desarrolladores a manejar problemas de enlace de datos, como computed que puede proporcionar extensiones de cálculo, además de filtros, ordenación y otros soportes;

3el código es conciso y la capa es clara. En html se realiza el enlace de datos, en js solo se manejan los datos y la interacción con el backend;

4ofrecer funcionalidades de componentes personalizados para normar aún más la arquitectura del frontend. Actualmente no se está utilizando, se investigará más adelante.

Estos son mis pensamientos sobre el uso de vue hasta ahora, no he encontrado defectos, puede que no sea muy profundo, en términos generales, la experiencia es muy buena!

Este artículo ha sido organizado en el 'Tutorial de Aprendizaje de Componentes Frontend de Vue.js', todos son bienvenidos a aprender y leer.

Este es el contenido completo del artículo, espero que ayude a su aprendizaje y que todos apoyen el tutorial de grito.

Declaración: El contenido de este artículo se ha obtenido de la red, es propiedad del autor original, el contenido se ha contribuido y subido por los usuarios de Internet de manera autónoma, este sitio web no posee los derechos de propiedad, no ha sido editado por humanos y no asume ninguna responsabilidad legal. Si encuentra contenido sospechoso de infracción de derechos de autor, por favor envíe un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.

Tutoriales básicos

Te gustará