http://www.cnblogs.com/xwwin/p/5816527.html
1 script src= " http://code.jquery.com/jquery.min.js " ></script> 2 <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"> 3 <link href="/static/images/favicon.ico" rel="shortcut icon"> 4 <script src="/static/bootstrap/js/bootstrap.min.js" ></script> 5 <script src="/static/bootstrap/bootbox.min.js "></script> 6 <script src="https://vuejs.org/js/vue.min.js "></script> 7 <style> 8 .top { margin-bottom: 30px; } 9 </style>
vue的大体结构是
vm=new Vue({
el:'vue作用元素的css定位表达式'， //一般来说可以定位为整个body元素
data:{ 用于定义变量，为json形式}，
methods:{用于定义操纵改变上述data中定义的变量的值的方法，
形式为 func_name:function(i){this.变量名=i;}
},
computed:{
用于定义一个实时变量，该变量的值实时等于调用对应方法 返回的结果。与methods中的方法不同的是，methods中的方法只有在html中被触发的了才会执
行，儿computed中的方法，实时都在运行，返回一个实时变量。 可在methods中通过this.var_name来获取这个实时的值，也可在htlm中绑定这个实时的值。
形式为 var_name:function(){ var del=this.var_1+2 ;return del }
})
1 <script>//vue与ajax结合 2 //python 模板safe，让传递内容不转义 3 var all_site={{all_site|safe}}; 4 5 var vm=new Vue({ 6 el:'#sitepage', 7 data:{ 8 "manage":all_site, 9 addArr:{'id':'0','name':'','url':'','comment':'','class':1}, 10 addErr:{'name':false}, 11 nowEditCol:-1, 12 editStatus:false, 13 delId:-1 14 15 }, 16 methods:{ 17 editModel:function(){ this.editStatus=true ;}, 18 editModelExit:function(){ this.editStatus=false; }, 19 startDel:function(id){ this.delId=id; }, 20 cancelDel:function(){ this.delId=-1; }, 21 //启动索引index数据 ,编辑单个条目 22 startEdit:function(id){ 23 this.nowEditCol=id; 24 this.addArr=this.editArr; 25 }, 26 //取消单个条目的编辑状态 27 cancelEdit:function(){ 28 this.nowEditCol=-1; 29 this.resetStu(); 30 }, 31 //启动索引index数据修改确认，update 32 sureEdit:function(id){ 33 var index=this.editArr.index 34 //更新后台数据 35 var datas={ 36 'method':'update', 37 'id':this.addArr.id, 38 'name':this.addArr.name, 39 'url':this.addArr.url, 40 'comment':this.addArr.comment, 41 'class':this.addArr.class 42 }; 43 var result=this.VueAjax(datas); 44 if(result){ 45 //更新前台页面数据显示 46 this.manage.splice(index,1,this.addArr);//3个入参时1表示插入，这个列表中的索引位置起插入元素this.editArr 47 } 48 this.nowEditCol=-1; 49 this.resetStu();//重置弹窗数值 50 }, 51 //删除索引index数据 52 deleteStu:function(id){ 53 //删除后台数据 54 var datas={ 55 'method':'delete', 56 'id':this.delArr.id 57 }; 58 var result=this.VueAjax(datas); 59 60 61 if(result){ 62 //删除前台显示数据 63 this.manage.splice(this.delArr.index,1); 64 65 } 66 this.cancelDel(); 67 }, 68 //新增成绩 69 submitStu:function(){ 70 if(this.addArr.name==''){ 71 this.addErr.name=true; 72 } 73 else{ 74 this.addErr.name='' 75 //ajax新增后台数据，返回id 76 var datas={ 77 'method':'add', 78 'name':this.addArr.name, 79 'url':this.addArr.url, 80 'comment':this.addArr.comment, 81 'class':this.addArr.class 82 }; 83 84 var return_id=this.VueAjax(datas); 85 if(return_id!=false){ 86 //新增前台数据显示 87 var addArr={ 88 'id':return_id, 89 'name':this.addArr.name, 90 'url':this.addArr.url, 91 'comment':this.addArr.comment, 92 'class':this.addArr.class 93 }; 94 this.manage.push(addArr); 95 } 96 this.resetStu(); 97 }; 98 }, 99 //复位新增表单 100 resetStu:function(){ 101 this.addArr={ 102 'id':'', 103 'name':'', 104 'url':'', 105 'comment':'', 106 'class':1 107 }; 108 this.addErr={'name':false}; 109 }, 110 //ajax方法 111 VueAjax:function(datas){ 112 result=false 113 $.ajax({ 114 url: '/indexs/', //请求的url地址 115 type: 'POST', //请求方式 116 data: {"datas":JSON.stringify(datas), 'csrfmiddlewaretoken': $('input[name="csrfmiddlewaretoken"]').val()},//传递给服务器的数据 117 dataType:'json', //这里添加了dataType ,设置返回值类型 118 async : false, 119 success: function (arg) { 120 var jsonObj=arg; 121 var status=jsonObj.status; 122 if(status){ 123 // alert("success！"); 124 if(jsonObj.id){ 125 result= jsonObj.id; 126 } 127 else{ 128 result= true ; 129 } 130 } 131 else{ 132 alert("some wrong,please try again！"); 133 result= false; 134 } 135 } 136 }); 137 return result ; 138 } 139 }, 140 computed:{ 141 //存储当前编辑的对象,相当于一个实时检测，当前此刻处于编辑状态的对象是哪个 142 editArr:function(){ 143 var editO={}; 144 var index=0; 145 for(var i=0,len=this.manage.length;i<len;i++){ 146 if(this.nowEditCol === this.manage[i]['id'] ){ 147 editO= this.manage[i]; 148 index=i; 149 break; 150 } 151 } 152 return { 153 'index':index, 154 'id':editO.id, 155 'name':editO.name, 156 'url':editO.url, 157 'comment':editO.comment, 158 'class':editO.class 159 } 160 }, 161 delArr:function(){//实时检测delId的值 162 var delO={}; 163 var index=0; 164 for(var i=0,len=this.manage.length;i<len;i++){ 165 if(this.delId === this.manage[i]['id'] ){ 166 delO= this.manage[i]; 167 index=i; 168 break; 169 } 170 } 171 return { 172 'index':index, 173 'id':delO.id, 174 'name':delO.name, 175 'url':delO.url, 176 'comment':delO.comment, 177 'class':delO.class 178 } 179 } 180 } 181 }) 182 </script>
1 <div class="col-md-6" id="manage"> 2 <h3>管理后台</h3> 3 <table class="table table-hover "> 4 <thead><tr><th> 5 <div class=row><div class="col-md-5">网站 </div><div class=col-md-7>备注</div></div> 6 </th></tr></thead> 7 <tbody> 8 <tr v-for="item in manage"><td v-if="item.class==1"> 9 {% verbatim %}<!--编辑，做成弹窗或 就地编辑，就地编辑需要隐藏原文本，并显示编辑窗，先做就地编辑，还需要解决超链接在编辑时被点击的问题，暂时用jquery手动实现吧--> 10 <div class="row " v-bind:id="item.id" > 11 <a class="col-md-5 control-lable" v-bind:href="item.url" target="_blank"> 12 <div class=content>{{item.name}}</div></a><div class="content col-md-5">{{item.comment}}</div> 13 <div class=" col-md-2" v-show="editStatus" > 14 <button class=" btn btn-info btn-sm " v-on:click="startEdit(item.id)" data-toggle="modal" data-target="#addModal">编辑</button> 15 <button class=" btn btn-danger btn-sm" v-on:click="startDel(item.id)" data-toggle="modal" data-target="#deleModal" >删除</button> 16 </div> 17 </div> 18 {% endverbatim %} 19 </td></tr> 20 </tbody> 21 </table> 22 </div> 23 <div class="col-md-6" id="stat"> 24 <h3>统计后台</h3> 25 <table class="table table-hover "> 26 <thead><tr><th> 27 <div class=row><div class="col-md-5">网站 </div><div class=col-md-7>备注</div></div> 28 </th></tr></thead> 29 <tbody> 30 <tr v-for="item in manage"><td v-if="item.class==2"> 31 {% verbatim %}<!--编辑，做成弹窗或 就地编辑，就地编辑需要隐藏原文本，并显示编辑窗，先做就地编辑，还需要解决超链接在编辑时被点击的问题，暂时用jquery手动实现吧--> 32 <div class="row " v-bind:id="item.id" > 33 <a class="col-md-5 control-lable" v-bind:href="item.url" target="_blank"> 34 <div class=content>{{item.name}}</div></a><div class="content col-md-5">{{item.comment}}</div> 35 <div class=" col-md-2" v-show="editStatus" > 36 <button class=" btn btn-info btn-sm " v-on:click="startEdit(item.id)" data-toggle="modal" data-target="#addModal">编辑</button> 37 <button class=" btn btn-danger btn-sm" v-on:click="startDel(item.id)" data-toggle="modal" data-target="#deleModal" >删除</button> 38 </div> 39 </div> 40 {% endverbatim %} 41 </td></tr> 42 </tbody> 43 </table> 44 </div>
vue中的变量格式与python的django模板类似 ，使用 {{var_name}}表示; v-for 表示for循环。 v-if的值为一个bool表达式，为true时则渲染出该元素，否则html中不会出现该元素
<tr v-for="item in manage"><td v-if="item.class==1"> </td></tr>
v-bind用于绑定元素的属性值，为单向绑定
<div class="row " v-bind:id="item.id" >
<a class="col-md-5 control-lable" v-bind:href="item.url" target="_blank">
v-on用于绑定元素的动作与方法，当发生该动作时，就会触发绑定的方法
<button class=" btn btn-info btn-sm " v-on:click="startEdit(item.id)" data-toggle="modal" data-target="#addModal">编辑</button>
data-toggle="modal" data-target="#addModal"是bootstrap的弹窗语法，当该元素被点击时则会弹出"#addModal"对应的弹窗，vue与bootstrap的触发方法各自执行。
verbatim是python的模板语法，用于标明它包含的html不需要渲染，本例中是右vue渲染
{% verbatim %}
<div class="modal-body"><div class="content" bind:id="delArr.id" >{{delArr.name}}</div></div>
{% endverbatim %}
1 <!--bootstrap的新增项目的弹窗 ，.modal用于识别该块为弹窗，.fade切换弹窗时有淡出效果，aria-hidden="true"用于隐藏弹窗--> 2 <div class="modal fade" id="addModal" aria-hidden="true"> 3 <div class="modal-dialog" style="450px;"> 4 <div class="modal-content"> 5 <div class="modal-header"> 6 <h6 class="modal-title" id="myModalLabel">新增项目</h6> 7 <button type="button" class="close" data-dismiss="modal" aria-hidden="true" v-on:click="cancelEdit">×</button> 8 </div> 9 <div class="modal-body"> 10 <form class="form-horizontal"> 11 {% csrf_token %} 12 <div class="row form-group"> 13 <label class="col-md-2 control-label" for="inputName">名称:</label> 14 <div class=" col-md-8"> 15 <textarea class="form-control" type="text" id="inputName" v-model="addArr.name"></textarea> 16 <div style="color:red;" v-if="addErr.name">请填写网站名称</div> 17 </div> 18 </div> 19 <div class="row form-group"> 20 <label class="col-md-2 control-label" for="inputUrl">网址:</label> 21 <div class=" col-md-8"> 22 <textarea name=siteurl class="form-control" type="text" id="inputUrl" v-model="addArr.url"></textarea> 23 </div> 24 </div> 25 <div class="row form-group"> 26 <label class="col-md-2 control-label" for="inputPassword">备注:</label> 27 <div class=" col-md-8"> 28 <textarea name=comment class="form-control" type="text" id="inputPassword" v-model="addArr.comment"></textarea> 29 </div> 30 </div> 31 <div class="form-group"> 32 <label class="radio " col-md-4> 33 <input type="radio" name="optionsRadios" id="optionsRadios1" value=1 checked v-model="addArr.class"> 34 管理后台 35 </label> 36 <label class="radio inline" col-md-4> 37 <input type="radio" name="optionsRadios" id="optionsRadios2" value=2 v-model="addArr.class"> 38 统计后台 39 </label> 40 </div> 41 <div class="form-group" > 42 <div class="modal-footer "> 43 <button type="button" class="btn btn-info" data-dismiss="modal" v-on:click="resetStu" v-if="nowEditCol==-1">取消</button> 44 <button type="button" class="btn btn-success" v-bind:data-dismiss="addArr.name?'modal':null" id=addsubmit v-on:click="submitStu" v-if="nowEditCol==-1">新增</button> 45 <button type="button" class="btn btn-info" data-dismiss="modal" v-on:click="cancelEdit" v-if="editArr.id==nowEditCol">取消修改</button> 46 <button type="button" class="btn btn-success" data-dismiss="modal" v-on:click="sureEdit(editArr.id)" v-if="editArr.id==nowEditCol">提交修改</button> 47 <button type="button" class="btn btn-warning" v-on:click="resetStu">清空</button> 48 </div> 49 </div> 50 51 </form> 52 </div> 53 </div> 54 </div> 55 </div> 56 <!--弹窗结束-->
v-model用于输入框，表单 的双向绑定，绑定的变量值变化会让显示的值变化。 同时，显示的用户的输入改变也会让绑定的变量值改变
<label class="col-md-2 control-label" for="inputName">名称:</label>
<div class=" col-md-8">
<textarea class="form-control" type="text" id="inputName" v-model="addArr.name"></textarea>
<div style="color:red;" v-if="addErr.name">请填写网站名称</div>
v-if表达式的值如果为空值，‘’，未定义，也会当作False来处理
这样绑定 ，后就可以通过addArr.name获取用户的输入值。
<button type="button" class="btn btn-success" v-bind:data-dismiss="addArr.name?'modal':null" id=addsubmit v-on:click="submitStu" v-if="nowEditCol==-1">新增</button>
点击新增，就会触发vue中定义的submitStu方法。
v-bind:data-dismiss="addArr.name?'modal':null" 这个表示如果addArr.name为true则属性data-dismiss='modal',否则不显示该属性值。
data-dismiss='modal'是bootstrap的弹窗中对弹窗操作的属性，添加该属性值，则点击该元素时，弹窗就会关闭。
<button type="button" class="btn btn-success" data-dismiss="modal" v-on:click="sureEdit(editArr.id)" v-if="editArr.id==nowEditCol">提交修改</button>
提交修改与新增类似，只是点击编辑时，会通过方法startEdit(item.id)将启动编辑的变量赋值给与弹窗绑定的值addArr而显示在弹窗中。
startEdit:function(id){
this.nowEditCol=id;
this.addArr=this.editArr;
}
vue只是用于前端页面展示的交互控制，在vue根据用户的操作而改变页面展示时，在ajax也在对应方法中被调用，来在数据库中对数据进行处理。
这里把ajax定义到vue中的一个methods里面了，async : false,用于设置关闭ajax的异步操作，使在执行ajax的时候阻塞，执行完了ajax，再执行后面的return result;
VueAjax:function(datas){
result=false
$.ajax({
url: '/indexs/', //请求的url地址
type: 'POST', //请求方式
data: {"datas":JSON.stringify(datas), 'csrfmiddlewaretoken': $('input[name="csrfmiddlewaretoken"]').val()},//传递给服务器的数据
dataType:'json', //这里添加了dataType ,设置返回值类型
async : false,
success: function (arg) {
var jsonObj=arg;
var status=jsonObj.status;
if(status){
// alert("success！");
if(jsonObj.id){
result= jsonObj.id;
}
else{
result= true ;
}
}
else{
alert("some wrong,please try again！");
result= false;
}
}
});
return result ;
}