WebStretch

Fetch请求Json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script>
        fetch('./carList.json')//1 发起get请求，默认返回的是Promise对象
        .then(response => {

            // 2 处理相应结果 response.ok
            if(response.ok){
                // 得到数据，解析json数据:response.json() 是一个Promise对象
                return response.json()
            }
            else{
                // 抛异常
                console.log('error');
                
            }

        })
        // 4 得到最终解析的数据
        .then(data => {
            console.log(data);
            
        })

        .catch(error => {
            console.log('error');
            
        })
    </script>

Ajax请求Json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script>
        // 1. 创建XMLHttpRequest对象，用于服务器交互数据的基础对象
        const ajax = new XMLHttpRequest();

        /*
            2.配置请求参数
            open(method,请求地址) 初始化请求
            method: get/post/put/delete等
        */

        ajax.open('GET', 'test.json');

        // 3.请求完成时的回调函数
        ajax.onload = function(){
            // 判断请求http的状态码是否成功
            if(ajax.status == 200){
                // 解压json文件为js格式
            const data = JSON.parse(ajax.responseText)
            console.log(data);
            }                     
        }

        // 4.错误处理
        ajax.onerror = function(){
            console.log('error');
            
        }

        // 5.发送请求
        ajax.send();
    </script>

var，let，const

在 JavaScript 中，var、let 和 const 是用来声明变量的三个关键字。随着 ES6（ECMAScript 2015）的引入，let 和 const 成为了现代开发的标准。

它们的主要区别体现在作用域、变量提升以及是否允许重新赋值上。为了方便对比，这里整理了一张核心区别总结表：

特性 var let const
作用域 函数 / 全局作用域 块级作用域 {} 块级作用域 {}
变量提升 会提升，初始化为 undefined 会提升，但存在“暂时性死区” 会提升，但存在“暂时性死区”
重复声明 允许 不允许（同作用域内） 不允许（同作用域内）
重新赋值 允许 允许 不允许
声明时赋值 可选 可选 必须赋值

对象的增强写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<script>
        // 对象属性的增强写法
        const name = 'gongyu'
        const skills = 'play'

        const obj = {
            name, skills,
            age:20
        }

        console.log(obj);


        // 对象方法的增强写法
        const obj1 = {
            name1:'xiaoyu',
            skills,
            // 一般写法
            introduce1:function(){
                console.log(`my name is ${obj1['name1']},my skills are ${obj1['skills']}`);
                
            },
            // 箭头函数
            introduce2: () => {
                console.log(`my name is ${obj1['name1']},my skills are ${obj1['skills']}`);
            },
            // 增强写法
            introduce3(){
                console.log(`my name is ${obj1['name1']},my skills are ${obj1['skills']}`);
            }
        }
        
        obj1.introduce1()
        obj1.introduce2()
        obj1.introduce3()

        
    </script>

类与对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<script>
        // 对象 -- 抽象化得到类 -- 快速创建多个对象

        //创建班级同学的类
        class Student{
            // 默认的时候，类自带的一个无参构造器，用于生成对象
            // constructor(){
            // }


            //
            constructor(name, age, skill){
                // 给当前类设置默认的几个属性
                this.name = name
                this.age = age
                this.skill = skill
            }

            introduce(){
                console.log(`my name is ${this.name},my skills are ${this.skill}`);
                
            }
        }
        
        const s1 = new Student()
        const s2 = new Student('xiaoyu', 20, 'play')
        console.log(s2);
        
        s2.introduce()


    </script>

Map

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<script>
        // Map

        // 1.添加数据
        const map1 = new Map()
        // 链式调用
        map1.set('name', 'xiaoyu').set('age', 18) 
        console.log(map1);

        //2.获取数据
        const age = map1.get('age')
        console.log(age);
        
        // 3 has判断是否有键
        console.log(map1.has('name')); // true
        console.log(map1.has('name1')); // false
        
        // for遍历
        for(let [key, value] of map1){
            console.log(key,value);
        }

        // forEach遍历
        map1.forEach((key, value) => {
            console.log('forEach： ' + key,value);   
        })
        
        // 所有键的迭代器
        console.log(map1.keys());

        // 所有值的迭代器
        console.log(map1.values());

        // 所有键值对的迭代器
        console.log(map1.entries());
        
    </script>

