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. python \r与\b的应用、光标的含义

    参考链接:https://www.jianshu.com/p/eb5c23cd6e34 \r 能将光标定位到当前行的行首 \b则是将光标回退一位 光标的含义: 光标后面的输出内容均会消失,光标回退后, ...

  2. vue中如果在页面中v-model的是字典，那么在定义字典的时候，需要明确定义键值为''或者[],否则给字典的键值赋值后页面不显示

    如题 在template模板中 {{}} {{form_temp.blOwnerMemberList}} #是字典的形式哦 {{}} 在return的属性中 form_temp: { blOwnerM ...

  3. Golang中,Aes加解密

    今天在用Golang解析php那边用Aes加密的一个key.网上大多是用base64将结果编码一下.而且用到了向量.我php 那边没有用到向量.所以golang这边也是要去掉的.参考网站的改了下.能够 ...

  4. 【转载】Gradle学习 第八章：依赖管理基础

    转载地址:http://ask.android-studio.org/?/article/10 This chapter introduces some of the basics of depend ...

  5. mysql主从复制几个重要的参数

    1. relay_log_recovery = 1 当slave从库宕机后,假如relay-log损坏了,导致一部分中继日志没有处理,则自动放弃所有未执行的relay-log,并且重新从master上 ...

  6. Mycat高可用解决方案一（mysql安装）

    Mycat高可用解决方案一(mysql安装) Mycat关键特性 关键特性 支持SQL92标准 支持MySQL.Oracle.DB2.SQL Server.PostgreSQL等DB的常见SQL语法 ...

  7. Mysql高性能优化规范

    数据库命令规范 所有数据库对象名称必须使用小写字母并用下划线分割 所有数据库对象名称禁止使用mysql保留关键字(如果表名中包含关键字查询时,需要将其用单引号括起来) 数据库对象的命名要能做到见名识意 ...

  8. Python3+HTMLTestRunner+SMTP生成测试报告后发送邮件

    在前一篇https://www.cnblogs.com/zhengyihan1216/p/11549820.html 中记录了如何生成html格式的报告, 这篇记录下怎么将测试报告通过邮件发出 1.对 ...

  9. nc用法

    NC 在客户端 和 服务器执行------------------------------------------------------------------------------------- ...

  10. pansas 绘制定制的箱线图

    1  普通风格 代码 import numpy as np import pandas as pd import matplotlib.pyplot as plt plt.rcParams['font ...