图解ASP.NET MVC中使用Vue.js
1、打开Visual Studio 2017，如下图所示：
2、菜单栏中选择“文件”->“新建”->“项目”，如下图所示：
3、在弹出的新建项目对话框中，选择“Web”->“ASP.NET Web应用程序（.NET Framework）”,输入项目的名称和路径，然后点击“确定”，如下图所示：
4、模板选择“MVC”，然后点击“确定”，如下图所示：
5、右键项目解决方案，选择“管理解决方案 Nuget 的程序包”，如下图所示：
6、选择浏览tab，输入框中的地方输入vue，选择安装的位置，然后点击“安装”，如下图所示：
7、在控制台中会显示安装进程，如下图所示：
8、打开Scripts文件夹，我们可以看到增加了vue.js和vue.min.js，然后项目中直接应用vue.min.js文件即可，如下图所示：
9、打开Index.cshtml，添加如下代码，如下图所示：
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>学生列表</title>
<script src="~/Scripts/vue.min.js"></script>
<style type="text/css">
.bg {
background: red;
注讨 }
</style>
</head>
<body>
<div id="demo">
<label>姓名</label> <input type="text" id="name" v-model="name" />
<label>性别</label> <input type="text" id="gender" v-model="gender" />
<label>年龄</label> <input type="text" id="age" v-model="age" />
<label>爱好</label> <input type="text" id="hobby" v-model="hobby" />
<button v-on:click="AddStuList">添加</button>
<table border="1" cellspacing="5" cellpadding="5" v-show="stuList.length">
<caption><h3>学生列表</h3></caption>
<tr>
<th>状态</th>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>爱好</th>
<th>操作</th>
槐五距 </tr>
<tr v-for="(item,index) in stuList" :class="{bg:item.isChecked}">
<td><input type="checkbox" name="" id="" value="" v-model="item.isChecked" /></td>
<td>{{index+1}}</td>
<td>{{item.name}}</td>
<td>{{item.gender}}</td>
<td>{{item.age}}</td>
<td>{{item.hobby}}</td>
<td><button v-on:click="delStuList(item)">删除</button></td>
</tr>
</table>
</div>
<script>
var list = [
悦常 {
name: "张三",
gender: "男",
age: "12",
hobby: "睡觉",
isChecked: false
},
{
name: "张三",
gender: "男",
age: "12",
hobby: "睡觉",
isChecked: false
}
];
var vm = new Vue({
el: "#demo",
data: {
stuList: list,
name: "",
gender: "",
age: "",
hobby: "",
isChecked: ""
},
methods: {
AddStuList: function () {
var stu = {
name: this.name,
gender: this.gender,
age: this.age,
hobby: this.hobby,
isChecked: this.isChecked
}
this.stuList.push(stu);
this.name = '';
this.gender = '';
this.age = '';
this.hobby = '';
isChecked = '';
},
delStuList: function (item) {
var index = this.stuList.indexOf(item);
this.stuList.splice(index)
}
}
});
</script>
</body>
</html>
10、运行浏览项目，可以看到页面效果，这样一个简单的在ASP.NET MVC中使用Vue.js实现的table展示功能，如下图所示：
