집 >웹 프론트엔드 >JS 튜토리얼 >vue와 angle의 차이점에 대한 간략한 토론

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

零下一度원래의: 2017-06-17 17:21:302909검색

이 글에서는 주로 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>

효과:

위 내용은 vue와 angle의 차이점에 대한 간략한 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：새 폴더 생성에 대한 JS 소규모 데모 튜토리얼다음 기사：새 폴더 생성에 대한 JS 소규모 데모 튜토리얼