一.VSCode的使用

常用插件

image-20230521233651126

二. ES6

菜鸟ES6教程教程

1.简介

​ ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

2.基础语法

img

2.1 声明变量

  • let 声明的变量有严格的作用域 var没有严格的作用域
  • let变量只能声明一次
  • let不存在变量提升 var存在变量提升（先使用后声明）
  • const声明的是常量，不能重新赋值
  • 总计:使用let声明变量
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
<!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>
</head>

<body>

    <script>
        //1.有严格的作用域
        //var 声明的变量往往会越域
        //let 声明的变量有严格的作用域
        {
            var a = 1;
            let b = 1;
        }
        console.log(a)  //不会报错
        console.log(b)  //ReferenceError: b is not defined,有严格的作用域，所以会报错



        //2.let的变量只能声明一次
        var m = 1
        var m = 2
        let n = 3
        // let n  = 4
        console.log(m)  //不会报错
        console.log(n)  //Identifier 'n' has already been declared  不能声明两次



        //3.let不存在变量提升 var存在变量提升
        console,log(x)
        var x = 10;   //这里不会报错，可以先使用后定义


        //4.const声明的是常量，不能重新赋值

        //总计:使用let声明变量

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

2.2 解构表达式和模板字符串

  • 数组的解构
  • 对象的解构
  • 字符串API的扩展
  • 模板字符串
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
<!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>
</head>

<body>
    <script>
        //解构表达式
        //1.原始的数组的赋值方式
        let arr = [1, 2, 3]
        // let a = arr[0]
        // let b = arr[1]
        // let c = arr[2]

        //2.使用解构表达式给数组赋值(数组解构)
        let [a, b, c] = arr;
        console.log(a, b, c);

        //3.使用解构表达式给对象赋值(对象解构)
        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
        //原始的赋值方式
        // const name = person.name
        // const age = person.age
        // const language = person.language

        //使用解构赋值(对象解构)
        //const { name, age, language } = person
        //更换属性名
        const { name: abc, age, language } = person
        //将属性名name更换为abc
        console.log(abc, age, language)


        //4.字符串扩展
        //几个新的字符串API
        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


        //5.模板字符串
        //${}插值
        let name = "Tom"
        let result = `你好${name}`
        console.log(result)
        //可以直接调用字符串的返回值组成一个新的字符串
        function fun(){
            return "这是一个函数"
        }
        result = `你好${name},我想说:${fun()}`
        console.log(result)

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

2.3 函数优化

  • 默认初始值
  • 不定参数
  • 箭头函数
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
<!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>
    </title>
</head>

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

        //优化后 直接在参数上写上默认的值  如果没有传就会自动使用默认值
        function add2(a, b = 1) {
            return a + b
        }
        console.log(add2(20)) //结果是21


        //2.不定参数 类似于java里面的可变形参
        function fun(...values) {
            console.log(values.length)
        }
        fun(1, 2)
        fun(1, 2, 3)
        fun(1, 2, 3, 4)


        //3.箭头函数
        //以前的声明方法
        var print = function (obj) {
            console.log(obj)
        }
        var print1 = obj => console.log(obj)
        print1("hello") //输出hello

        //求两数之和
        //以前的方法
        var sum = function (a, b) {
            return a + b
        }
        //使用箭头函数
        var sum2 = (a, b) => a + b //方法体中只有一行代码  不用写return
        console.log(sum2(11, 3))

        var sum3 = (a, b) => {//方法体中有多行代码 写法如下
            c = a + b;
            return a + c
        }
        console.log(sum3(11, 3))

        //复杂一点的箭头函数
        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
        //原始的方法
        function hello(person) {
            console.log("hello " + person.name)
        }

        //单纯的箭头函数
        var hello2 = (obj) => console.log("hello," + obj.name)
        hello2(person)

        //箭头函数加解构表达式
        var hello3 = ({name}) => console.log("hello," + name)
        hello3(person)
    </script>
</body>

</html>

2.4 对象优化

  • 对象新增的API
  • 声明对象的简写方式
  • 对象函数属性的简写
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
<!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>
</head>

