vue와 angle의 차이점에 대한 간략한 토론-JS 튜토리얼-php.cn

vue와 angle의 차이점에 대한 간략한 토론

零下一度

풀어 주다： 2017-06-17 17:21:30

원래의

2888명이 탐색했습니다.

이 글에서는 주로 vue를 자세히 소개합니다. bootstrap특정 참고값이 있는 작은 예입니다. 관심 있는 친구들이 참고할 수 있습니다.

vue와 angle은 MVVM과 매우 유사합니다. 이유는 모두 명확합니다. 즉, 구문의 차이입니다.

vue와 각도의 차이는 다음과 같습니다.

1.vue는 더 가볍고, 더 편리하며, 모바일 개발에 적합합니다.

2.vue는 더 간단합니다. . .

Angular와 Vue 명령어의 차이점은 대략 ng-xxx와 v-xxx입니다.
vue는 새로운 Vue를 사용하여 인스턴스를 생성한 다음 데이터를 attributes데이터에 바인딩하고 속성 메서드에 메서드를 추가합니다.
vue의 루프 순회는 v-for=""이고, event는 v-on: clicl="";

코드로 직접 이동합니다.

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

로그인 후 복사

효과: