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

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，最好是看官网认真学习。