<body>
    <script>
        //1.对象相关的API
        //定义一个person对象
        const person = {
            name: "jack",
            age: 21,
            language: ['java', 'js', 'css']
        }
        //测试对象新增的API
        //返回对象所有的属性信息
        console.log(Object.keys(person)) //['name', 'age', 'language']
        //返回对象中vaules
        console.log(Object.values(person))// ['jack', 21, Array(3)]
        //返回key-vaues
        console.log(Object.entries(person))// [Array(2), Array(2), Array(2)]


        //将source1和source2的属性合并到target中
        const target = { a: 1 }
        const source1 = { b: 2 }
        const source2 = { c: 3 }
        //将source1和source2中的属性合并在一起
        Object.assign(target, source1, source2)
        console.log(target) //{a: 1, b: 2, c: 3}


        //2.声明对象的简写方式
        //声明两个变量
        const age = 23;
        const name = "张三";
        //原始的方式然后声明一个对象，属性值为这两个变量的值
        const person1 = { age: age, name: name }
        console.log(person1)

        //ES6的方式
        const person2 = { age, name }// 属性名和属性值代表的变量的名字一样可以省写
        console.log(person2)

        //3.对象函数属性的简写
        let person3 = {
            name: "jack",//对象的属性
            //以前的语法格式
            eat: function (food) {//对象的方法
                console.log(this.name + "在吃" + food)
            },

            //使用箭头有函数简写  箭头函数中this.name无法使用
            eat2: food => console.log(person3.name + "在吃" + food),

            eat3(food) {
                console.log(this.name + "在吃" + food)
            }
        }
        person3.eat("香蕉")
        person3.eat2("苹果")
        person3.eat3("梨子")

        //4.对象的扩展运算符
        //拷贝对象(深拷贝)
        //将person01的值拷贝给someone
        let person01 = { name: "Amy", age: 15 }
        let someone = { ...person01 }
        console.log(someone)

        //合并对象
        let age1 = { age: 15 }
        let name1 = { name: "Amy" }
        let person03 = { ...age1, ...name1 }//两个对象属性的合并一个对象中,如果有相同的值,后一个覆盖前面的那一个属性的值
        console.log(person03)//{age: 15, name: 'Amy'}

    </script>
</body>

</html>

2.5 数组的map、reduce方法

  • map方法
  • reduce方法
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
<!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>map和reduce</title>
</head>

<body>
    <script>
        //数组中新增了map和reduce方法
        //map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回
        let arr = ['1', '20', '-5', '3']
        //需求:将原数组中的每一个值乘以2并返回
        //第一种方法
        arr1 = arr.map((item) => {//item为数组中的每一个元素
            return item * 2
        })
        console.log(arr1)
        //第二种方法
        arr2 = arr.map(item => item * 2)
        console.log(arr2)

        //reduce()方法:为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素
        arr3 = [2, 40, -10, 6]
        //arr.reduce(callback,[initialValue]) //可以传一个回调函数callback，也可以传一个初始值initialValue
        //传入的是回调函数 可以传入的值有
        /**
         * previousValue (上一次调用回调返回的值，或者是提供的初始值initialValue)
         * currentValue (数组中当前被处理的元素)
         * index (当前元素在数组中的索引)
         * array (调用reduce的数组)
         * */
        let result = arr3.reduce((a, b) => {//这个方法相当于求数组中每一个元素的和
            console.log("上一次处理后的值:" + a)
            console.log("当前处理的值:" + b)
            return a + b;
        })
        console.log(result)
        /**结果
         * 上一次处理后的值:2
           当前处理的值:40
           上一次处理后的值:42
           当前处理的值:-10
           上一次处理后的值:32
           当前处理的值:6
           38
            **/
    </script>
</body>

</html>

2.6 promise异步编排

解决回调地域的问题

​ Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

原有的基础上进一步的封装，链式调用

3.模块化

3.1 什么是模块化

​ 模块化就是把代码进行拆分，分辨重复使用。类似java中的导包：要使用一个包，必须先导包。而JS中没有包的概念，换来的是模块。

模块功能主要由两个命令构成: export和import

  • export命令用于规定模块的对外接口
  • import命令用于导入其他模块提供的功能

3.2 export

export不仅可以导出对象，一切js对象都可以导出。比如:基本类型的变量、函数、数组、对象

比如我们定义了一个js文件hello.js，里面有一个对象

1
2
3
4
5
const util = {
    dsum(a, b) {
        return a + b;
    }
}

我们可以使用export将这个对象导出

1
2
3
4
5
6
7
8
const util = {
    dsum(a, b) {
        return a + b;
    }
}

//导出对象
export { util }

也可以简写成

1
2
3
4
5
export const util = {
    dsum(a, b) {
        return a + b;
    }
}

