day02-JavaScript-Vue

ゝ一世哀愁。 2023-10-12 12:34 7阅读 0赞

## 1 JavaScript ##

html完成了架子，css做了美化，但是网页是死的，我们需要给他注入灵魂，所以接下来我们需要学习JavaScript，这门语言会让我们的页面能够和用户进行交互。

##### 1.5.1.3 JSON对象 #####

###### 自定义对象 ######

在 JavaScript 中自定义对象特别简单，其语法格式如下：

var 对象名 = {
        
        属性名1: 属性值1, 
        属性名2: 属性值2,
        属性名3: 属性值3,
        函数名称: function(形参列表){
        }
    };

我们可以通过如下语法调用属性：

对象名.属性名

通过如下语法调用函数：

对象名.函数名()

接下来，我们再VS Code中创建名为04. JS-对象-JSON.html的文件演示自定义对象

浏览器控制台结果如下：

![在这里插入图片描述][6e07b250728a4b1bbb54529f7f03fdd0.png_pic_center]

其中上述函数定义的语法可以简化成如下格式：

var user = {
        
            name: "Tom",
            age: 10,
            gender: "male",
            // eat: function(){
        
            //      console.log("用膳~");
            //  }
            eat(){
        
                console.log("用膳~");
            }
        }

###### json对象 ######

JSON对象：**J**ava**S**cript **O**bject **N**otation，JavaScript对象标记法。是通过JavaScript标记法书写的文本。其格式如下：

{
        
        "key":value,
        "key":value,
        "key":value
    }

其中，**key必须使用引号并且是双引号标记，value可以是任意数据类型。**

例如我们可以直接百度搜索“json在线解析”，随便挑一个进入，然后编写内容如下：

{
        
    	"name": "李传播"
    }

![在这里插入图片描述][0bffd32a2b084203947074713d1ed164.png_pic_center]

但是当我们将双引号切换成单引号，再次校验，则报错，如下图所示：

![在这里插入图片描述][01da6d333bd849fc90620c70e8addbfc.png_pic_center]

那么json这种数据格式的文本到底应用在企业开发的什么地方呢？-- 经常用来作为前后台交互的数据载体

如下图所示：前后台交互时，我们需要传输数据，但是java中的对象我们该怎么去描述呢？我们可以使用如图所示的xml格式，可以清晰的描述java中需要传递给前端的java对象。

![在这里插入图片描述][64af85a302e848b08b163583e10c2ea3.png_pic_center]

但是xml格式存在如下问题：

*  标签需要编写双份，占用带宽，浪费资源
 *  解析繁琐

所以我们可以使用json来替代，如下图所示：

![在这里插入图片描述][54b031fa68e5422081f14368c7b8e7dc.png_pic_center]

接下来我们通过代码来演示json对象：注释掉之前的代码，编写代码如下：

var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
    alert(jsonstr.name);

浏览器输出结果如下：

![在这里插入图片描述][7787de24ac0a44c5bb78eb912d837d20.png_pic_center]

为什么呢？\*\*因为上述是一个json字符串，不是json对象，所以我们需要借助如下函数来进行json字符串和json对象的转换。\*\*添加代码如下：

var obj = JSON.parse(jsonstr);
    alert(obj.name);

此时浏览器输出结果如下：  
![在这里插入图片描述][fd47922959e24a8d9edd22a8237d816c.png_pic_center]

当然了，我们也可以通过如下函数将json对象再次转换成json字符串。添加如下代码：

alert(JSON.stringify(obj));

浏览器输出结果如图所示：

![在这里插入图片描述][c18926a93c154d858a8743f1f93f84fc.png_pic_center]

整体全部代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>JS-对象-JSON</title>
    </head>
    <body>
        
    </body>
    <script>
        //自定义对象
        // var user = {
          
        //     name: "Tom",
        //     age: 10,
        //     gender: "male",
        //     // eat: function(){
          
        //     //      console.log("用膳~");
        //     //  }
        //     eat(){
          
        //         console.log("用膳~");
        //     }
        // }
    
        // console.log(user.name);
        // user.eat();
    
    
        // //定义json
        var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
        //alert(jsonstr.name);
    
        // //json字符串--js对象
        var obj = JSON.parse(jsonstr);
        //alert(obj.name);
    
        // //js对象--json字符串
        alert(JSON.stringify(obj));
    
    
    </script>
    </html>

