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. JavaScript中数组相关的属性方法

    下面的这些方法会改变调用它们的对象自身的值: Array.prototype.copyWithin() 在数组内部,将一段元素序列拷贝到另一段元素序列上,覆盖原有的值. Array.prototype ...

  2. ETL中获取公共时间参数变量释义

  3. bat 获取管理员权限，判断系统位数，获取当前文件所在目录，regsvr32注册DLL、OCX

    1.获取管理员权限 @echo off if exist "%SystemRoot%\SysWOW64" path %path%;%windir%\SysNative;%Syste ...

  4. ASP.NET----内置对象----Response

    Response对象是HttpResponse类的实例,它代表Web服务器对客户端请求的响应,包含如下功能: ①重定向:  ②设置页面输出内容 (可以向客户端浏览器发送信息,或者将访问转移到另一个网址 ...

  5. k8s dashboard 解决secret自建证书导致浏览器访问限制

    解决参考: https://www.jianshu.com/p/c6d560d12d50   熟悉dashboard yaml文件所创建的资源 wget https://raw.githubuserc ...

  6. DML（数据库操作语言）（六）

    一.INSERT插入语句 语法: INTERT INTO 表名(列名1,列名2, ...) VALUES(列值1, 列值2, ...);# 在表名后给出要插入的列名,其他没有指定的列等同与插入null ...

  7. Skeleton-Based Action Recognition with Directed Graph Neural Network

    Skeleton-Based Action Recognition with Directed Graph Neural Network 摘要 因为骨架信息可以鲁棒地适应动态环境和复杂的背景,所以经常 ...

  8. Python实现斐波那契数列，九九乘法表，金字塔方法。

    斐波那契数列普通函数实现 #普通函数 def fb(max): a,b=0,1 while a<max: print(a) a,b=b,a+b fb(100) 递归实现方法1 def fb1(m ...

  9. svg形状相关的学习(二)

    _ 阅读目录 一:线段 二:笔画特性 1. stroke-width 2. stroke-opacity 3. stroke-dasharray 属性 三:常见的形状 1. 矩形 2. 圆角矩形 3. ...

  10. 排序算法-插入排序（Java）

    package com.rao.linkList; import java.util.Arrays; /** * @author Srao * @className InsertSort * @dat ...