如何使用vue.js 实现前台html页面和后台的数据绑定

前台html页面:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div class="containter"><p>{{name}}</p>
</div>
</body>
<script type="text/javascript">$(document).ready(function() {$.getJSON('IndexController.do',{"name":"wdg"},function(result){new Vue({el:'.containter',data:{name:result.name }});});});</script>
</html>

对应的后台:

package com.wdg.controller;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import com.alibaba.fastjson.JSONObject;@Controller
public class LoginController
{@RequestMapping("/IndexController")public @ResponseBody String pageload(String name){System.out.println(name);JSONObject jsonRtn=new JSONObject();jsonRtn.put("name", "wdg");return jsonRtn.toString(); }
}

难点在于:我们是先调用$.getJSON（），在回调的函数里面实现页面的渲染

希望对你有所帮助，

如何使用vue.js 实现前台html页面和后台的数据绑定相关推荐

Asp.net+Vue2构建简单记账WebApp之六（vue.js构建记账统计页面）
Asp.net+Vue2构建简单记账WebApp之一(设计) Asp.net+Vue2构建简单记账WebApp之二(使用ABP迅速搭建.Net后台) Asp.net+Vue2构建简单记账WebApp之 ...
Vue js 实现点击页面空白处隐藏指定div
Vue js 实现点击页面空白处隐藏指定div <template><div class="page" @ ...
用vue.js重构订单计算页面
在很久很久以前做过一个很糟糕的订单结算页面,虽然里面各区域(收货地址)使用模块化加载,但是偶尔会遇到某个模块加载失败的问题导致订单提交的数据有误. 大致问题如下: 1. 每个模块都采用usercont ...
使用ASP.NE+VUE开发一款简单记账WebAPP之七（vue.js构建记账统计页面）
转载地址https://blog.csdn.net/yiershan1314/article/details/77970713 一.添加两个新页面 /components/ MonthCount.vu ...
[Vue.js] 路由 -- 基于vue-router的案例--后台管理
基于vue-router的案例感觉好多,啊啊啊!!! 实现效果实现步骤抽离并渲染App根组件将左侧菜单改造为路由链接创建左侧菜单对应的路由组件在右侧主体区域添加路由占位符添加子路由规则 ...
前台jsp页面向后台传汉字出现乱码问题解决办法
如下: jsp页面代码: var groupsName="全体技能组"; window.location.href = encodeURI("<%=path%> ...
JS之前台参数提交到后台，双引号转义为解决办法
问题描述 var param = $("#searchForm").serializeJson(); 前台封装好了键值对形式的字符串,使用了EasyUI的treeGrid控件,传到 ...
vue低级错误（浏览器页面，后台页面全部正常）
所有数据都正常,前后台都没有错误但是,就是显示页面怎么改都不会正确样式怎么改都不会变就是页面反常登陆注册怎么都不会消失用户信息也不正确所有的一切都没有错,但是就是这样不正常最后.最后.最 ...
JS之前台参数提交到后台，双引号转义为quot;解决办法
问题描述 var param = $("#searchForm").serializeJson(); 前台封装好了键值对形式的字符串,使用了EasyUI的treeGrid控件,传到 ...

如何使用vue.js 实现前台html页面和后台的数据绑定

如何使用vue.js 实现前台html页面和后台的数据绑定相关推荐

最新文章

热门文章