Maison >interface Web >js tutoriel >Une brève discussion sur la différence entre vue et angulaire

Une brève discussion sur la différence entre vue et angulaire

零下一度original: 2017-06-17 17:21:302909parcourir

Cet article présente principalement vue en détail bootstrap Un petit exemple, qui a une certaine valeur de référence. Les amis intéressés peuvent s'y référer

vue et angulaire sont très Ils ressemblent tous à MVVM. . La raison est claire, c'est-à-dire la différence de syntaxe

Je pense que la différence entre vue et angulaire :

1.vue est plus léger, plus pratique et adapté au développement mobile

2.vue est plus simple. .

La différence entre les instructions angulaires et vues est à peu près ng-xxx et v-xxx.
vue utilise le nouveau Vue pour créer une instance, puis lie les données à l'attribut data et ajoute des méthodes aux méthodes d'attribut.
la boucle de vue est v-for="", l'événement est v-on :

accédez directement au coder.

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link rel="stylesheet" href="bootstrap.css" rel="external nofollow" >
 <style>
  tr{
   vertical-align: inherit;
  }
 </style>
 <script src="jquery.js"></script>
 <script src="bootstrap.js"></script>
 <script src="node_modules/vue/dist/vue.js"></script>
 <script>
  window.onload= function(){
   var vm = new Vue({
    el:&#39;.container&#39;,
    data:{
     myData:[],
     username:&#39;&#39;,
     age:&#39;&#39;
    },
    methods:{
     add:function(){
      this.myData.push({
       name:this.username,
       age:this.age
      });
      this.username="";
      this.age="";
     },
     reset:function(){
      this.username="";
      this.age="";
     },
     del:function(index){
      this.myData.splice(index,1)
     },
     delAll:function(){
      this.myData=[];
     }
    }
   })
  }
 </script>
</head>
<body>
 <p class="container">
  <form role="form">
   <p class="form-group">
    <label for="username">用户名：</label>
    <input placeholder="输入用户名" type="text"
      v-model="username"
      id="username" class="form-control">
   </p>
   <p class="form-group">
    <label for="age">年龄：</label>
    <input placeholder="输入年龄" type="text"
      v-model="age"
      id="age" class="form-control">
   </p>
   <p class="form-group">
    <input type="button" class="btn btn-info" v-on:click="add()" value="添加">
    <input type="button" class="btn btn-info" v-on:click="reset()" value="重置">
   </p>
  </form>
  <hr>
  <table class="table table-bordered table-hover">
   <caption>用户信息表</caption>
   <tr class="text-danger">
    <td class="text-center">序号</td>
    <td class="text-center">名字</td>
    <td class="text-center">年龄</td>
    <td class="text-center">操作</td>
   </tr>
   <tr v-for="(item,index) in myData">
    <td class="text-center">{{index+1}}</td>
    <td class="text-center">{{item.name}}</td>
    <td class="text-center">{{item.age}}</td>
    <td class="text-center">
     <button class="btn btn-danger btn-sm"
      v-on:click="del(index)"
      data-toggle="dialog" data-target="#layer"
     >删除</button>
    </td>
   </tr>
   <tr v-show="myData.length!=0">
    <td colspan="4" class="text-right">
     <button v-on:click="delAll()" class="btn btn-danger btn-sm">删除全部</button>
    </td>
   </tr>
   <tr v-show="myData.length==0">
    <td colspan="4" class="text-center">
     <p>暂无数据</p>
    </td>
   </tr>
  </table>
 </p>


</body>
</html>

Effet :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Petit tutoriel de démonstration JS sur la création d'un nouveau dossierArticle suivant：Petit tutoriel de démonstration JS sur la création d'un nouveau dossier

Articles Liés

Voir plus