【谷粒商城】vue简要笔记

最新推荐文章于 2024-07-22 08:39:52 发布

原创

最新推荐文章于 2024-07-22 08:39:52 发布 · 4.5w 阅读

123 ·

CC 4.0 BY-SA版权

blog.youkuaiyun.com/hancoder 可以打赏后索要离线md文件，打赏码在谷粒笔记的文尾。博主目前就职于阿里云，有需要可内推

文章标签：

#vue

本文深入探讨ES6新特性，包括let作用域、解构表达式、函数优化、对象优化、Map与Reduce等，同时讲解Vue.js的MVVM思想、指令、组件化、生命周期等关键概念，适合前端开发者进阶学习。

该文章已生成可运行项目，

笔记-基础篇-1(P1-P28)：https://blog.youkuaiyun.com/hancoder/article/details/106922139
笔记-基础篇-2(P28-P100)：https://blog.youkuaiyun.com/hancoder/article/details/107612619
笔记-高级篇(P340)：https://blog.youkuaiyun.com/hancoder/article/details/107612746
笔记-vue：https://blog.youkuaiyun.com/hancoder/article/details/107007605
笔记-elastic search、上架、检索：https://blog.youkuaiyun.com/hancoder/article/details/113922398
笔记-认证服务：https://blog.youkuaiyun.com/hancoder/article/details/114242184
笔记-分布式锁与缓存：https://blog.youkuaiyun.com/hancoder/article/details/114004280
笔记-集群篇：https://blog.youkuaiyun.com/hancoder/article/details/107612802
springcloud笔记：https://blog.youkuaiyun.com/hancoder/article/details/109063671
笔记版本说明：2020年提供过笔记文档，但只有P1-P50的内容，2021年整理了P340的内容。请点击标题下面分栏查看系列笔记
声明：
- 可以白嫖，但请勿转载发布，笔记手打不易
- 本系列笔记不断迭代优化，csdn：hancoder上是最新版内容，10W字都是在csdn免费开放观看的。
- 离线md笔记文件获取方式见文末。2021-3版本的md笔记打完压缩包共500k（云图床），包括本项目笔记，还有cloud、docker、mybatis-plus、rabbitMQ等个人相关笔记
sql：https://github.com/FermHan/gulimall/sql文件
本项目其他笔记见专栏：https://blog.youkuaiyun.com/hancoder/category_10822407.html

请直接ctrl+F搜索内容

本文为谷粒商城项目而简要学习

前后端对比

一、VS环境搭建

之前写过了，需要在VScode中安装如下插件：

Auto Close Tag
Auto Rename Tag
Chinese
ESlint
HTML CSS Support
HTML Snippets
JavaScript ES6
Live Server
open in brower
Vetur33
Vue 2Snippets 语法提示
谷歌浏览器中安装插件Vue Devtools

二、ES6

ECMAScript6.0（以下简称ES6，ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本），是JavaScript语言的下一代标准，2015年6月正式发布，从ES6开始的版本号采用年号，如

ES2015，就是ES6。
ES2016，就是ES7。
ES2017，就是ES8。

ECMAScript是规范，JS的规范的具体实现。

打开VSCode—打开文件夹—新建es6文件夹—新建文件1、let.html—shift+!+Enter生成模板。填入下面内容后，右键open with live server

1、let作用域.html

let不会作用到{}外，var会越域跳到{}外
var可以多次声明同一变量，let会报错
var定义之前可以使用，let定义之前不可使用。（变量提升问题）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    

    <script>
       // var 声明的变量往往会越域
       // let 声明的变量有严格局部作用域
         {
     
     
             var a = 1;
             let b = 2;
         }
         console.log(a);  // 1
         console.log(b);  // ReferenceError: b is not defined

         // var 可以声明多次
         // let 只能声明一次
         var m = 1
         var m = 2
         let n = 3
//         let n = 4
         console.log(m)  // 2
         console.log(n)  // Identifier 'n' has already been declared

        // var 会变量提升
        // let 不存在变量提升
         console.log(x);  // undefined
         var x = 10;
         console.log(y);   //ReferenceError: y is not defined
         let y = 20;

        // let
        // 1. const声明之后不允许改变
           // 2. 一但声明必须初始化，否则会报错
        const a = 1;
        a = 3; //Uncaught TypeError: Assignment to constant variable.
    
    </script>

</body>
</html>

var在{}之外也起作用
let在{}不起作用
var多次声明同一变量不会报错，let多次声明会报错，只能声明一次。
var 会变量提升（打印和定义可以顺序反）。let 不存在变量提升（顺序不能反）
let的·声明之后不允许改变

2、解构表达式.html

