Vue入门学习-使用服务器传来的JSON数据交给Vue渲染HTML页面

17-09-09 来源：[db:作者]

收藏我要投稿

这个Vue搞得挺不错,简单粗暴还有效,上手也不难,记录一下今天的学习,首先描述一下效果:

1、使用PHP从数据库中查询读出来一个表的数据,并以JSON格式提供访问

2、HTML页面中使用JQuery的$.getJSON()方法加载JSON数据

3、JSON数据加载完毕后实例化Vue对象并将数据渲染到HTML页面中

PHP读数据库返回JSON的过程就不细说了,直接来看HTML代码吧

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <title>JSON取数测试</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <div id="main">
        <table border=1>
            <tr>
                <td>id</td>
                <td>name</td>
                <td>type</td>
                <td>location</td>
            </tr>
            <tr v-for="r in rows">
                <td>{{r.id}}</td>
                <td>{{r.name}}</td>
                <td>{{r.type}}</td>
                <td>{{r.location}}</td>
            </tr>
        </table>
    </div>
</body>
<script>
    $(document).ready(function () {
        $.getJSON("http://192.168.8.8", function (result, status) {
            var v = new Vue({
                el: '#main',
                data: {
                    rows: result
                }
            })
        });
    });
</script>

</html>

这里补充说明一下,PHP返回的JSON数据是直接用的php内置函数json_encode($一个array类型变量,JSON_UNESCAPED_UNICODE);来实现的,后面跟的参数JSON_UNESCAPED_UNICODE是标注编码时不要用Unicode,要不然编码出来的JSON字符串里面所有中文就都会变成/xxxxx这种格式的了.最终PHP输出的JSON字符串格式如下:

[{"id":1,"name":"张三","type":"工业","location":"市局"},{"id":2,"name":"李四","type":"工业","location":"市局"}]

点击复制链接与好友分享!回本站首页