//这是html结构
<div class="box" id="box">
    <p>选择项目：</p>
    <ul class="list-group">
        <li class="input-group" v-for="todo in todos">
            <span class="input-group-addon">
                <input type="checkbox"></span>
            <input type="text" class="form-control" v-bind:value="todo.value">
        </li>
    </ul>
</div>

//这是vue的初始化 
       new Vue({
            el: '#box',
            data: function(){
                return {
                    todos: []
                }
            },
            created:function(){
                var _self = this;
                $.ajax({
                    method:'post',
                    url:'db_connect/db.php',
                    success:function(items){
                        _self.todos = items;
                    },
                    async:true
                });
            }
        })

//这是php从服务器获取传回数据过程，蓝色部分是对数据进行json数据的处理
<?php
    header("content-type:text/html;charset:utf-8");

    require 'profile.inc.php';

    require 'db.class.php';

    //获取资源句柄
    $_db = db::get_db();

    $_sql = "SELECT value FROM vue_test";

    //获取结果集
    $_result = $_db->query($_sql);

    $json = '';
    while (!!$row = mysqli_fetch_array($_result, MYSQL_ASSOC)) {
        $json .= json_encode($row).',';//将数组和对象，转换为json格式
    }
    echo '['.substr($json, 0 , strlen($json) - 1).']';
    //print_r($_result->fetch_row());

    //清理关闭
    db::close_db($_result,$_db);
    //print(is_object($_result));
 ?>