Vue 实现form增删改查

刚接触Vue框架，虽然之前有看过三大框架，但是思路用法都不够清晰，于是自己写了一个使用Vue进行增删改查的demo，话不多说直接上操作。
1.首先需要在 Vue官网 下载Vue.js,然后跟引入jquery一样将它引入进html页面

图片：vue.png

2.然后做相对于的操作，先创建一个id名为"app"的div标签其(id可以自定义,不一定就是app)

<div id="app"></div>

3.然后就开始相对于的配置，首先需要创建一个vue的实例对象，在实例对象里有很多的属性，如下：
 (1). el 它就是把这个vue实例挂载到哪个元素上面

var app = new Vue({
      //绑定的DOM元素
      el:"#app",
})

(2). data 它就是state 只有定义在这里面的变量才支持双向绑定

//需要绑定的数据Model
      data:{
          stuList:[
              {
             stuId:"1",stuName:"王某",stuAge:"20",stuSex:"男"
          },{
             stuId:"2",stuName:"罗某",stuAge:"20",stuSex:"男"
          },{
             stuId:"3",stuName:"海仔",stuAge:"22",stuSex:"男"
          },{
             stuId:"4", stuName:"木木",stuAge:"3",stuSex:"男"
          },{
              stuId:"5", stuName:"杰哥",stuAge:"1",stuSex:"男"
          }
          ],
          searchStuName:"",
          //创建一个新的对象模板
          newStu:{
              stuId:0,
              stuName:"",
              stuAge:0,
              stuSex:"男"
          },
      },

(3). method 它相当于就是放置所有的方法，将需要执行的方法写在里面

methods:{
          del(index){
              //获取对应的index来删除对应的对象
              this.stuList.splice(index,1);
          },
          createStu:function() {
              if (this.newStu.stuId == 0){
                  //将添加后的值push进原来的数组里
                  //设置当前新增行的Id
                  this.newStu.stuId = this.stuList.length + 1;
                  this.stuList.push(this.newStu);
              }
              //重新还原当前模板
              this.newStu = {stuId:0,stuName:"",stuAge:0,stuSex:'男'}
          },
          isXiu:function (item) {
              this.newStu = item;
          }
      },

(4).filters 它是放置过滤器的 Vue2.0版本取消了1.0默认过滤器，你可以自定义过滤器，可用于一些常见的文本格式化
 写在实例对象里的日期转换：

filters:{
         getData:function (value) {
             var date;
             if (typeof value  == "String"){
                 date = new Date(value);
             }else {
                 date = value;
             }
             return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
         }
     }

 写在实例对象外的日期转换：

script type="text/javascript">
  Vue.filter("getData",function (value) {
      var date;
      if (typeof value  == "String"){
          date = new Date(value);
      }else {
          date = value;
      }
      return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate();
  });
  var app = new Vue({
      el:"#app",
      data:{
          timer:new  Date()
      },
      methods:{
          text (){
              alert(this.timer)
          }
      }
  })

注：这里有一个小细节 如果 filter写在Vue实例对象里面的话需要在最后加上s写为filters，如果是写在外面的话就不用添加s
(5). computed 它是Vue中的计算属性，能进行一些简单的运算

computed:{
          getSearchStu (){
              //获取存储查询的对象
              var search = this.searchStuName;
              return this.stuList.filter(function(item) {
                  //模糊查询
                  return item.stuName.indexOf(search) >= 0;
              })
          }
      }

4.然后我们现在就是在html的标里执行对应的方法或者事件就可以了
这里的form表单都用到了v-model，经常用在<input>、<textarea>、<select>这类表单元素里，他可以很好的体现出双向数据绑定。v-model可以结合number 写成 v-model,number 那么这个输入框就只能输入数字。


然后就是@事件 @是 v-on的简称 它用于绑定html事件 这里绑定的是点击事件，你点击保存执行的是method 属性里对应的键名它将执行对应的函数。

<form action="">
    <span>搜索：</span>
<!--v-model调用-->
    <input type="text" placeholder="请输入..." v-model="searchStuName">
  </form>
<!--添加表单-->
<!--v-model 将输入的值实时反应给后台-->
  <form action="">
    <label>学号：</label>
    <input type="text" placeholder="请输入学号..." v-model.number="newStu.stuId">
    <label>姓名：</label>
    <input type="text" placeholder="请输入姓名..." v-model="newStu.stuName">
    <label>年龄：</label>
    <input type="text" placeholder="请输入年龄..." v-model="newStu.stuAge">
    <label>性别</label>
    <select name="addSex" id="addSex" v-model="newStu.stuSex">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    <button @click="createStu" type="button" id="addStuBtn">保存</button>
  </form>

5.接下来就是运用v-for遍历和v-on事件 来执行对应操作

<table border="0" cellpadding="0" cellspacing="0">
    <thead>
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>相关操作</th>
    </tr>
    </thead>
    <tbody>
<!--v-for遍历添加值-->
    <tr v-for="(item,index) in getSearchStu">
      <td>pw_item.stuId</td>
      <td>pw_item.stuName</td>
      <td>pw_item.stuAge</td>
      <td>pw_item.stuSex</td>
<!-- v-on事件删除对应操作-->
      <td><button @click="isXiu(item)" type="button">修改</button><button @click="del(index)">删除</button></td>
    </tr>
    </tbody>
  </table>

