vue.js出了有段时间了，不过一直在忙于做各种pc、h5、响应式前端切图项目，一直没有腾出时间去研究，也看过一些关于vue的文档，还没开始，就告诉你要装node.js，然后页面打包等，我内心直接抗拒 ，把页面关掉了

既然可以不依赖vue.js运行（js是在浏览器运行的），那么为什么要跟我讲那么多nodejs，我知道nodejs等可以很好的辅助，但是我需要的是直奔主题

能不能直接加载vue.js 就能把一个完整的增删改查做出来？ 可以，代码如下：

<script src="vue.min.js"></script> <script src="axios.min.js"></script>

多加载了一个axios.js ，是用来从api调用数据的，一开始做获取数据，删除数据是真实链接api后端的，并且有效，后来因为做增，改，复杂一些，直接用模拟数据实现的。

代码：

var data={

results: [

{piaoid:100,address:"dsadsfdsfds",id:1},

{piaoid:101,address:"dsadsfdsfdsfdsfds",id:2},

{piaoid:102,address:"dsadsffdsfds",id:3},

{piaoid:103,address:"dsadsfdsfdsfdsfds",id:4},

{piaoid:104,address:"dsadsfdsfdsfdsfds",id:5},

{piaoid:105,address:"dsadsfdsfdsfds",id:6},

{piaoid:106,address:"dsadsfdsfdsfds",id:7},

{piaoid:107,address:"dsadsfdfdsfds",id:8},

{piaoid:108,address:"dsadsfdsfdsfdsfds",id:9},

{piaoid:110,address:"dsadsfdsfdsfds",id:10},

{piaoid:111,address:"dsadsffdsfds",id:11}

],

rowtemplate:{piaoid:'',address:'',id:0}

}

var vm = new Vue({

el: '#app',

data:data,

edit:function(result){

this.rowtemplate = result;

},

save:function(){

if(this.rowtemplate.id==0){

this.rowtemplate.id=this.results.length+1;

this.results.push(this.rowtemplate);

}

this.rowtemplate={piaoid:'',address:'',id:0}

}

}

})

演示地址

---

原创来源 切图网（qietu.com）

专注psd转html5、pc、h5营销页，响应式等web前端切图开发。