http://www.cnblogs.com/xwwin/p/5816527.html

 

1 script src= " http://code.jquery.com/jquery.min.js " >2 
     3 
     4 5 6 7 

 

 

 

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 

1 
      
        2         
       
管理后台
  3             
       
         4             
 7             
           8             
20             
21             
 5             
           
            
             网站 
            
            
             备注
            
           
 6             
   9             {% verbatim %}
           10             
           
            11 
            12 
             
              { {item.name}}
             
            
             { {item.comment}}
            
13 
            
             14 
             编辑15 
             删除16 
            
17 
           
18             {% endverbatim %}19             
22         
      
23         
      
       24         
       
统计后台
 25             
       
        26             
29             
          30             
42             
43             
27             
           
            
             网站 
            
            
             备注
            
           
28             
  31             {% verbatim %}
           32             
           
            33 
            34 
             
              { {item.name}}
             
            
             { {item.comment}}
            
35 
            
             36 
             编辑37 
             删除38 
            
39 
           
40             {% endverbatim %}41             
44         
      

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 
       2         
      
        3         
       
         4         
        
          5             
         
           6                 
          
新增项目
 7                 
          × 8             
         
 9             
         
          10             
          
             11             {% csrf_token %} 12             
           
            13 
            名称:14 
            
             15 
             16 
             
              请填写网站名称
             
17 
            
18 
           
  19             
           
             20 
            网址:21 
            
             22 
             23 
            
24 
           
  25             
           
             26 
            备注:27 
            
             28 
             29 
            
30 
           
31             
           
            32 
            33 34 管理后台35 36 
            37 38 统计后台39 40 
           
41             
           
            42 
            
             43 
             取消44 
             新增45 
             取消修改46 
             提交修改47 
             清空48 
            
 49 
           
50 51             
          
52             
         
53         
        
        54         
       
55         
      
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 ;

}