支持let arr = [1,2,3]; let [a,b,c] = arr;这种语法
支持对象解析：const { name: abc, age, language } = person; 冒号代表改名，旧:新
字符串函数
支持一个字符串为多行``
占位符功能 ${}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <script>
        //数组解构
        let arr = [1,2,3];
        // // let a = arr[0];
        // // let b = arr[1];
        // // let c = arr[2];

        let [a,b,c] = arr;
        console.log(a,b,c)

        const person = {
     
     
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
        //         const name = person.name;
        //         const age = person.age;
        //         const language = person.language;

        //对象解构 // 把name属性变为abc，声明了abc、age、language三个变量
        const {
     
      name: abc, age, language } = person;
        console.log(abc, age, language)

        //4、字符串扩展
        let str = "hello.vue";
        console.log(str.startsWith("hello"));//true
        console.log(str.endsWith(".vue"));//true
        console.log(str.includes("e"));//true
        console.log(str.includes("hello"));//true

        //字符串模板 ``可以定义多行字符串
        let ss = `<div>
                    <span>hello world<span>
                </div>`;
        console.log(ss);
        
        function fun() {
     
     
            return "这是一个函数"
        }

        // 2、字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
        let info = `我是${ 
       abc}，今年${ 
       age + 10}了, 我想说： ${ 
       fun()}`;
        console.log(info);

    </script>
</body>
</html>

3、函数优化.html

支持函数形参默认值 function add2(a, b = 1) {
支持不定参数 function fun(...values) {
支持箭头函数 var print = obj => console.log(obj);
箭头函数+结构 var hello2 = ({name}) => console.log("hello," +name);，本来应该是person.name

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

    <script>
        //在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：
        function add(a, b) {
     
     
            // 判断b是否为空，为空就给默认值1
            b = b || 1;
            return a + b;
        }
        // 传一个参数
        console.log(add(10));


        //现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值
        function add2(a, b = 1) {
     
     
            return a + b;
        }
        console.log(add2(20));


        //2）、不定参数
        function fun(...values) {
     
     
            console.log(values.length)
        }
        fun(1, 2)      //2
        fun(1, 2, 3, 4)  //4

        //3）、箭头函数。lambda
        //以前声明一个方法
        // var print = function (obj) {
     
     
        //     console.log(obj);
        // }
        var print = obj => console.log(obj);
        print("hello");

        var sum = function (a, b) {
     
     
            c = a + b;
            return a + c;
        }

        var sum2 = (a, b) => a + b;
        console.log(sum2(11, 12));

        var sum3 = (a, b) => {
     
     
            c = a + b;
            return a + c;
        }
        console.log(sum3(10, 20))


        const person = {
     
     
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }

        function hello(person) {
     
     
            console.log("hello," + person.name)
        }

        //箭头函数+解构
        var hello2 = ({
      
      name}) => console.log("hello," +name);
        hello2(person);

    </script>
</body>
</html>

4、对象优化.html

对象简写很常见

可以获取map的键值对等Object.keys()、values、entries
Object.assgn(target,source1,source2) 合并
如果属性名和属性值的变量名相同，可以省略const person2 = { age, name } 代表age属性的值是变量age的值
…代表取出该对象所有属性拷贝到当前对象。let someone = { …p1 }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        const person = {
     
     
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }

        console.log(Object.keys(person));//["name", "age", "language"]
        console.log(Object.values(person));//["jack", 21, Array(3)]
        console.log(Object.entries(person));//[Array(2), Array(2), Array(2)]

        const target  = {
     
      a: 1 };
        const source1 = {
     
      b: 2 };
        const source2 = {
     
      c: 3 };

        // 合并
        //{a:1,b:2,c:3}
        Object.assign(target, source1, source2);

        console.log(target);//["name", "age", "language"]

        //2）、声明对象简写
        const age = 23
        const name = "张三"
        const person1 = {
     
      age: age, name: name }
        // 等价于
        const person2 = {
     
      age, name }//声明对象简写
        console.log(person2);

        //3）、对象的函数属性简写
        let person3 = {
     
     
            name: "jack",
            // 以前：
            eat: function (food) {
     
     
                console.log(this.name + "在吃" + food);
            },
            //箭头函数this不能使用，要使用的话需要使用：对象.属性
            eat2: food => console.log(person3.name + "在吃" + food),
            eat3(food) {
     
     
                console.log(this.name + "在吃" + food);
            }
        }

        person3.eat("香蕉");
        person3.eat2("苹果")
        person3.eat3("橘子");

        //4）、对象拓展运算符

        // 1、拷贝对象（深拷贝）
        let p1 = {
     
      name: "Amy", age: 15 }
        let someone = {
     
      ...p1 }
        console.log(someone)  //{name: "Amy", age: 15}

        // 2、合并对象
        let age1 = {
     
      age: 15 }
        let name1 = {
     
      name: "Amy" }
        let p2 = {
     
     name:"zhangsan"}
        p2 = {
     
      ...age1, ...name1 } 
        console.log(p2)
    </script>
</body>

</html>

5、map和reduce.html

map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。
reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，

arr = arr.map(item=> item*2);

//[2, 40, -10, 6]
arr.reduce(callback,[initialValue])
/**
    1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）*/

map处理，arr = arr.map(item=> item*2);
reduce。arr.reduce((原来的值,处理后的值即return的值)=>{

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body