都有注释我就不一一解释了可以看看注释
CSS：

*{
  padding: 0;
  margin: 0;
}
#app{
  width: 800px;
  margin: 100px auto;
  color: #999999;
  background-color: whitesmoke;
  border-radius: 5px;
}
#app table{
  width: 100%;
  text-align: center;
}
#app table th{
  font-weight: bold;
}
#app table thead tr{
  background-color: #0f4e74;
  height: 30px;
  border: 1px solid #000;
}
#app table tbody tr{
  width: 100%;
  height: 20px;
}
#app table tbody td{
  width: 100px;
  height: 30px;
}
#app table tbody tr:nth-child(2n){
  background-color: #eeeeee;
}
#app table tbody button{
  width: 55px;
  height: 25px;
  border:0;
  margin: 0 5px 0 5px;
  color: white;
  cursor: pointer;
  outline: none;
}
#app table tbody button:nth-child(1){
  background-color: #0f4e74;
}
#app table tbody button:nth-child(2){
  background-color: brown;
}
#app input {
  width: 100px;
  height: 25px;
  padding-left: 10px;
  background-color: #cccccc;
  color: #222222;
  border-radius: 5px;
  outline: none;
  border: 0;
}
#app select {
  width: 100px;
  height: 25px;
  padding-left: 10px;
  background-color: #cccccc;
  color: #222222;
  border-radius: 5px;
  outline: none;
  border: 0;
}
#app form{
  padding-top: 5px;
  padding-bottom: 5px;
  margin-left: 20px;
}
tbody:empty:after{
  content: "搜索失败";
}
#addStuBtn{
  width: 55px;
  height: 25px;
  border:0;
  margin: 0 5px 0 5px;
  color: white;
  cursor: pointer;
  outline: none;
}

HTML：

<body>
<div id="app">
<!--搜索表单-->
  <form action="">
    <span>搜索：</span>
<!--v-model调用-->
    <input type="text" placeholder="请输入..." v-model="searchStuName">
  </form>
<!--添加表单-->
<!--v-model 将输入的值实时反应给后台-->
  <form action="">
    <label>学号：</label>
    <input type="text" placeholder="请输入学号..." v-model.number="newStu.stuId">
    <label>姓名：</label>
    <input type="text" placeholder="请输入姓名..." v-model="newStu.stuName">
    <label>年龄：</label>
    <input type="text" placeholder="请输入年龄..." v-model="newStu.stuAge">
    <label>性别</label>
    <select name="addSex" id="addSex" v-model="newStu.stuSex">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    <button @click="createStu" type="button" id="addStuBtn">保存</button>
  </form>
  <table border="0" cellpadding="0" cellspacing="0">
    <thead>
    <tr>
      <th>学号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>相关操作</th>
    </tr>
    </thead>
    <tbody>
<!--v-for遍历添加值-->
    <tr v-for="(item,index) in getSearchStu">
      <td>pw_item.stuId</td>
      <td>pw_item.stuName</td>
      <td>pw_item.stuAge</td>
      <td>pw_item.stuSex</td>
<!-- v-on事件删除对应操作-->
      <td><button @click="isXiu(item)" type="button">修改</button><button @click="del(index)">删除</button></td>
    </tr>
    </tbody>
  </table>
</div>
</body>

JS:

<script src="js/vue.js"></script>
<script type="text/javascript">
  //创建Vue实例对象
  var app = new Vue({
      //绑定的DOM元素
      el:"#app",
      //需要绑定的数据Model
      data:{
          stuList:[
              {
             stuId:"1",stuName:"王某",stuAge:"20",stuSex:"男"
          },{
             stuId:"2",stuName:"罗某",stuAge:"20",stuSex:"男"
          },{
             stuId:"3",stuName:"海仔",stuAge:"22",stuSex:"男"
          },{
             stuId:"4", stuName:"木木",stuAge:"3",stuSex:"男"
          },{
              stuId:"5", stuName:"杰哥",stuAge:"1",stuSex:"男"
          }
          ],
          searchStuName:"",
          //创建一个新的对象模板
          newStu:{
              stuId:0,
              stuName:"",
              stuAge:0,
              stuSex:"男"
          },
      },
      methods:{
          del(index){
              //获取对应的index来删除对应的对象
              this.stuList.splice(index,1);
          },
          createStu:function() {
              if (this.newStu.stuId == 0){
                  //将添加后的值push进原来的数组里
                  //设置当前新增行的Id
                  this.newStu.stuId = this.stuList.length + 1;
                  this.stuList.push(this.newStu);
              }
              //重新还原当前模板
              this.newStu = {stuId:0,stuName:"",stuAge:0,stuSex:'男'}
          },
          //点击修改触发的事件
          isXiu:function (item) {
              this.newStu = item;
          }
      },
      //过滤器
      filters:{
      },
      //计算属性
      computed:{
          getSearchStu (){
              //获取存储查询的对象
              var search = this.searchStuName;
              return this.stuList.filter(function(item) {
                  //indexof模糊查询
                  return item.stuName.indexOf(search) >= 0;
              })
          }
      }
  })

效果图  如下：

图片：zs.png

点击修改过后

图片：djxg.png

点击删除过后

图片：sc.png

点击查询过后

图片：search.png

点击添加过后

图片：QQ图片20200521233008.png