vue.js使用例子
生活随笔
收集整理的這篇文章主要介紹了
vue.js使用例子
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1.加載的html頁面,訪問該頁面會訪問后臺數據，進行該數據的回顯
<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Vue 測試實例 - 菜鳥教程(runoob.com)</title><script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> </head> <body> <div id="app"><form id="Forms"><input type="hidden" name="id" :value="id">用戶名：<input type="text" name="name" :value="name"><br>年齡：<input type="text" name="age" :value="age"><br>喜愛的網站：<select v-model="fruit" name="fruit"><option value="">選擇一個網站</option><option value="1">Runoob</option><option value="2">Google</option></select><br>性別：男<input type="radio" name="gender" value="男" v-model="gender">女<input type="radio" name="gender" value="女" v-model="gender"><br>讀書<input type="checkbox" name="hobbies" value="讀書" v-model="hobbies">音樂<input type="checkbox" name="hobbies" value="音樂" v-model="hobbies">旅行<input type="checkbox" name="hobbies" value="旅行" v-model="hobbies"><br><button οnclick="submitForm()">提交</button></form> </div><script>var data={id:null,name:null,age:null,fruit:"",gender:"男",hobbies:[]}new Vue({el: '#app',data: data}) </script><script>//回顯該數據，測試設置0,應該根據id查詢該信息queryData(0);function queryData(id) {$.post("/api/test/getUserDataMap.do",function (res) {data.id=res.id;data.name=res.name;data.age=res.age;data.fruit=res.fruit;data.gender=res.gender;//checkbox需要注意了，后臺已經給了hobbies初始值了,賦值的是一個數組for(var i=0;i<res.hobbies.length;i++){data.hobbies[i]=res.hobbies[i];}},"json")}//提交表單function submitForm() {var param =$("#Forms").serialize();$.post("/api/test/edit.do",param,function (res) {alert(res.states);},"json")} </script> </body> </html>
package com.apes.oves.front.controller;import com.apes.core.util.ResponseUtil; import com.apes.oves.core.bean.Brake; import org.apache.commons.collections.map.HashedMap; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.servlet.ModelAndView;import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.util.Map;/****/ @RequestMapping("/test") @Controller public class TestController {@RequestMapping("/getUserDataMap.do")@ResponseBodypublic Map getUserDataMap(HttpServletRequest request, HttpServletResponse response)throws Exception{System.out.println("name=="+request.getParameter("name"));System.out.println("age=="+request.getParameter("age"));System.out.println("fruit=="+request.getParameter("fruit"));System.out.println("gender=="+request.getParameter("gender"));//后臺接受checkbox注意，checkbox為多值的，沒有選擇，獲取的為nullString [] hobbies=request.getParameterValues("hobbies");if(hobbies!=null&&hobbies.length>0){for(String s: hobbies){System.out.println("興趣愛好："+s);}}Map<String,Object> map = new HashedMap();map.put("id","123456789");map.put("name","張三");map.put("age","25");map.put("fruit","2");map.put("gender","女");//處理checkbox問題map.put("hobbies",new String[]{"旅行","音樂"});return map;}@RequestMapping("/edit.do")@ResponseBodypublic Map edit(HttpServletRequest request, HttpServletResponse response)throws Exception{System.out.println("name=="+request.getParameter("name"));System.out.println("age=="+request.getParameter("age"));System.out.println("fruit=="+request.getParameter("fruit"));System.out.println("gender=="+request.getParameter("gender"));//后臺接受checkbox注意，checkbox為多值的，沒有選擇，獲取的為nullString [] hobbies=request.getParameterValues("hobbies");if(hobbies!=null&&hobbies.length>0){for(String s: hobbies){System.out.println("興趣愛好："+s);}}Map<String,Object> map = new HashedMap();map.put("states","更新成功");return map;}}
總結
以上是生活随笔為你收集整理的vue.js使用例子的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： String中intern的方法
- 下一篇： 字符串里解析vue表达式