suchen

Heim >Web-Frontend >js-Tutorial >Eine kurze Diskussion über den Unterschied zwischen Vue und Angular

Eine kurze Diskussion über den Unterschied zwischen Vue und Angular

零下一度
零下一度Original
2017-06-17 17:21:302909Durchsuche

Dieser Artikel stellt hauptsächlich Vue im Detail vor BootstrapEin kleines Beispiel, das einen gewissen Referenzwert hat

Vue und Angular sind sehr Sie sehen alle wie MVVM aus . Der Grund ist klar, nämlich der Unterschied in der Syntax

Ich denke, der Unterschied zwischen Vue und Angular ist:

1.vue ist leichter, bequemer und geeignet für die mobile Entwicklung

2.vue ist einfacher. .

Der Unterschied zwischen Angular- und Vue-Anweisungen beträgt ungefähr ng-xxx und v-xxx.
vue verwendet neues Vue, um eine Instanz zu erstellen, bindet dann Daten an die Attribut-Daten und fügt den Attributmethoden Methoden hinzu.
Vues Schleife Durchlauf ist v-for="", Ereignis ist v-on: clicl=""

gehe direkt zum Code. 

<!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>

Wirkung:

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über den Unterschied zwischen Vue und Angular. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：JS kleines Demo-Tutorial zum Erstellen eines neuen OrdnersNächster Artikel：JS kleines Demo-Tutorial zum Erstellen eines neuen Ordners

In Verbindung stehende Artikel

Mehr sehen