书城8 - Vue&Axios
1. Vue
- {{}} - 相当于innerText
- v-bind:attr 绑定属性值。例如,v-bind:value - 绑定value值
简写: :value - v-model 双向绑定
v-model:value , 简写 v-model - v-if , v-else , v-show
v-if和v-else之间不能有其他的节点
v-show是通过样式表display来控制节点是否显示 - v-for 迭代
v-for= - v-on 绑定事件
- 其他:
- trim: 去除首尾空格 , split() , join()
- watch 表示侦听属性
- 生命周期:对象创建前/后、数据装载前/后、数据更新前/后、对象销毁前/后
2. Axios
Axios是Ajax的一个框架,简化Ajax操作
Axios执行Ajax操作的步骤:
1. 添加并引入axios的js文件
2-1. 客户端向服务器端异步发送普通参数值
-
基本格式: axios().then().catch()
-
示例:
-
axios({ method:"POST", url:"....", params:{ uname:"lina", pwd:"ok" } }) .then(function(value){}) //成功响应时执行的回调 value.data可以获取到服务器响应内容 .catch(function(reason){}); //有异常时执行的回调 reason.response.data可以获取到响应的内容 //reason.message / reason.stack 可以查看错误的信息
2-2. 客户端向服务器发送JSON格式的数据
-
什么是JSON
JSON是一种数据格式
XML也是一种数据格式
XML格式表示两个学员信息的代码如下:<students> <student sid="s001"> <sname>jim</sname> <age>18</age> </student> <student sid="s002"> <sname>tom</sname> <age>19</age> </student> </students>
JSON格式表示两个学员信息的代码如下:
[{sid:"s001",name:"jim"age:18},{sid:"s002",name:"tom",age:19}]
-
JSON表达数据更简洁,更能够节约网络带宽
-
客户端发送JSON格式的数据给服务器端
-
客户端中params需要修改成: data:
-
服务器获取参数值不再是 request.getParameter()...
而是:StringBuffer stringBuffer = new StringBuffer(""); BufferedReader bufferedReader = request.getReader(); String str = null ; while((str=bufferedReader.readLine())!=null){ stringBuffer.append(str); } str = stringBuffer.toString() ;
-
我们会发现 str的内容如下:
- 服务器端给客户端响应JSON格式的字符串,然后客户端需要将字符串转化成js Object
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析