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. 【转载】C#使用typeof运算符获取对象变量的具体类型Type

    在C#的实际类型操作过程中,有时候需要通过typeof方法获取对象的类型对应的Type变量即具体类型,例如在获取DataTable中某一列的具体数据类型的时候,我们就会用到typeof方法来获取具体的 ...

  2. new的原理及实现

    new的过程 // new运算的过程 /** * 1.创建一个空对象: * 2.该空对象的原型指向构造函数(链接原型):将构造函数的 prototype 赋值给对象的 __proto__属性: * 3 ...

  3. Kaldi语音识别快速入门

    一.简介 Kaldi是使用C++编写的语音识别工具包,Apache License v2.0许可.主要供语音识别研究人员使用.Kaldi的目标和范围与HTK类似.目标是拥有易于修改和扩展的现代而灵活的 ...

  4. k8s控制器资源（五）

    Pod pod在之前说过,pod是kubernetes集群中是最小的调度单元,pod中可以运行多个容器,而node又可以包含多个pod,关系如下图: 在对pod的用法进行说明之前,有必要先对docke ...

  5. Java JMS——消息服务

    转载请注明原文地址: https://www.cnblogs.com/ygj0930/p/10921569.html 一:什么是Java消息服务—— 消息通信接口规范 Java消息服务指的:两个应用程 ...

  6. Vim文本编辑器详细用法

    1 Vi.Vim文本编辑器 1．Vi.Vim Vi是Visual interface的简称. Vim是Vi的增强版,即Vi Improved.在后面的实例中将介绍Vim的使用. 为什么学vi? 1)所 ...

  7. Linux命令——lsmod

    参考:8 LSMOD, RMMOD, MODPROBE, AND MODINFO COMMAND EXAMPLES IN LINUX Linux lsmod command 简介 lsmod显示(或“ ...

  8. python参数传递

    1.形式参数:在定义函数时,函数名后面括号中的参数为“形式参数”,也称形参 2.实际参数:在调用一个函数时,函数名后面括号种的参数为“实际参数”,也就是将函数的调用者提供给函数的参数称为实际参数,也称 ...

  9. VSS 使用方法

    VSS 的全称为 Visual Source Safe .作为 Microsoft Visual Studio 的一名成员,它主要任务就是负责项目文件的管理,几乎可以适用任何软件项目.管理软件开发中各 ...

  10. Leecode之双指针及二分查找

    题目 给定一个已按照升序排列 的有序数组,找到两个数使得它们相加之和等于目标数. 函数应该返回这两个下标值 index1 和 index2,其中 index1 必须小于 index2. 说明: 返回的 ...