Eine kurze Diskussion über den Unterschied zwischen Vue und Angular-js-Tutorial-php.cn

Eine kurze Diskussion über den Unterschied zwischen Vue und Angular

零下一度

Freigeben： 2017-06-17 17:21:30

Original

2916 Leute haben es durchsucht

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>

Nach dem Login kopieren

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!