vue2.0.js基础开发使用心得(结合实际项目对数据的增删改查)

时间:2021-04-27 15:19:20

1.首先申明,没有使用vue 的组件,以及脚手架等,都是一些基础语法的使用。

--------------------------------------------------------------------

2.自己的项目结合使用jquery,首先引入vue2.0.js和jquery

vue2.0下载地址:https://cn.vuejs.org/v2/guide/installation.html --------------------->生产版本

3.建立view层-------------------->静态的html结构

 <div class="block-content collapse in" id="stockPool">
<table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="example">
<thead>
<tr>
<th width="20%">中国风</th>
<th width="20%">欧美范</th>
<th width="20%">北极星</th>
<th width="20%">欧洲欣</th>
<th width="20%">操作</th>
</tr>
</thead>
<tbody id="gredysy">
<tr class="odd gradeX" v-for="(el,index) in datas">
  <td><input type="text" v-bind:value='formatMomentString(el.createDateTime)' readonly="readonly" v-bind:stockMainId="el.stockMainId"></td>
      <td><input type="text" v-bind:value="el.stockId" readonly="readonly"></td>
<td><input type="text" v-bind:value="el.stockName" readonly="readonly"></td>
<td><input type="text" v-bind:value="el.stockRose+'%'" readonly="readonly"></td>
<td><a href="javascript:;" v-on:click="changeState($event)">编辑</a> <a href="javascript:;" v-on:click="saveState($event)">保存</a> </td>
</tr> </tbody>
</table>
<div>
4.建立对应的model------------------>
var model = new Vue({
el: '#stockPool',//view层对应的容器的id
data: {
Isdisabled: true,
datas: {}//--------------------------->需要渲染的数据,开始为空的,需要method中的方法给其传递值
}, methods: {
changeState: function (ev) {
var _this = $(ev.target);//获取当前被点击元素的this ,如果直接使用,那么这个this是指当前model
_this.closest('tr').find('input').removeAttr('readonly');
},
saveState: function (ev) {
var that=this;//那么这个this是指当前model var _this = $(ev.target);
var _tr=_this.closest('tr').find('input');
if((_tr.attr("readonly"))=="readonly"){
layer.msg('编辑之后才可以保存', {time: 1000, icon: 1});
return false;
}
var dataObj={};
dataObj.createDateTime=_tr.eq('0').val();
dataObj.stockMainId=_tr.eq('0').attr('stockMainId');
dataObj.stockId=_tr.eq('1').val(); dataObj.stockName=_tr.eq('2').val(); dataObj.stockRose=_tr.eq('3').val().replace(/%/g,'');
      //  xxxxxcode------------->进行ajax请求
    },
    getAllStock: function () {
     var that=this;
     var loading = layer.load(1, {shade: [0.8, '#393D49']});
     $.ajax({
     url: '请求数据地址',
     type: 'post',
     async: false,
     dataType: 'json',
     success: function (data) {
     that.datas = data.retContent;//------------->给这个model data的datas赋值,这样在view就可以渲染模板
    layer.close(loading);
    }, error: function (data) {
     layer.close(loading);
    }
   });
  }
  
}
//加载完毕之后,需要执行这个方法,进行页面的首次渲染
注意:
1.数据以及一些属性放在model的data自带属性里面
2.方法放在对应的model的methods自带属性里面
3.如果需要获取当前元素的this,需要给对应的事件传入$event 例如: v-on:click="changeState($event)";
4.methods对应的方法里面的this都是指当前的model
5.绑定的值可以直接使用函数return出来使用 例如:v-bind:value='formatMomentString(el.createDateTime)';把这个数据时间格式化
model.getAllStock();
以上案例使用的v-for,v-bind,v-on,还有v-if,最好是看官网认真学习。