Vue传递参数-从前端HTML到Vue函数再到后端之间的参数传递

Vue传递参数

• Vue是非常好用的前端框架，配置了便捷的前端互动功能，这里将介绍一下Vue最基本的参数传递方法。
  和其他语言一样，Vue函数支持从HTML传递参数到Vue函数，并把参数传递到后台进行处理。
  本文将按照一个通过输入筛选字段的实例来介绍参数传递方法。

HTML设置

导入Vue.js

<script type="text/javascript" src="/static/js/vue.js"></script>
<script type="text/javascript" src="/static/js/vue-router.js"></script>

• 定义一个输入框，用来输入筛选字段，并设定传递两个参数“p1”和“p2”。
  这样可以同时检验两种传递参数的方法，其中是输入框用来检验V-model动态参数传递的方法，“p1”和“p2”是静态参数。

<div id="filters_require">
     <input
         v-model="search_Project" 
         placeholder="请输入“模块号”筛选" 
         style="width: 20%"
         @keyup.enter="filter_with_requires('p1','p2')"
         >
     </input>
<button v-on:click="filter_with_requires('p1','p2')">筛选</button>
</div>

Vue函数

• 创建Vue函数，并接受三个参数，V-Model 和两个静态参数；
• Vue函数，将三个参数传递给后台程序进行下一步处理。

new Vue({
      el: '#filters_require',
      data:{
          search_Project:  '',
          db_table: '',
          column_filter: '',
      },
      methods:{
          filter_with_requires: function(P1,P2){   
              data_to_send = {
                  search_Project: this.search_Project,
                  db_table: P1,
                  column_filter: P2,
              };
              data_to_send = JSON.stringify(data_to_send);  //数据转换成JSON
              $.post('/filter_with_requires/',
                        data_to_send,   //传递给后台的JSON数据
                        function(r,err){
                        if(err === 'success'){
                             alert(r);
                            }else{
                            alert(err);
                            return console.log(err);
                        }
                    
                        });
          }
      }
     })   

后台处理（Django）

• 后台采用python进行处理，首先接受三个参数：

search_project = a['search_Project']
db_table = a['db_table']
filter_col = a['column_filter']

• 接受参数的下一步处理，可以自由发挥了。