vue 与 django的数据交互

原文地址：关于vue 的学习  http://www.cnblogs.com/keepfool/

                                           数据表格展示： http://www.jb51.net/article/94559.htm

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" href="styles/demo.css" />
    </head>

    <body>
        <div id="app">
            <div id="searchBar">
                Search <input type="text" v-model="searchQuery" />
            </div>

            --组件名称  simple-grid    其中：data-value 同 progs中的 dataValue--
---<simple-grid  :data-value="gridData"  同语法  <simple-grid v-bind:data-value="gridData" --
<simple-grid :data-value="gridData" :columns="gridColumns" :filter-key="searchQuery"> </simple-grid> --filter-key 等同于 props 中的 filterKey-- </div> -- 模板名称 ：grid-template -- <template id="grid-template"> <table> <thead> <tr> <th v-for="col in columns"> {{ col | capitalize}} </th> </tr> </thead> <tbody>

　　　　　　　　       <tr v-for="entry in dataValue | filterBy filterKey">
                        <td v-for="col in columns">
                            {{entry[col]}}
                        </td>
                    </tr>
                </tbody>
            </table>
        </template>

    </body>
    <script src="js/vue.js"></script>
    <script>
    //    --全局注册组件 simple-grid---
        Vue.component('simple-grid', {

            // 模板id = # grid-template
            template: '#grid-template',
            // 参数 dataValue 在模板中，要改变为 data-value
            props: {
                dataValue: Array,
                columns: Array,
                filterKey: String
            }
        })

        var demo = new Vue({
            el: '#app',
            data: {
                searchQuery: '',
                gridColumns: ['name', 'age', 'sex'],
                gridData: [{
                    name: 'Jack',
                    age: 30,
                    sex: 'Male'
                }, {
                    name: 'Bill',
                    age: 26,
                    sex: 'Male'
                }, {
                    name: 'Tracy',
                    age: 22,
                    sex: 'Female'
                }, {
                    name: 'Chris',
                    age: 36,
                    sex: 'Male'
                }]
            }
        })
    </script>

</html>

 

 

　　　　　　服务器端的配置： https://www.cnblogs.com/holbrook/archive/2012/02/19/2358704.html

　　　　　　引入 rest_framework http://blog.csdn.net/ppppfly/article/details/51077433

　　　　　　　　　　　　　　　　https://www.cnblogs.com/bayueman/p/6647641.html

 

　　　　　　　　　　　　　　测试成功的方法：https://www.cnblogs.com/liu-yao/p/6058488.html

 

posted on 2018-03-20 08:35  筱箃  阅读(392)  评论(0)  编辑  收藏  举报

导航