Vue在HTML页面中的脚手架

<script src="assets/js/vue.js"></script>
        <script src="assets/js/vue-resource.min.js"></script>
        <script>
        new Vue({
            el:"#container123",
            data:{
                data:123,
                name:"姓名",
                password:"密码",
                course:"课程",
                pointer:-1,
                alldata:false,
                start:0,
                end:7,
                pageNow:1,
                searchcon:null
            },
            mounted:function(){

                this.$http.get("teacher_getAll.action").then(function(res){
                    console.log(res.data.data);

                    this.data=res.data.data;
                    for(var i=0;i<this.data.length;i++){
                        this.data[i].checked=false;
                    }
                    console.log(this.data);
                },function(){
                    alert("请求数据失败")
                })
            },
            methods:{
                dele:function(index){
                    if(confirm("确认删除ID为"+index+"的老师")){

                    this.$http.get("teacher_dele.action?id="+index).then(function(res){
                        this.$http.post("teacher_getSearch.action",{name:this.searchcon},{emulateJSON: true}).then(function(res){
                    console.log(res.data.data);

                    this.data=res.data.data;
                    for(var i=0;i<this.data.length;i++){
                        this.data[i].checked=false;
                    }
                    console.log(this.data);
                },function(){
                    alert("请求数据失败")
                })
                        if(!res.data.success){
                            alert("删除失败")
                        }

                    }
                ,function(){
                    alert("请求数据失败")
                })
                }
                },
                update:function(name,password,course,pointer){
                    this.pointer=pointer;
                    this.name=name;
                    this.password=password;
                    this.course=course;
                },
                search:function(){
                    this.$http.post("teacher_getSearch.action",{name:this.searchcon},{emulateJSON: true}).then(function(res){
                    console.log(res.data.data);

                    this.data=res.data.data;
                    for(var i=0;i<this.data.length;i++){
                        this.data[i].checked=false;
                    }
                    console.log(this.data);
                },function(){
                    alert("请求数据失败")
                })
                },
                sure:function(index){
                    //
                    /*alert(index);

                    alert(this.name);
                    alert(this.password);
                    alert(this.course);*/
                    this.$http.post("teacher_update.action",{name:this.name,password:this.password,course:this.course,id:index},{emulateJSON: true}).then(function(res){
                    this.$http.post("teacher_getSearch.action",{name:this.searchcon},{emulateJSON: true}).then(function(res){
                    console.log(res.data.data);

                    this.data=res.data.data;
                    for(var i=0;i<this.data.length;i++){
                        this.data[i].checked=false;
                    }
                    console.log(this.data);
                },function(){
                    alert("请求数据失败")
                })
                        console.log(res.data.success);
                        if(!res.data.success){
                            alert("数据更新失败");
                        }else{
                        this.pointer=-1;
                        }
                    },function(){
                        alert("数据更新失败");
                    })
                },
                all:function(){

                    if(this.alldata){
                        for(var i=0;i<this.data.length;i++){
                        this.data[i].checked=true;
                        }
                    }else{
                    for(var i=0;i<this.data.length;i++){
                        this.data[i].checked=false;
                        }

                    }

                }
            }
        })

<div class="content" >
				<div class="card-box" >
					<!-- Row start -->
					<div class="am-g">
						<div class="am-u-sm-12 am-u-md-6">
				          <div class="am-btn-toolbar">
				            <div class="am-btn-group am-btn-group-xs">
				              <button type="button" onclick="location.href='teacher_add.jsp'" class="am-btn am-btn-default"><span class="am-icon-plus"></span> 新增</button>
				              <button type="button" class="am-btn am-btn-default"><span class="am-icon-save"></span> 保存</button>
				              <button type="button" class="am-btn am-btn-default"><span class="am-icon-trash-o"></span> 删除</button>
				            </div>
				          </div>
				        </div>	

						<div class="am-u-sm-12 am-u-md-3">
				          <div class="am-input-group am-input-group-sm">
				            <input type="text" class="am-form-field" v-model="searchcon">
				          <span class="am-input-group-btn">
				            <button @click="search" class="am-btn am-btn-default" type="button">搜索</button>
				          </span>
				          </div>
				        </div>
				      </div>
					  <!-- Row end -->

					  <!-- Row start -->
					  	<div class="am-g">
        <div class="am-u-sm-12">
          <form class="am-form" onsubmit="return false">
            <table class="am-table am-table-striped am-table-hover table-main">
              <thead>
              <tr>
                <th class="table-check"><input @click="all()" v-model="alldata" type="checkbox" /></th><th class="table-id" style="width:200px">ID</th><th style="width:150px" class="table-id">姓名</th><th style="width:150px" class="table-title">密码</th><th style="width:200px" class="table-title">课程</th><th class="table-set">操作</th>
              </tr>
              </thead>
              <tbody>
              <tr v-for="(val,index) in data">
                <td><input type="checkbox" v-model="val.checked"/></td>
                <td>{{val.id}}</td>
                <td><span v-show="pointer!=val.id">{{val.name}}</span><input style="width:100px" v-show="pointer==val.id" v-model="name"></td>
                <td><span v-show="pointer!=val.id">{{val.password}}</span><input style="width:100px" v-show="pointer==val.id" v-model="password"></td>
                <td><span v-show="pointer!=val.id">{{val.course}}</span><input style="width:100px" v-show="pointer==val.id" v-model="course"></td>

                <td>
                  <div class="am-btn-toolbar">
                    <div class="am-btn-group am-btn-group-xs">
                      <button v-show="pointer!=val.id" @click="update(val.name,val.password,val.course,val.id)" class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 编辑</button>
                      <button v-show="pointer==val.id" @click="sure(val.id)" class="am-btn am-btn-default am-btn-xs am-text-secondary"><span class="am-icon-pencil-square-o"></span> 确定</button>
                      <button  onclick="window.clipboardData.setData('text','123')" class="am-btn am-btn-default am-btn-xs am-hide-sm-only"><span class="am-icon-copy"></span> 复制</button>
                      <button @click="dele(val.id)" class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only"><span class="am-icon-trash-o"></span> 删除</button>
                    </div>
                  </div>
                </td>
              </tr>

              </tbody>
            </table>
            <div class="am-cf">
              共 {{data.length}} 条记录
              <div class="am-fr">
                <ul class="am-pagination">
                  <li class="am-disabled"><a href="#">«</a></li>
                  <li class="am-active"><a href="#">1</a></li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">5</a></li>
                  <li><a href="#">»</a></li>
                </ul>
              </div>
            </div>
            <hr />
            <p>注：.....</p>
          </form>