当要导出多个值时，还可以简写。比如我有一个文件: user.js

1
2
3
4
var name  = "jack"
var age = 21

export{name, age}

3.3 import

比如我们之前定义了两个JS文件

hello.js

1
2
3
4
5
6
7
8
const util = {
    dsum(a, b) {
        return a + b;
    }
}

//导出对象
export { util }

user.js

1
2
3
4
5
6
7
var name = "jack"
var age = 21
function add(a, b) {
    return a + b
}

export { name, age, add }

我们在main.js文件中导入上面的两个文件，并使用上面的两个文件的方法

1
2
3
4
5
6
import util from "./hello"  //这里只能是util 不能是其他的名字
import {name,age,add} from './user'  //可以不用全部导入 只用导入需要的即可

util.sum(1,2)
console.log(name);
add(1,2)

3.4 注意

当我们这样定义时，导入的时候可以自定义导入时使用的变量名

1
2
3
4
5
export default {  //导出的时候这样写
    dsum(a, b) {
        return a + b;
    }
}
1
import xxx from "./hello"  //这里使用可以随意的取名

三.Vue

1.MVVM思想

  • M:即 Model，模型，包括数据和一些基本操作
  • V:即View视图，页面渲染结果
  • VM:即 View-Model，模型与视图间的双向操作（无需开发人员干涉)

​ 在MVVM之前，开发人员从后端获取需要的数据模型，然后要通过DOM操作 Model渲染到View中。而后当用户操作视图，我们还需要通过DOM获取View中的数据，然后同步到Model中。而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的:

2.vue的简介

​ Vue (发音为 /vjuː/，类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。

Vue2官方文档

3.语法基础

3.1 快速入门

1.创建一个文件夹,用VSCode打开

2.下载vue的依赖

1
2
3
4
# 初始化项目
npm init -y
# 安装vue的依赖，这里vue2和vue3版本语法有些差别，使用的时候要注意
npm install vue@2

3.创建一个index.html文件

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
<!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>Vue入门</title>
</head>

<body>
    <div id="app">
        <h1>{{name}},是个傻子</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        //这里最新版的vue上面无法获取到name的值
        let vm = new Vue({
            el: "#app",
            data: {
                name:"张三"
            }
        });
    </script>
</body>

</html>

3.2 基本的语法和插件的安装

3.2.1双向绑定v-model

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
<!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>Vue入门</title>
</head>

<body>
    <div id="app">
        <!-- 双向绑定 -->
        <input type="text" v-model="num">
        <h1>{{name}}今年{{num}}岁了</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        //声明式渲染
        let vm = new Vue({
            el: "#app",
            data: {
                name:"张三",
                num: 1
            }
        });
    </script>
</body>
</html>

3.2.2事件处理

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
<!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>Vue入门</title>
</head>

<body>
    <div id="app">
        <!-- 双向绑定 -->
        <input type="text" v-model="num">
        <!-- 点击事件绑定 -->
        <button v-on:click="num++">点赞</button>
        <!-- 取消点赞 -->
        <button v-on:click="cancle()">取消点赞</button></button>
        <h1>有{{num}}为{{name}}点赞!</h1>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        //声明式渲染
        let vm = new Vue({
            el: "#app", //绑定元素
            data: {//封装数据
                name:"张三",
                num: 1
            },
            methods:{//封装方法
                cancle(){
                    this.num--;
                }
            }
        });
        //v-xx 相当于指令
        //总结
        //1.创建vue的实例，关联页面的模板，将自己的数据(data)渲染到关联的模板
        //2.使用指令简化对dom的操作 例如 v-XX
    </script>
</body>

</html>

3.2.3VUE代码提示插件和浏览器插件

浏览器插件地址 直接解压，打开浏览器插件的开发者模式，选择加载已解压的文件，选择chrome目录即可

image-20230525192244158

image-20230525191246045

3.2.4常用指令

v-html 和 v-text
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
<!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>
</head>
<body>
    <div id="app">
        <!-- 1.显示类的指令 -->
        <!-- 插值表达式会发生插值闪烁的问题,先显示{{msg}}后显示内容 -->
        <!-- 打印的是<h1>Hello</h1> -->
        {{msg}} <br>
        {{1+1}} <br>
        {{hello()}} <br>
        <span v-text="msg"></span>
        <!-- 直接显示h1的大标题 -->
        <span v-html="msg"></span>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:"<h1>Hello</h1>"
            },
            methods: {
                hello(){
                    return "hello";
                }
            },
        })
    </script>
