刚毕业的新人，工作的时候试过用.net 框架，但是我发现写的前端代码都非常多，要写很多很多的原生，然后最近在看vue.js觉得还不错，可以减少前端很多dom操作.
至于做的东西我是想做一个游戏，一个回合制类的游戏，想着就是前端点技能然后传回后端计算，然后利用VUE直接修改数据来达到血条的变化之类的。毕竟大学就是冲着做游戏去的。后来发现好像做游戏都是用引擎，但是毕竟学都学了.net，就想尝试一下。
并没有完成，才做完用户和角色创建页面。下面贴代码
前端代码
<div id="all"> <transition name="form-fade" mode="out-in"> <form id="Role" name="form" key="role" v-if="RoleShow" action="/ltgdGame.Web/Main/Index" method="post" > <div class="leftpart"> <div id="RoleList"> @{ if (ViewBag.Roles.Count == 0) { <div class="RoleList" v-on:click="toggle">你还没有角色，请创建一个</div> } else { <div class="RoleList" v-for="(role,index) in roles"> <input type="radio" v-bind:id="role.RoleId" class="RoleRadio" name="roleName" v-bind:value="role.RoleName" v-model="RolePicked"> <label v-bind:for="role.RoleId">角色名: {{role.RoleName}} 职业: {{role.CareerName}} 等级: {{role.RoleLevel}} 游戏时间: {{role.GameTime}} 金币: {{role.GoldCoin}}</label> </div> } } </div> <div id="RoleBtn"> <div class="RoleBtn" v-on:click="deleteTip">删除角色</div> <div class="RoleBtn" v-on:click="toggle">创建角色</div> </div> </div> <div id="RoleMes"> @{ if (ViewBag.Talents.Count == 0) { <div>玩家ID：{{userid}}</div> } else { <div style="height:79%;width:100%;"> <div>玩家ID：{{userid}}</div> <div>角色ID：{{roles[i].RoleId}}</div> <div>角色名称：{{roles[i].RoleName}}</div> <div>职业：{{roles[i].CareerName}}</div> <div>游戏时间：{{roles[i].GameTime}}</div> <div>等级：{{roles[i].RoleLevel}}</div> <div>金币：{{roles[i].GoldCoin}}</div> <div>体力：{{talents[i].VIT}}</div> <div>力量：{{talents[i].STR}}</div> <div>魔力：{{talents[i].WIS}}</div> <div>敏捷：{{talents[i].DEX}}</div> <div>幸运：{{talents[i].LUK}}</div> <div>护甲：{{talents[i].Armor}}</div> <div>魔抗：{{talents[i].MagicResistance}}</div> <div>生命回复：{{talents[i].Regeneration}}</div> <div>攻击力：{{talents[i].ATK}}</div> <div>生命值：{{talents[i].HP}}</div> <div>魔法强度：{{talents[i].MGK}}</div> <div>法力值：{{talents[i].MP}}</div> <div>速度：{{talents[i].Speed}}</div> <div>命中：{{talents[i].HIT}}</div> <div>闪避：{{talents[i].AVD}}</div> <div>掉率：{{talents[i].GainRate}}</div> <div>暴击：{{talents[i].Crit}}</div> </div> <div style="height:21%;width:100%;"><input class="RoleBtn" id="btnsumbit" type="submit" value="进入游戏"/></div> } } </div> </form> <form id="CreateRole" v-else="" key="create" onsubmit="return false;"> <div class="rightpart"> <div id="message"> <div class="attribute">玩家ID：{{userid}}</div> <div class="attribute">职业：{{CareerPicked}}</div> <div>名字：</div><input ref="pass" type="text" v-model="RoleName"> <div class="attribute">{{pass}}</div> <div class="attribute"></div> <div class="attribute"></div> <div class="attribute">属性：</div> <div class="attribute">体力:{{attributes.VIT}}</div> <div class="attribute">力量:{{attributes.STR}}</div> <div class="attribute">魔力:{{attributes.WIS}}</div> <div class="attribute">敏捷:{{attributes.DEX}}</div> <div class="attribute">幸运:{{attributes.LUK}}</div> <button id="reRandom" type="button" v-on:click="reRandom">随机</button> <div class="attribute"></div> </div> <div class="CareerList" v-for="(career,index) in careers"> <input type="radio" v-bind:id="career.id" class="RoleRadio" name="career" v-bind:value="career.Name" v-model="CareerPicked"> <label v-bind:for="career.id">{{career.Name}}</label> </div> <div id="RoleBtn"> <div class="RoleBtn" v-on:click="createRole">创建</div> <div class="RoleBtn" v-on:click="toggle">返回</div> </div> </div> <div class="RoleMes"></div> </form> </transition> <div id="cancel" v-if="tip" v-on:click="cancel"> </div> <div id="tip" v-if="tip"> <div id="tiptext">{{tiptext}}<input type="password" style="height:20%;font-size:20px;" v-if="passwordshow" v-model="password" /></div> <div id="tipbtn" v-on:click="btn(type)">{{tipbtn}}</div> </div> </div>
JS
var aaa = new Vue({ el: '#all', data: { userid:'@ViewBag.UserId', roles: @Html.Raw(Json.Encode(ViewBag.Roles)), RoleShow: true, careers: [ { Transfer:["骑士","卫士","处刑者"], Name: "战士", id: "1" }, { Transfer: ["死灵师", "元素师", "秘术师"], Name: "法师", id: "2" }, { Transfer: ["追猎者", "游侠", "锐眼"], Name: "射手", id: "3" }, { Transfer: ["酋长", "暴徒", "驯兽师"], Name: "勇士", id: "4" }, { Transfer: ["刺客", "欺诈师", "破坏者"], Name: "飞侠", id: "5" }, { Transfer: ["守护者", "圣宗", "判官"], Name: "僧侣", id: "6" } ], talents: @Html.Raw(Json.Encode(ViewBag.Talents)), attributes: { VIT: 1, STR: 1, WIS: 1, DEX: 1, LUK: 1 }, RolePicked: '', CareerPicked: '', RoleName: '', pass: '无效的名称', tiptext: '提示', tipbtn: '关闭', tip: false, passwordshow: false, password: '', type: '关闭', rid: 0, }, computed: { i: function () { let num = 0; for (var j = 0; j < this.talents.length; j++) { if (this.rid == this.talents[j].RoleId) { num = j; } } return num; } }, methods: { deleteTip: function () { this.tip = true; this.passwordshow = true; this.tiptext = "请输入密码验证："; this.tipbtn = "删除角色" + this.RolePicked; this.type="删除" }, btn: function (type) { switch (type) { case "删除": this.deleteRole(); break; case "关闭": this.cancel(); break; default: this.cancel(); this.toggle(); break; } }, deleteRole:function() { let _self = this; $.ajax({ url: "/ltgdGame.Web/Home/DeleteRole", type: "POST", dataType: 'json', data: { "userid": this.userid, "roleid": this.rid, "password": this.password }, success: function (data) { if (data.result=="删除成功"){ for (var i = 0; i < _self.roles.length; i++) { if (_self.RolePicked == _self.roles[i].RoleName) { if (_self.roles.length==1) { window.location.reload(); } else{ _self.roles.splice(i, 1); _self.talents.splice(i, 1); } } } } _self.tiptext = data.result; _self.passwordshow = false; _self.password = ""; _self.tipbtn = "关闭"; _self.type = "关闭" } }) }, createRole: function () { if (this.pass != "可用的名称") { this.$refs['pass'].focus(); this.tip = true; this.tiptext = "名字不可用"; this.tipbtn = "关闭"; this.type = "关闭"; } else { let _self = this; $.ajax({ url: "/ltgdGame.Web/Home/CreateRole", type: "POST", dataType: 'json', data: { "userid": this.userid, "rolename": this.RoleName, "careername": this.CareerPicked, "VIT": this.attributes.VIT, "STR": this.attributes.STR, "WIS": this.attributes.WIS, "DEX": this.attributes.DEX, "LUK": this.attributes.LUK, }, success: function (data) { if (data.result != "false") { if(_self.roles.length != 0) { _self.roles.push(data.role); _self.talents.push(data.talent); _self.RolePicked = data.role.RoleName; } else window.location.reload(); _self.tip = true; _self.tiptext = "创建成功"; _self.tipbtn = "返回"; _self.type = "返回"; } else { _self.tip = true; _self.tiptext = "创建失败"; _self.tipbtn = "关闭"; _self.type = "关闭"; } } }) } }, cancel: function () { this.tip = false; this.passwordshow = false; }, toggle: function () { this.RoleShow = !this.RoleShow }, isRepeat: function () { let _self = this; $.ajax({ url: "/ltgdGame.Web/Home/IsRepear", type: "POST", dataType: 'json', data: {"rolename": this.RoleName, }, success: function (data) { _self.pass = data.result; } }) }, reRandom: function () { this.attributes.VIT = Math.floor(Math.random() * 10) + 1 this.attributes.STR = Math.floor(Math.random() * 10) + 1 this.attributes.WIS = Math.floor(Math.random() * 10) + 1 this.attributes.DEX = Math.floor(Math.random() * 10) + 1 this.attributes.LUK = Math.floor(Math.random() * 10) + 1 } }, created: function () { if (this.roles.length>0){ this.RolePicked = this.roles[0].RoleName } this.CareerPicked = this.careers[0].Name }, watch: { RoleName: function (newRoleName, oldRoleName) { this.isRepeat(); }, RolePicked: function () { let next = 0; for (var i = 0; i < this.roles.length; i++) { if (this.roles[i].RoleName == this.RolePicked) { next = this.roles[i].RoleId; } } if (this.rid != next) { this.rid = next; } } } })
效果图的话，我大致都只是划分区域，美化什么的最懒了。所以也不贴CSS代码了
用户登录界面（这个页面是大学期间做的，没用VUE，于是乎写了一堆JSJQ的原生脚本）
角色选择界面
角色创建界面
后台代码用EF就很简单就不贴了