遍历数组或集合

$.each(data,function(key,value)\{\})，主要用于遍历数组或json对象等

var json = {
        "name":'张飞',"age":13};
    $.each(json,function(key,val){
        
        console.log(key,val);
    })

jquery解析json对象数组

使用vue的v-for指令解析json对象数组格式：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>案例</title>
        <script src="js/vue.js"></script>
    </head>
    <body>
        
        <div id="app">
            <table border="1" align="center" width="50%">
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>成绩</th>
                    <th>等级</th>
                </tr>
                
                <tr v-for="(user,index) in users">
                    <td>{
        {
        index+1}}</td>
                    <td>{
        {
        user.name}}</td>
                    <td>{
        {
        user.age}}</td>
                    <td>
                        <span v-show="user.gendar==1">男</span>
                        <span v-show="user.gendar==2">女</span>
                    </td>
                    <td>{
        {
        user.score}}</td>
                    <td>
                        <span v-if="user.score>=0 && user.score<60">不及格</span>
                        <span v-else-if="user.score>=60 && user.score<80">良好</span>
                        <span v-else-if="user.score>=80 && user.score<=100">优秀</span>
                        <span v-else>不合规</span>
                    </td>
                </tr>
            </table>
        </div>
        
        <script>
            new Vue({
        
                el:'#app',      //绑定
                data:{
        
                   users:[{
        "name":"张三","age":22,"gendar":1,"score":55},
                            {
        "name":"李四","age":36,"gendar":2,"score":69},
                            {
        "name":"王武","age":52,"gendar":1,"score":-89}
                        ] 
                }
            });
        </script>
    </body>
    </html>

**618**，清华社 IT BOOK 多得图书活动开始啦！活动时间为 2023 年 6 月 7 日至 6 月 18 日，清华  
社为您精选多款高分好书，涵盖了 **C++、Java、Python、前端、后端、数据库、算法与机器学习**等多  
个 IT 开发领域，适合不同层次的读者。全场 5 折，扫码领券更有优惠哦！快来京东点击链接 IT BOOK  
多得（或扫描京东二维码）查看详情吧！  
![在这里插入图片描述][275e4c3439fe4a6e979b1478539c78a5.jpeg_pic_center]

[6e07b250728a4b1bbb54529f7f03fdd0.png_pic_center]: https://img-blog.csdnimg.cn/6e07b250728a4b1bbb54529f7f03fdd0.png#pic_center
[0bffd32a2b084203947074713d1ed164.png_pic_center]: https://img-blog.csdnimg.cn/0bffd32a2b084203947074713d1ed164.png#pic_center
[01da6d333bd849fc90620c70e8addbfc.png_pic_center]: https://img-blog.csdnimg.cn/01da6d333bd849fc90620c70e8addbfc.png#pic_center
[64af85a302e848b08b163583e10c2ea3.png_pic_center]: https://img-blog.csdnimg.cn/64af85a302e848b08b163583e10c2ea3.png#pic_center
[54b031fa68e5422081f14368c7b8e7dc.png_pic_center]: https://img-blog.csdnimg.cn/54b031fa68e5422081f14368c7b8e7dc.png#pic_center
[7787de24ac0a44c5bb78eb912d837d20.png_pic_center]: https://img-blog.csdnimg.cn/7787de24ac0a44c5bb78eb912d837d20.png#pic_center
[fd47922959e24a8d9edd22a8237d816c.png_pic_center]: https://img-blog.csdnimg.cn/fd47922959e24a8d9edd22a8237d816c.png#pic_center
[c18926a93c154d858a8743f1f93f84fc.png_pic_center]: https://img-blog.csdnimg.cn/c18926a93c154d858a8743f1f93f84fc.png#pic_center
[275e4c3439fe4a6e979b1478539c78a5.jpeg_pic_center]: https://img-blog.csdnimg.cn/275e4c3439fe4a6e979b1478539c78a5.jpeg#pic_center