</body>
</html>
v-bind单向绑定
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
<!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>
</head>
<body>
    <div id = "app">
        <!-- 单向绑定 -->
        <a v-bind:href="link">百度</a>
        <!-- class style也可以通过标签进行单向绑定 -->
        <span v-bind:style="{color:color}">你好</span>
        <span :style="{color:color}">使用缩写形式的单向绑定</span>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                link:"http://www.baidu.com",
                color: 'green'
            }
        })
    </script>
</body>
</html>
v-model 双向绑定
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
<!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>
</head>
<body>
    <div id = "app">
        精通的语言:<br>
        <input type="checkbox" v-model="language" value="java">JAVA <br>
        <input type="checkbox" v-model="language" value="php">PHP <br>
        <input type="checkbox" v-model="language" value="python">Python <br>
        选中了: {{language}}
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                language:[]
            }
        })
    </script>
</body>
</html>

image-20230526164858205

v-on 事件绑定
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
<!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>
</head>

<body>
    <div id="app">
        <!-- 绑定一个单机事件 -->
        <button v-on:click="num++">v-on:click的方式点赞</button><br>
        <!-- 简写的方式实现点赞 -->
        <button @click="num++">@click的方式点赞</button><br>
        <!-- 点击事件指定一个回调函数 -->
        <button v-on:click="cancle()">取消点赞</button><br>
        点赞的数量:{{num}}


    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                num: 0
            },
            methods: {
                cancle(){
                    this.num--;
                }
            },
        })

    </script>
</body>
</html>
image-20230526170222378
v-for 循环显示
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
<!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>
</head>

<body>
    <div id="app">
        <ul>
            <!-- 1.遍历数组 -->
            <!-- 可以使用v-for="user in users"遍历用户信息 -->
            <!-- 获取下标的信息加上一个index -->
            <li v-for="(user,index) in users" :key="">
                序号:{{index+1}} <br>
                姓名:{{user.name}} <br>
                性别:{{user.gender}} <br>
                年龄:{{user.age}} <br>
                <!-- 2.遍历对象,获取每一个属性信息 -->
                对象信息:
                <span v-for="(v,k,i) in user">属性索引={{i}}|属性名={{k}}|属性值={{v}}|</span><br>
            </li>
            <!-- 遍历的时候加上 :key 提高渲染的效率 -->
            <!--  <li v-for="(user,index) in users" :key=""> -->
        </ul>
    
        <!-- 遍历数组 -->
        <ul>
            <li v-for="(item,index) in nums" ::key="index">
                {{item}}
            </li>
        </ul>

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                users: [
                    { name: "mary", gender: '女', age: 21 },
                    { name: "tom", gender: '男', age: 35 },
                    { name: "mike", gender: '男', age: 21 },
                    { name: "amy", gender: '女', age: 64 }
                ],
                nums:[1,2,3,4,5,6,7,8,9,10,11]
            }
        })

    </script>
</body>

</html>

image-20230526172228532

v-if 和 v-show
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
<!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>
</head>
<body>
    <!-- v-if 条件判断,当结果为true时,所有的元素才会被渲染 -->
    <!-- v-show 当得到的结果为true时,所有的元素才会被显示 -->
    <div id="app">
        <button v-on:click="show = !show">点击显示与否</button></button>
        <!-- 1.使用v-if显示 -->
        <h1 v-if="show">if=看到我...</h1>
        <!-- 2.使用v-show显示 -->
        <h1 v-show="show">show=显示...</h1></h1>
        <!-- 多重判断 -->
        <!-- v-if、v-else-if、v-else -->
        <!-- 循环的时候也可以加上判断 -->

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                show:true
            }
        })

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

3.2.5 计算属性和侦听器

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
<!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>
</head>