剩余参数

当你调用 add(10,15,20,45,10) 的时候，传进去的所有参数都会被 …number 收集起来，放进一个数组里。
也就是相当于：
number = [10, 15, 20, 45, 10]

1
2
3
4
5
6
7
8
9
10
11
// 剩余参数
function add(...number){
    let s = 0
    for(let value of number){
        s += value
    }

    return s
}

console.log(add(10,15,20,45,10));

VUE入门

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 1.2插值表达式 -->
            <p>{{title}}</p>
            <p>{{content}}</p>
            <p>{{1+2+3}}</p>
            <p>{{output()}}</p>
            <p>{{outputContent}}</p>


            <!-- 4.指令 -->
            <p v-text="htmlContent"></p>
            <p v-html="htmlContent"></p>

            <!-- 渲染标签  渲染5个p标签-->
            <p v-for="item in 5">这是内容</p>
            <p v-if="true">标签内容</p>
            <p v-show="true">标签内容</p>
            
            <!-- 属性指令 -->
            <p v-bind:title='title'>这是内容</p>
                <!-- 简写 -->
            <p :title='title'>这是内容</p>


            <!-- 事件指令 -->
            <button v-on: click="output">按钮</button>
                <!-- 简写 -->
            <button @click="output">按钮</button>

            <!-- 表单指令： v-model可以实现双向数据绑定 -->
             <input type="text" v-model="inputValue">
             <p v-text="inputValue"></p>

            
            <!-- 5.修饰符 -->
            <input type="text" v-model.trim="inputValue">
            

    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        // 1.响应式数据与插值表达式
        const vm = new Vue({
            el: '#app',
            data (){
                return {
                    title: 'title',
                    content: 'text',
                    htmlContent:'这是一个<span>span</span>标签',
                    bool: true,
                    inputValue:  '默认内容'

                }
            },
            // 1.3 methods 属性
            methods:{
                output(){
                    return 'text' + this.title
                }
            },
            // 2.计算属性: 具有缓存性
            computed: {
                outputContent(){
                    return 'text' + this.title
                }
            },

            // 3.监听器
            watch:{
                title(newValue, oldValue){
                    console.log(newValue,oldValue);
                }
            }
        })
    </script>
</body>
</html>

v-if和v-show的区别

在 Vue.js 中，v-if 和 v-show 都能控制元素的显示与隐藏，但它们的底层逻辑和性能消耗完全不同。

简单来说：v-if 是“彻底消失”，而 v-show 只是“躲起来了”。

1. 核心区别对照表

特性 v-if (条件渲染) v-show (条件展示)
实现方式 DOM 销毁/重建。为 false 时，元素在 HTML 中根本不存在。 CSS 切换。始终保留在 DOM 中，只是切换 display: none;。
编译过程 惰性的。如果初始值为 false，则什么都不做。 无论初始值是什么，元素都会被编译并保留。
性能消耗 切换开销大。每次切换都要重新生成/卸载组件或 DOM。 初始渲染开销大。无论是否显示，都会先加载。
支持语法 支持 <template> 标签，支持 v-else。 不支持 <template>，不支持 v-else。

2. 形象比喻

  • v-if（盖房子）：

    当条件为真时，现场施工盖一座房子；当条件为假时，直接拆迁，原地变回空地。

  • v-show（隐身术）：

    房子一直就在那里，当条件为假时，只是给房子披上了一件“隐身斗篷”，房子本身没动。

3. 该选哪一个？

选 v-if 的场景：

  • 切换频率低：例如页面的登录模块、权限控制、或者是只有特定条件下才加载的大型组件。

  • 内存占用敏感：如果不显示，就不希望它占用任何内存资源。

选 v-show 的场景：

  • 切换非常频繁：例如 Tab 标签页、折叠面板的展开、鼠标悬停显示的提示框。

  • 预加载需求：希望元素能立即出现，不需要等待重新渲染。

一句话总结：

如果需要频繁切换显示状态，用 v-show；如果在运行时条件很少改变，或者有明显的条件分支逻辑，用 v-if。

[up主专用，视频内嵌代码贴在这]