Vue ----------- 了解， 展示json 数据
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 数据的更多相关文章
- vue中引入json数据，不用本地请求
1.我的项目结构,需要在Daily.vue中引入daily.js中的json数据 2.把json数据放入一个js文件中,用exports导出,vscode的json格式太严格了,很多数据,调了一个多小 ...
- python中展示json数据不换行(手动换行)
https://blog.csdn.net/chichu261/article/details/82784904 Settings ->keymap -> 在搜索框输入 wraps -&g ...
- vue格式化显示json数据
已经是json格式数据的,直接用标签 <pre></pre>展示. 参考:https://www.jianshu.com/p/d98f58267e40
- vue请求本地json数据
1.下载vue-resource插件 cnpm install vue-resource 1.2全局引入vue-resource: 在main.js import VueResource from ' ...
- vue渲染自定义json数据
<template> <div class="wrap"> <div class="main"> <div class ...
- Vue之循环遍历Json数据，填充Table表格
简单记一次Vue循环遍历Json数据,然后填充到Table表格中,展示到前端的代码: async getData(id) { const res = await this.$store.api.new ...
- Vue---记一次通过{{}}获取json数据-页面渲染不出来的坑
前两天干活儿的时候碰到一个Vue的问题,让我这个菜鸡完全摸不到头脑,需求如下:前端页面点击表格中的某一行的详情按钮,会弹出一个Dialog,然后Dialog中有选项卡,选项卡中再有具体的table来展 ...
- 深入了解Struts2返回JSON数据的原理
首先来看一下JSON官方对于"JSON"的解释: JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析 ...
- （转）Struts2返回JSON数据的具体应用范例
转载自 yshjava的个人博客主页 <Struts2返回JSON数据的具体应用范例> 早在我刚学Struts2之初的时候,就想写一篇文章来阐述Struts2如何返回JSON数据的原理和具 ...
随机推荐
- 前端通过js获取微信公众号用户的唯一标识符openId
微信公众号程序开发的时候,获取用户信息的时候,需要用到用户的openId,openId是微信用户的唯一标识符,这个操作可以后台实现也可以前端实现,之前项目里是通过后台来获取的,好像用到了一些三方的包, ...
- PHP实现sha1加密AES算法加密解密数据
一.加密代码如下: /** * * @param string $string 需要加密的字符串 * @param string $key 密钥 * @return string */ public ...
- 26.Apache Solr RCE
多事之秋,刚爆出来shiro的RCE,紧接着solr服务器就出了RCE 自从漏洞爆出来已经一段时间,复现漏洞多如牛毛,我这里来水一篇 漏洞简介 什么是solr服务器? Solr是一个独立的企业级搜索应 ...
- nginx之旅(第三篇)：代理、正向代理、反向代理、代理的原理、nginx反向代理场景、nginx反向代理配置、nginx反向代理语法
一.代理服务与反向代理 什么是代理服务 代理-代理办理(代理理财.代理收货.代理购物等等). 一般情况下,如果没有特别说明,代理技术默认说的是正向代理技术.关于正向代理的概念如下: 正向代理(forw ...
- hOW TO READING
人脑是易忘的,新知识要不断复习,一本600页的书,总结出来要记住的知识可能只有30页.一段2小时的技术视频,总结到纸上可能只有10分钟的阅读量.那么如何复习这600页的书和2小时的视频呢? 答案就是总 ...
- Linux Tomcat安装及端口配置
1. JDK安装配置 待写 2. Tomcat安装配置 1,下载Tomcat链接,到启动测试. 将文件apache-tomcat-8.5.50.tar.gz移动到/usr/tomcat/下,并解压 ...
- mysql系列2 权限相关
mysql授权认证 请注意(大坑):mysql8.0以前的版本可以使用grant在授权的时候隐式的创建用户,8.0以后已经不支持,所以必须先创建用户,然后再授权!! 例子: 在170mysql主机上授 ...
- Nginx 核心配置-自定义错误页面
Nginx 核心配置-自定义错误页面 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 生产环境中错误页面一般都是UI或开发工程师提供的,他们已经在软件中定义好了,我们这里就简单写个h ...
- Python实现十大经典排序算法（史上最简单）。
十大排序算法(Python实现)一. 算法介绍及相关概念解读 算法分类十种常见排序算法可以分为两大类: 非线性时间比较类排序:通过比较来决定元素间的相对次序,由于其时间复杂度不能突破O(nlogn), ...
- detectron2安装出现Kernel not compiled with GPU support 报错信息
在安装使用detectron2的时候碰到Kernel not compiled with GPU support 问题,前后拖了好久都没解决,现总结一下以备以后查阅. 不想看心路历程的可以直接跳到最后 ...