vue와 angle의 차이점에 대한 간략한 토론
- 零下一度원래의
- 2017-06-17 17:21:302849검색
이 글에서는 주로 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:'.container',
data:{
myData:[],
username:'',
age:''
},
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.