<body>
    <div id="app">
        <!-- 计算属性 -->
        <ul>
            <li>西游记；价格：{{xyjPrice}},数量:<input type="number" v-model="xyjNum"></li>
            <li>水浒传；价格：{{shzPrice}},数量:<input type="number" v-model="shzNum"></li>
            <li>总价:{{totalPrice}}</li>
            {{msg}}
        </ul>
        <!-- 侦听器,监听属性值的变化 -->
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                xyjPrice: 99.98, //西游记价格
                shzPrice: 99.00, //水浒传价格
                xyjNum: 0, //西游记的数量
                shzNum: 0, //水浒传的数量
                msg: "" //提示的消息
            },
            computed: {//计算属性
                totalPrice() {//计算总价
                    return this.xyjPrice * this.xyjNum + this.shzPrice * this.shzNum
                }
            },
            watch: {//监听器
                //newVal：新值
                //oldVal：旧值
                //下面的这个方法是监听当购买的数量超出了3，就提示超库存了，并把输入框的值设置为最大的3
                xyjNum: function (newVal, oldVal) {//监听西游记数量的变化
                    console.log("newVal:" + newVal + " | " + "oldVal:" + oldVal)
                    if (newVal >= 3) {
                        this.msg = "库存超出了限制"
                        this.xyjNum = 3
                    } else {
                        this.msg = ""
                    }
                }
            }

        })

    </script>

</body>
</html>

3.2.6 过滤器

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
<!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>
</head>
<div id="app">
    <!-- 过滤器常用来处理文本格式化的操作，过滤器可以用在两个地方：插值表达式和v-bind表达式 -->
    <ul>
        <li v-for="user in userList">
            <!-- 显示性别的时候不用代号显示，使用男女显示 -->
            <!-- 方式一:通过三元运算符的形式显示 -->
            <!-- 姓名:{{user.name}} | 性别:{{user.gender== 1?"男":"女"}} -->
            <!-- 方式二:使用过滤器的方式 其中 | 是管道符  genderFilter是过滤器 -->
            姓名:{{user.name}} | 性别:{{user.gender | genderFilter}}
        </li>
    </ul>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>

    Vue.filter("gFilter", function (val) {//全局过滤器
        if (val == 1) {
            return "男··"
        } else {
            return "女··"
        }
    })


    new Vue({
        el: "#app",
        data: {
            userList: [
                { id: 1, name: "jacky", gender: 1 },
                { id: 2, name: "peter", gender: 0 },
            ]
        },
        filters: {//局部的过滤器
            genderFilter(val) {
                if (val == 1) {
                    return "男"
                } else {
                    return "女"
                }
            }
        }
    })

</script>

<body>

</body>

</html>

3.3 组件化

​ 在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。但是每个页面都都独自开发，这无疑增加了开发的成本。所以我们会把页面的不同部分拆分成独立的组件，然后在不同的页面就可以共享这些组件，避免重复开发。

image-20230527215736955

3.3.1 全局组件

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
<!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>
</head>

<body>
    <div id="app">
        <button @click="count++">我被点击了{{count}}次</button>

        <!-- 组件的使用 -->
        <counter></counter>
        
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        //1.全局声明一个组件
        Vue.component("counter", {//counter是组件的名称，可以随便起名，见名知意就行
            template: `<button @click="count++">我被点击了{{count}}次</button>`,//模板
            data() { //模板中的属性信息，这里的data必须是一个函数
                return {
                    count: 1
                }
            }
        });
        new Vue({
            el: "#app",
            data: {
                count: 0
            }
        })

    </script>
</body>

</html>
image-20230527220905922

3.3.2 局部组件

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
<!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>
</head>

<body>
    <div id="app">
        <button @click="count++">我被点击了{{count}}次</button>

        <!-- 局部组件的使用 -->
        <button-counter></button-counter>

    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>

        //声明一个局部的组件
        const buttonCounter = {
            template: `<button @click="count++">我被点击了{{count}}次</button>`,
            data() { 
                return {
                    count: 1
                }
            }
        }
        new Vue({
            el: "#app",
            data: {
                count: 0
            },
            //声明一个局部的组件
            components:{
                'button-counter':buttonCounter
            }
        })

    </script>
</body>

</html>

3.3 生命周期和钩子函数

生命周期图

image-20230527221756442

3.4 Vue模块化开发

1.全局安装webpack

1
npm install webpack -g

2.全局安装vue脚手架

1
npm install -g @vue/cli-init

3.初始化vue的项目

创建一个文件夹，打开cmd，切换到这个文件夹，执行以下的命令

1
2
# vue脚手架使用webpacke模板初始化一个项目
vue init webpack 项目名称

4.启动vue的项目

项目中的package.json中有scripts，代表我们能运行的命令

1
2
3
4
5
6
# 启动项目
npm start  
#或者
npm run dev 
# 将项目打包
npm run build

4.Eelment-UI

官方文档:https://element.eleme.cn/#/zh-CN/component/quickstart