Vue.js  是一套构建用户界面的渐进式框架。

优点：

与大型框架不同的是采用自底向上的增量开发的设计，

只聚焦于视图层，不仅易于上手，还便于与第三方库或既有项目整合

当与现代化工具链以及各种类库结合使用时，也完全能为复杂的单页应用提供驱动

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

使用vue展示json对象中数据

特点：采用声明式渲染  、使用需要实例化

看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。

现在数据和 DOM 已经被建立了关联，所有东西都是响应式的，当你打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，

并修改message的值，你将看到上例相应地更新。

浏览器上

使用js方式展示json对象中数据

浏览器上

与js或jQuery相比有什么优点

js或jquery需要通过操作HTML DOM 的方式，把数据显示上

如果使用Vue ，只需要提供数据，以及数据绑定的元素id,就可以了，不需要显示地操作HTMl DOM，

代码：

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>vue学习</title>

    <!--引入vue-->

    <script src="http://www.obge.top/js/vue/v2.5.16/vue.min.js"> </script>

</head>

<body>

<!--准备一个盒子-->

<div id="d1" style="border: solid">

    <!--获取 在两个大括号中 直接通过  名.属性-->

    <p>{{obge.name}} </p>

    <h1 style="color: brown"> {{obge.age}}</h1>

</div>

<!--Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

     状态发生改变时重新渲染组件，应用在DOM上

-->

<script>

    //准备一个json 对象

    var obge = {"name":"小乔","age":17}

    //通过vue.js 把数据和对应的视图关联起来

    //每个 Vue 应用都需要通过实例化 Vue 来实现

    var vm = new Vue({

        //获取前端元素 id  注意有个#

        el: '#d1',

        data:{

            //关联json对象

            message:obge

        }

    })

</script>

<!--<script>-->

    <!--//准备一个json 对象-->

    <!--var obge  = {"name":"周瑜","age":12};-->

    <!--//获取 盒子的 id-->

    <!--var div1 = document.getElementById("d1");-->

    <!--//在盒子里面显示数据-->

    <!--div1.innerHTML = obge.name;-->

<!--</script>-->

</body>

</html>

Vue ----------- 了解， 展示json 数据的更多相关文章

  1. vue中引入json数据，不用本地请求

    1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...

  2. python中展示json数据不换行(手动换行)

    https://blog.csdn.net/chichu261/article/details/82784904 Settings ->keymap -> 在搜索框输入 wraps -&g ...

  3. vue格式化显示json数据

    已经是json格式数据的,直接用标签 <pre></pre>展示. 参考:https://www.jianshu.com/p/d98f58267e40

  4. vue请求本地json数据

    1.下载vue-resource插件 cnpm install vue-resource 1.2全局引入vue-resource: 在main.js import VueResource from ' ...

  5. vue渲染自定义json数据

    <template> <div class="wrap"> <div class="main"> <div class ...

  6. Vue之循环遍历Json数据，填充Table表格

    简单记一次Vue循环遍历Json数据,然后填充到Table表格中,展示到前端的代码: async getData(id) { const res = await this.$store.api.new ...

  7. Vue---记一次通过{{}}获取json数据-页面渲染不出来的坑

    前两天干活儿的时候碰到一个Vue的问题,让我这个菜鸡完全摸不到头脑,需求如下:前端页面点击表格中的某一行的详情按钮,会弹出一个Dialog,然后Dialog中有选项卡,选项卡中再有具体的table来展 ...

  8. 深入了解Struts2返回JSON数据的原理

    首先来看一下JSON官方对于"JSON"的解释: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析 ...

  9. （转）Struts2返回JSON数据的具体应用范例

    转载自 yshjava的个人博客主页 <Struts2返回JSON数据的具体应用范例> 早在我刚学Struts2之初的时候,就想写一篇文章来阐述Struts2如何返回JSON数据的原理和具 ...

随机推荐

  1. 在微博微信场景下学习Redis数据结构

    Redis安装 下载地址:http://redis.io/download 安装步骤: 1.yum install gcc 2.wget http://download.redis.io/releas ...

  2. 解决PL/SQL使用无法导出dmp

    解决PL/SQL使用无法导出dmp 1.配置plsql Export Executable:D:\app\product\11.2.0\dbhome_1\BIN\exp.exe 2.配置环境变量ORA ...

  3. PHP实现sha1加密AES算法加密解密数据

    一.加密代码如下: /** * * @param string $string 需要加密的字符串 * @param string $key 密钥 * @return string */ public ...

  4. MySql数据库 timeout超时报警的解决方法

    今天做查询mysql数据库是,因为数据量大所以报错 最后在 连接的地方做了如下改动: MySqlCommand cmd = new MySqlCommand(procedureName, conn); ...

  5. 为什么MES实施起来效果不佳？

    原因一:我国制造业存在管理基础的先天不足 我国企业与发达国家企业在管理发展上,存在较大的差别.发达制造国家经历了管理探索.发展.成熟.再提高的全过程,从管理基础的奠定到思想认识的深刻程度,都是我国所无 ...

  6. android studio学习----Failed to resolve: com.android.support:design:22.1.1

    这个目前好像没有合适的办法,唯一可行的就是 点击那个提示  进行SDK Manager下载就可以了 但是天朝的网啊,我试了很多次,突然的可以下载,运气啊 类似这一系列问题解决办法就是  重新更新SDK ...

  7. <Android Studio> 3.打包APK

    我的IDE版本是 3.5 我希望输出的apk文件格式是: 名称_v版本_release/debug_日期 时间.apk 步骤: 1.打开build.gradle 末尾添加如下代码 def releas ...

  8. 并发编程（六）--进程/线程池、协程、gevent第三方库

    一.进程/线程池 1.进程池 (1)什么是进程池 如果需要创建的子进程数量不大,可以直接利用multiprocess中的Process来创建.但是当需要创建上百个或上千个,手动创建就较为繁琐,这时就可 ...

  9. 利用 FluentScheduler 启动定时器计划任务

    FluentScheduler 是什么? Automated job scheduler with fluent interface. 这是作者在 Github 上的介绍,就是一个定时任务管理器.在 ...

  10. 解决nginx反向代理webservice的soap:address location问题

    原文:https://blog.csdn.net/mn960mn/article/details/50716768 一:首先来发布一个web service package com.ws.servic ...