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. because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checkin

    1 前言 浏览器报错误(chrome和firefox都会):because its MIME type ('text/html') is not a supported stylesheet MIME ...

  2. Modern Cpp记录

    #include <iostream> # include <set> #include <chrono> #ifndef UNUSED #define UNUSE ...

  3. Tomcat服务器编码格式设置

    /** *1.找到.xml server文件 */ /** * 2. 设置encoding */

  4. Linux的web服务的介绍

    web(World Wide Web)即全球广域网,也称为万维网,它是一种基于超文本和HTTP的.全球性的.动态交互的.跨平台的分布式图形信息系统.是建立在Internet上的一种网络服务,为浏览者在 ...

  5. java 深copy

    public static<T> T deepClone(T src) throws IOException, ClassNotFoundException { Object obj = ...

  6. 用js怎么来判断我已点击了窗体中“关闭”按钮？

    onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发. 该事件可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面. 对话框默认的提示信息根据不同的浏览器有所不同,标准的信息类 ...

  7. bootm跳转到kernel的流程

    转自 https://blog.csdn.net/ooonebook/article/details/53495021 一.bootm说明 bootm这个命令用于启动一个操作系统映像.它会从映像文件的 ...

  8. NOIP 2015 推销员

    洛谷 P2672 推销员 洛谷传送门 JDOJ 2994: [NOIP2015]推销员 T4 JDOJ传送门 Description 阿明是一名推销员,他奉命到螺丝街推销他们公司的产品.螺丝街是一条死 ...

  9. python发邮件报错SMTP AUTH extension not supported by server."

    在login(username,password)之前添加 smtp.ehlo() smtp.starttls() d ={'smtp_server': '','smtp_email': '','sm ...

  10. priority_queue（优先队列）使用方法

    priority_queue默认是一个大根堆: 并且出队方式与普通队列queue的front不一样,是top . 如果想用小根堆,可以修改定义时的参数: priority_queue<int,v ...