JSON和Vue的学习和入门

JSON

概念：JavaScript Object Notation。JavaScript 对象表示法，简单理解JSON是把JS对象变成字符串
由于其语法简单，层次结构鲜明，现多用于网络中数据传输

好处: JSON 比 XML体积更小，更快，更易解析

1.json的格式

<script>
//``反引号在es6中字符串拼接时使用，支持插值运算${},注意这不是jsp中的el,与jsp有冲突
`{"username":"zhangsan","age":"18"}`
</script>

js对象的格式：

<script>
{
	username:"lisi",
	age:"18"
}
</script>

手动将js对象转换为json字符串：
1.将js对象大括号外面加上反引号
2.将对象的键加上引号
3.将所有数据放到一行

2.json在html中与js对象的相互转换

JSON.stringify() 将js对象转为json字符串

JSON.parse() 将json字符串转为js对象

<script>
/*
    调用JSON的stringify将js对象转为json
    调用JSON的parse将json转为字符串*/
    let personJson2 = JSON.stringify(person);
    document.write(`自动转换${personJson2}` "<br/>")

    let parse = JSON.parse(personJson);
    document.write(parse.name parse.age "<br/>")
    </script>

3.json在java对象的相互转换

先引入阿里巴巴的fastJson

使用JSON.toJSONString(obj) 将java对象转为json字符串

使用JSON.parseObject(json字符，要转成的实体类.class) 将json字符串转为java对象

public static void main(String[] args) {
        User user = new User("1","zhangsan","18");
        //将java对象转为json
        String jsonString = JSON.toJSONString(user);
        System.out.println(jsonString);

        //将json转为java对象
        //java中不能用''表示json,因为''代表字符，所以用"",但是必须将{}中的"转义
        String jsonStr="{\"age\":\"18\",\"id\":\"1\",\"name\":\"zhangsan\"}";
        User t = JSON.parseObject(jsonStr, User.class);
        System.out.println(t);
    }

注意事项：
1.Axios中，JSON字符串和JS对象自动进行转换

2.因为将数据转为json字符串后，请求数据等参数都放在了一行，且不再是原来的usernam=“cat”&password=123类似这种了，所以在servlet中获取请求参数时，不能再继续使用request.getpameter，需要使用到原始post请求获取参数的方法(因为post的请求参数在请求体的最后一行),使用getReader.readLine()

Vue

Vue是前端的一种框架，我们先看一个不使用Vue的原始方式来引入

<input type="button" value="获取所有品牌" onclick="ajaxGetAllBrand()"><br>

<script>
    function ajaxGetAllBrand() {
        // 使用AJAX去服务器获取数据, 并把数据填充到表格中
        axios.get("/selectAllServlet").then(res=>{
            //在axios中自动将json转为js对象
            let data = res.data;
            let str="";
            for (let datum of data) {
                str =`<tr align="center">
                    <td>${datum.id}</td>
                    <td>${datum.brandName}</td>
                    <td>${datum.companyName}</td>
                    <td>${datum.ordered}</td>
                    <td>${datum.description}</td>
                    <td>${datum.status}</td>
                    <td><a href="https://blog.csdn.net/weixin_47543906/article/details/128258113">修改</a> <a href="https://blog.csdn.net/weixin_47543906/article/details/128258113">删除</a></td>
                </tr>`
            }
            //innerHTML可以显示标签，innerText只显示字符
            document.getElementById("tableBody").innerHTML=str;
        })
    }
</script>

这种原始的方式不便于我们的理解，而且代码比较繁多，编写和修改困难。

Vue的快速入门

1.先导入vue.js文件
2.创建Vue对象
3.编写视图

插值表达式：{{变量名}} 获取数据

<script src="js/vue.js"></script>
<script>
new Vue({
	el:#div,
	data(){
		name:"cat"
	}
});
</script>

解读一下这段代码的含义：
new Vue({}):创建一个Vue对象
#div表示id选择器，el表示视图的绑定区域，区域中的表达式等都受到vue的控制，意思就是将数据绑定到id为div的位置
data就是存放数据的区域
methods 选项：用于定义方法。方法可以直接通过对象名调用，也可以在方法内部通过this来调用。

vue常用指令
条件渲染：
v-if 条件成立时显示，不成立则被删除
v-else-if
v-else
v-show 为true时显示，不为true是隐藏(display:none)，但没有被删除

列表渲染：
v-for 进行遍历，在遍历数组时，可以进行有索引的遍历

文本插值：
v-text 会将数据全部视为字符串，不识别html标签,类似于innerText
v-html 可以识别html的标签,类似于innerHtml

事件绑定：
v-on 缩写为@，单击：v-on:click 双击：v-on:dblclick

绑定属性：
v-bind 属性的意思就是href,class等

表单绑定
v-model 双向的绑定

Vue的生命周期
共八个
创建之前 无视图v,无模型对象m
创建 有m无v
挂载前 有m有v,没有绑定数据
挂载 有m有v,绑定了数据
更新前 视图显示旧数据
更新后 视图显示新数据
删除前 m和v都在，没有被销毁
删除后 m和v都被销毁

最后

如果你对本文有疑问，你可以在文章下方对我留言，敬请指正，对于每个留言我都会认真查看。

这篇好文章是转载于：学新通技术网