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

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

  1. 使用PHP从数据库中查询读出来一个表的数据,并以JSON格式提供访问
  2. HTML页面中使用JQuery的$.getJSON()方法加载JSON数据
  3. JSON数据加载完毕后实例化Vue对象并将数据渲染到HTML页面中

PHP读数据库返回JSON的过程就不细说了,直接来看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>idtd>
                <td>nametd>
                <td>typetd>
                <td>locationtd>
            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":"市局"}]

你可能感兴趣的:(前端开发)