day02-JavaScript-Vue

这篇具有很好参考价值的文章主要介绍了day02-JavaScript-Vue。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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的文件演示自定义对象

<script>
    //自定义对象
    var user = {
        name: "Tom",
        age: 10,
        gender: "male",
        eat: function(){
             console.log("用膳~");
         }
    }

    console.log(user.name);
    user.eat();
<script>

浏览器控制台结果如下:

day02-JavaScript-Vue

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

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

JSON对象:JavaScript Object Notation,JavaScript对象标记法。是通过JavaScript标记法书写的文本。其格式如下:

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

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

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

{
	"name": "李传播"
}

day02-JavaScript-Vue

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

day02-JavaScript-Vue

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

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

day02-JavaScript-Vue

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

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

所以我们可以使用json来替代,如下图所示:

day02-JavaScript-Vue

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

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

浏览器输出结果如下:

day02-JavaScript-Vue

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

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

此时浏览器输出结果如下:
day02-JavaScript-Vue

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

alert(JSON.stringify(obj));

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

day02-JavaScript-Vue

整体全部代码如下:

<!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对象数组

<script>
        //json对象数组,拿过来;
        //数据库拿过来的是一个json数组字符串;
        // let users=[{"id":1,"name":"tom","age":22,"gendar":"男"},
        //             {"id":2,"name":"jack","age":33,"gendar":"女"},
        //             {"id":3,"name":"peter","age":1,"gendar":"男"}
        //         ];
                
        // let result=JSON.stringify(users);
        // console.log(result);
        // //typeof
        // console.log(typeof(result));
        
        //result:从数据库传递过来的一个json字符串
        let result='[{"id":1,"name":"tom","age":22,"gendar":"男"},{"id":2,"name":"jack","age":33,"gendar":"女"},{"id":3,"name":"peter","age":1,"gendar":"男"}]';
        //需要先转换一下
        let users2=JSON.parse(result);
            
        //解析一下;
        //key:还是之前的下标;0  1  2;
        //value:是一个json对象;[object Object]
        //      需要时json对象的值;
        $.each(users2,function(key,user){
            //    对象.属性;
            console.log(key+","+user.id+","+user.name);
        })
    </script>

使用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>
    <!-- 2.html5元素; v-for指令遍历; -->
    <div id="app">
        <table border="1" align="center" width="50%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <!-- 在写v-for的时候,一定是这个数据,可以重复执行;
                参数1:单个数据元素;
                参数2:索引
                json对象:[object Object]
                    对象.属性s
            -->
            <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>
    <!-- 3.js -->
    <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
多得(或扫描京东二维码)查看详情吧!
文章来源地址https://www.toymoban.com/news/detail-476165.html

到了这里,关于day02-JavaScript-Vue的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue2+Vue3笔记(尚硅谷张天禹老师)day02

    声明:只是记录,初心是为了让页面更好看,会有错误,我并不是一个会记录的人,所以有点杂乱无章的感觉,我先花点时间把视频迅速过掉,再来整理这些杂乱无章的内容 按照视频来的话,这里应该有一些概念的东西,但我不管这些东西,我这里只做一个浅显得记录 组件:实现

    2024年02月10日
    浏览(44)
  • 前端Vue入门-day02-vue指令、computed计算属性与watch侦听器

    (创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹) 目录 指令补充 指令修饰符 v-bind 对于样式控制的增强  操作class 案例:京东秒杀 tab 导航高亮 操作style  v-model 应用于其他表单元素  computed 计算属性 基础语法 computed 计算属

    2024年02月11日
    浏览(42)
  • JavaScript复习——02

    写法: 使用代码块,可以对代码进行分组,同一个代码块中的代码就是同一组代码,一个代码块中的代码,要么都执行,要么都不执行 在JS中,let声明的变量具有块级作用域 var声明的变量,不具有块级作用域 var声明的变量会将变量的声明提至最前 原始值只能表示一些简单的

    2024年02月08日
    浏览(37)
  • Day-01-02

    项目框架搭建 1. 创建父工程 父工程:xuecheng-plus-parent 父工程中没有代码,不用去依赖其它的包,它的作用是限定其它子工程依赖包的版本号,在dependencyManagement 中去编辑即可。 在父工程中只需保留pom.xml文件以及自动生成的.gitignore文件。 2. 创建基础工程 基础工程:xuecheng

    2024年02月20日
    浏览(28)
  • 黑马头条-day02

    🌕博客x主页:己不由心王道长🌕! 🌎文章说明:黑马头条开发🌎 ✅系列专栏:微服务项目 🌴本篇内容:对黑马的黑马头条微服务进行开发讲解🌴 ☕️每日一语:这个世界本来就不完美,如果我们再不接受不完美的自己,那我们要怎么活。☕️ 🚩 交流社区: 己不由心王

    2024年02月10日
    浏览(34)
  • Day02

    今日任务: 977 有序数组的平方 209 长度最小的子数组 59 螺旋矩阵Ⅱ 977 有序数组的平方 题目链接:https://leetcode.cn/problems/squares-of-a-sorted-array/ 双指针问题,以及数组本身时有序的; 思路: 左、右两个指针,比较两边的平方数, 将较大的数从后往前 放进新生成的数组 若左边

    2024年02月01日
    浏览(74)
  • go练习 day02

    go中使用mongodb实现增删改查 连接mongodb yaml配置 初始化连接 在初始化方法中调用 在DAO中挂载到BaseDao上 新增操作:添加一条记录 查找多条数据 插入多条数据 更新数据

    2024年02月13日
    浏览(27)
  • 小程序day02

          那麽問題來了,一次點擊會觸發兩個組件事件的話,該怎么阻止事件冒泡呢?         注意点:  只在标签里面用value=“{{info}}”,只会是info到文本框的单向绑定,必须在触发函数里面实现从文本框到info的绑定。然后才能像vue的v-model一样实现双向绑定。  相当于vue里面

    2024年02月06日
    浏览(30)
  • 初学QT(Day02)

    今天又是学到很多的一天啊! 设置背景图片的方法 今天开始使用代码来实现昨天做出的界面,并熟悉代码中出现的函数 使用setPixmap 使用setstylesheet中的css语法设置:“background-image:\\\"/“border-image” 昨天说过了border-image是将图片平铺在mainwindow中,是某种意义上的实现了图片自

    2024年02月06日
    浏览(33)
  • day02-Redis命令

    Redis是一个key-value的数据库,key一般是String类型,value的类型多种多样,value常见的八种类型: Redis支持五种基本的数据类型:string(字符串),hash(哈希),list(列表),set(集合)及zset(sorted set,有序集合)。 各个数据类型应用场景: 类型 简介 特性 场景 String(字符串) 二

    2023年04月16日
    浏览(31)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包