当前位置: 首页 > news >正文

【day4】 谷粒商城-前端相关(不全,没认真看)

es6

es6是一个标准,而js是es标准的具体实现。

  • 使用let关键字声明变量,let关键字更加的严谨,类似于Java的声明方式让js变得不那么奇怪。建议以后都使用let

  • const声明常量。const a =1 ,类似于C++

  • 解构表达式:

    let arr=[1,2,3];
    const[a,b,c]=arr; //这样a,b,c就被对应赋值了。
    

    对象解构,注意使用的是大括号

    const{name,age}=object 自动取出object对象中的name,age属性

  • 字符串拓展,类似于与java的字符串了

  • 字符串模板,使用来包括``字符串模板。可能是为了避免转义?

  • 字符串插入变量和表达式,变量名写在了${js表达式(变量,变量运算,函数)}

  • 函数优化

    • 不定参数,类似与Java的不定参数 …args

    • 函数的参数有默认值了,写法类似于python。

    • 箭头函数

      var pri=obj(参数) =>console.log(obj)
      等价于
      fun pri(obj)
      {
          console.log(obj);
      }
      多参数版本是
      var sum2=(a,b)=>a+b;
      
  • 回调地狱

    就是在ajax在success中再次发送其他的请求,这就是很乱的嵌套查询,也成为回调地狱。es6为了解决这个问题,提出了promise功能。

    promise 可以封装异步操作,将之前的嵌套操作,更改为了顺序操作。

    let p = new Promise( (resolve,reject)=>{
    	//1. 异步操作
       $.ajax({
       url:"mooc/user.json",
       success:function(data){
           resolve(data);
       },
       error:function(err){
           reject(err);
       }
       });
    });
    
    p.then((obj)=>{
    //成功,对应的是resolve
        在这里可以继续发送ajax请求。
    }).catch((err)=>{
        //失败了,对应的是 reject
    })//封装一下
    function get(url,data){
        return new Promise((resolve,reject)=>{
            $.ajax({
                url:url,
                data:data,
                success:function(data){
                    resolve(data);
                },
                error:function(err){
                    reject(err)
                }
            })
        });
    }
    get("url").then((data)=>{
        return get("url2")//让下一个查
    }).then((data)=>
           {
        console.log("第二个")
    }).catch((err)=>{
        //出错了,在这里处理
    })
    
  • 模块化

    类似于Java的导包, export 将指定的模块到处去,import 将模块导进来。

    export{一切js东西都可以导出,name,age}
    
    import {} from "./hello.js"
    

Vue

看的是Vue2*的东西,不是最新的。但是想到效率第一,还是先看这个吧。

npm init -y
npm install vue@2.6.10
<!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>Document</title>
</head>

<body>
    <div id ='app'>
        <h1>{{name}},非常帅</h1>
    </div>

    <script src="./dist/vue.js "></script>
    <script>
        let vm =new Vue({
            el:"#app",
            data:{name:"张三"}
        });

    </script>
</body>

</html>
  • 插值表达式

    使用{{html}}插值表达式可能会在网络慢的时候渲染先出源代码,再出成果。使用vue中的v-html可以避免这种情况。

    <span v-html>"msg"</span>
    

相关文章:

  • 程序编译的过程
  • Spring由哪些模块组成
  • 单链表反转C语言代码
  • Visual Paradigm 17.X Crack
  • 【微服务】RabbitMQ高级篇
  • Dubbo-----------------项目整合和分析
  • ROS2 入门应用 工作空间
  • AOSP 8.0 系统启动之四ART虚拟机启动(一)
  • 1079 Total Sales of Supply Chain
  • 基于DemonSet方式收集容器日志输出实践
  • 牛客网:JZ65 不用加减乘除做加法(详解)
  • 设计模式:观察者模式
  • C/C++基础 memset()函数的用法
  • LeetCode 2176. 统计数组中相等且可以被整除的数对
  • 直线生成算法(DDA算法)
  • 10技术太卷我学APEX-导航卡Card
  • 红黑树插入结点
  • python入门 之 字典(六)
  • 通过python编写自定义尺寸和位置批量进行图像剪裁
  • 开发人员对需求的正确打开方式
  • 电加热油锅炉工作原理_电加热导油
  • 大型电蒸汽锅炉_工业电阻炉
  • 燃气蒸汽锅炉的分类_大连生物质蒸汽锅炉
  • 天津市维修锅炉_锅炉汽化处理方法
  • 蒸汽汽锅炉厂家_延安锅炉厂家
  • 山西热水锅炉厂家_酒店热水 锅炉
  • 蒸汽锅炉生产厂家_燃油蒸汽发生器
  • 燃煤锅炉烧热水_张家口 淘汰取缔燃煤锅炉
  • 生物质锅炉_炉
  • 锅炉天然气_天燃气热风炉