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数据的原理和具 ...
随机推荐
- 字节输出流FileOutputStream
#字节流 字节输出流FileOutputStream 创建输出流对象 OutputStream 流对象是一个抽象类,不能实例化.所以,我们要找一个具体的子类 :FileOutputStream. 查看 ...
- C++中的Mat, const Mat, Mat &,Mat &, const Mat &的区别
Mat, copy传递,不会改变外部变量的Mat. Mat &, reference传递,函数内部修改将会改变外部. const Mat, copy传递,在函数内,不会被修改,也不会影响到外部 ...
- 【selenium】基于python语言，如何用select选择下拉框
在项目测试中遇到了下拉框选择的控件,来总结下如何使用select选择下拉框: 下图是Select类的初始化描述,意思是,给定元素是得是select类型,不是就抛异常.接下来给了例子:要操作这个sele ...
- 安装MySQL-8.0.13
安装1.去官网下载对应的MySQL版本http://downloads.mysql.com/archives/community/ 2.将下载下来的MySQL解压到你想要安装的目录下安装MySQL8. ...
- Vue-Cli 3.x 创建的项目中对 import 引入的 CSS 样式启用 autoprefixer
问题描述: Vue-Cli 3.x 默认开启了 autoprefixer,但对于在 main.js 中通过 import 引入的 CSS 并没有自动添加前缀 分析原因: autoprefixer 在项 ...
- Vmware samba 搭建——Win10 共享
配置环境 Win10 Vmware 15 ubuntu 16.04 Vmware 设置 安装 sudo apt-get install samba # 安装samba sudo apt-get ins ...
- Linux shell if条件判断1
shell 逻辑控制语句: 分支判断结构 if case 循环结构 for while unt ...
- MySQL字符集、information_schema元数据（八）
一.SQL字符集 它是一个系统支持的所有抽象字符的集合.字符是各种文字和符号的总称,包括各国家的文字.标点符号.图形符号.数字等 常用的字符集有:utf8.utf8mb4.utf8mb3(8.0),现 ...
- 让Linux中的Nginx支持中文文件名
原文:https://blog.csdn.net/soeben/article/details/79525964 首先你的服务器需要安装了UTF-8字符集在命令行里输入env|grep LANG如果显 ...
- [TJOI2015]弦论（后缀自动机）
传送门 题意: 对给定字符串\(s\),求其第\(k\)小子串,重复串被计入以及不被计入这两种情况都需考虑. 思路: 首先构建后缀自动机,之后就考虑在后缀自动机上\(dp\). 我们知道如果要考虑重复 ...