Published in：2024-10-24 |

vue-day2

1. 计算属性与监听事件

1.1 计算属性computed

computed: 中声明的是方法属性, 不可与data的变量重复

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
<div id="app">

    <!--  多个变量的显示依赖于一个变量的变化  -->
    <p @click="low_num">{{num}}</p>
    <p>十位: {{parseInt(num / 10)}}</p>
    <p>个位: {{num % 10}}</p>

    <hr>

    <!--  一个变量的值依赖于多个变量 且依赖的任意一个变量发生改变,则该变量都会变化 -->
    <!--    <input type="text" v-model="shi">-->
    <!--    <input type="text" v-model="ge">-->
    <input type="number" v-model="shi" max="9" min="0">
    <input type="number" v-model="ge" max="9" min="0">
    结果: <b>{{ shi * 10 + +ge }}</b>
    结果: <b>{{result}}</b>

</div>

<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            num: 34,
            shi: "",
            ge: "",
            // result: "1",     不能与方法属性重名
        },
        methods: {
            low_num() {
                this.num--;
            },
        },
        // 1. computed用来声明方法属性
        // 2. 声明的方法属性不能在data中重复定义
        // 3. 定义的方法属性必须在页面中渲染使用才生效  才会对内部的变量进行监听
        computed: {
            // 定义的方法属性
            result() {
                console.log("11111")
                return this.shi * 10 + +this.ge;
            },
        }
    })
</script>
1
2
3
4
# 总结
		// 1. computed用来声明方法属性
        // 2. 声明的方法属性不能在data中重复定义
        // 3. 定义的方法属性必须在页面中渲染使用才生效  才会对内部的变量进行监听

1.2 监听事件

当多个变量依赖于一个属性,则可以使用watch来监听这个属性的变化

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
<div id="app">

    <p @click="clickMe">{{num}}</p>
    <p>十位: {{shi}}</p>
    <p>个位: {{ge}}</p>

</div>

<script src="js/vue.min.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            num: 99,
            shi: "",
            ge: "",
        },
        methods: {
            clickMe() {
                this.num -= 3;
            },
        },
        // 1. 监听属性监听的是data中已存在的变量的变化
        // 2. 监听的值一旦发生改变,则就会触发监听事件
        // 3. 监听事件不需要返回值
        watch: {
            // 代表监听的是data中的num变量
            num() {
                this.shi = parseInt(this.num / 10);
                this.ge = this.num % 10;
            },
        },
    })
</script>
1
2
3
4
# 总结	
		// 1. 监听属性监听的是data中已存在的变量的变化
        // 2. 监听的值一旦发生改变,则就会触发监听事件
        // 3. 监听事件不需要返回值

2. 箭头函数

1.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
<script>

    // 正常函数
    function add(a, b) {
        console.log(a + b)
    }

    // add(2, 6)

    // 匿名函数
    let app = function (a, b, c) {
        console.log(a + b * c)
    }

    // app(4, 5, 6)

    // 箭头函数其实就是对于匿名函数写法的简化
    // (参数列表) => 如果在函数体只有一条语句则可以省略{}
    let app2 = (a, b, c) => console.log(a + b + c)
    // app2(2, 5, 8)

    let app3 = function (a, b) {
        console.log(a + b);
        console.log(a * b);
    }
    app3(4, 5)

    let app4 = (a, b) => {
        console.log(a + b);
        console.log(a * b);
    }
    app4(5,6)

</script>

1.2 箭头函数

在回调函数中使用箭头函数不会改变原有的this指向

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
<script>

    let user = {
        username: "小黑",
        app: function () {
            // 当前this指向的是当前的user实例
            console.log(this.username)
        }
    }

    user.app()

    let student = {
        username: "小黄",
        app: function () {
            // 在回调函数中this的指向会被改变  不再指向当前student实例
            setTimeout(function () {
                // 获取不到this对象了  已经被改变了
                console.log(this.username)
            })
        }
    }
    student.app()

    let emp = {
        username: "小绿",
        // 回调函数中this指向会被改变
        app: function () {
            // 在回调函数中使用箭头函数不会改变this指向
            setTimeout(() => {
                console.log(this.username);
            })
        }
    }
    emp.app()

    new Vue({
        el: "#app",
        data: {},
    })
</script>

3. 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
<div id="app">

    <span id="span">文本</span>

    <h3 @click="change" id="sp">{{number}}</h3>

</div>


<script src="js/vue.min.js"></script>
<script>

    // 在这一步创建了一个vue的实例  初始化  运行 销毁
    // 初始化之前   数据赋值之前  数据赋值以后
    new Vue({
        el: "#app",
        data: {
            number: 50,
        },
        methods: {
            change() {
                this.number--;
            },
        },

        // 1. vue的声明周期的第一个钩子  该钩子函数在执行时vue实例仅完成了自身事件的绑定以及生命周期初始化
        // 此时vue实例中还没有 data  el  methods等属性
        beforeCreate: function () {
            console.log("beforeCreate: " + this.number);
        },
        // 2. 第二个钩子  在这个函数执行时vue实例已经初始化了data属性 methods等相关方法
        created: function () {
            console.log("create: " + this.number)
        },
        // 3. 该函数在执行时vue将el作为执行范围来进行模板编译
        beforeMount() {
            console.log("beforeMount: " + document.getElementById("span").innerText);
        },
        // 4. 次函数在执行时已经将数据渲染到了页面并完成了页面数据的更新
        mounted() {
            console.log("mounted: " + document.getElementById("span").innerText);
        },
        // 5. 该函数是在数据被修改时执行 这个执行仅仅是vue实例中数据变化但页面显示的依旧是原来的数据
        beforeUpdate() {
            console.log("beforeUpdate: " + this.number)
            console.log("beforeUpdate: " + document.getElementById("sp").innerText)
        },
        // 6. 该函数在执行时  vue实例中数据和页面中渲染的数据已经更新完成了
        updated(){
            console.log("updated: " + this.number)
            console.log("updated: " + document.getElementById("sp").innerText)
        },
        // 7. 该钩子函数在执行时  vue实例中的data和methods还没有被销毁
        beforeDestroy(){

        },
        // 8. 次函数执行时  vue实例已经被销毁了
        destroyed(){

        },
    })
</script>

1603252581488

image-20200904114225183

4. vue的组件[重要]

组件的作用: 用来减少vue实例中的代码量,日后在开发过程中可以将一些重复的代码以组件的形式进行封装

4.1 组件的概念

1
2
1. 组件: 一个组件就是html css js的独立的集合体, 可以完成前端页面的代码复用
2. 组件可以分为根组件,全局组件,局部组件

4.2 全局组件

全局组件是将定义好的组件直接注册给vue实例, 以后在任意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
<div id="app">

    <com></com>
    <com></com>
    <com></com>

</div>

<script src="js/vue.min.js"></script>
<!--  组件的使用包括三部分:  组件的定义  组件的注册  组件的渲染  -->
<script>

    // 1. 组件的定义  组件就是一个普通的js对象
    let com = {
        // html页面
        template: `
            <div>这是我的第一个组件</div>
        `,
    }

    // 2. 组件的注册 全局注册  局部注册
    // 全局组件的注册: Vue.component("组件注册后的名称", "组件对象")
    Vue.component("com", com)

    new Vue({
        el: "#app",
        data: {},
    })
</script>

4.3 组件中data的使用

  1. 组件中的data是一个函数, 但是不能写成箭头函数
  2. 除了data的定义与vue实例中的data不同,二者在使用方面没有区别
  3. 组件中的data是相互隔离的,两者互不影响
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
<div id="app">
    <first></first>
</div>

<script src="js/vue.min.js"></script>
<script>

    let first = {
        template: `
          <div>
          这又是一个组件
          <br>
          <span @click="change">这是组件的span, {{username}}</span>
          </div>
        `,
        // 组件中data对应的值的 函数
        data: function () {
            return {
                username: "小黑",
            }
        },
        methods: {
            change(){
                alert()
            }
        }
    }

    Vue.component("first", first)

    new Vue({
        el: "#app",
        data: {},
    })
</script>

4.4 局部组件

局部组件的定义以及使用方式与全局组件保持一致，只不过是注册方式不同。 且局部组件只在注册的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
<div id="app">

    <second></second>

</div>

<script src="js/vue.min.js"></script>
<script>

    let second = {
        template: `
            <div>这是局部组件</div>
        `
    }

    // 全局注册
    // Vue.component("second", second)

    // 根组件
    new Vue({
        el: "#app",
        data: {},
        // 将second注册给某个vue实例
        // 局部组件只能在注册的vue的实例中使用  其他作用范围不能使用
        components: {
            "second": second,
        }
    })
</script

4.5 props属性

  1. 组件中独有一个props属性，在vue实例中不存在
  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
<div id="app">

    <com css="red" user="tom"></com>
    <com css="green" user="marry"></com>

</div>

<script src="js/vue.min.js"></script>
<script>

    // z组件中的template中只能有一个唯一的根标签,不能有同级的标签
    // 组件的根标签可以不是div 不能有兄弟标签

    let com = {
        template: `
            <div>
                <div :class="css">这还是我的组件</div>
            </div>

        `,
        // 可以在组件内接受组件标签传递过来的参数  从而使组件内部可以拥有动态的属性
        // props可以理解为一个数组  里面是所有组件可以接收的参数,相当于参数名
        // 可以将props理解为一个只读的data属性
        props: ["css", "user"],
        created: function () {
            console.log(this.user)
        }
    }

    new Vue({
        el: "#app",
        data: {},
        components: {
            "com": com,
        },
    })
</script>

5. 组件间的数据传递

5.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
<div id="app">

    <input type="text" v-model="username">
    <br>
    父组件的值: {{username}}
    <hr>

    <!--  父组件向子组件传递数据: 在子组件的标签上绑定一个属性 :任意属性名="父组件的变量"  -->
    <app :test="username"></app>

</div>

<script src="js/vue.min.js"></script>
<script>

    // 组件1
    let app = {
        template: `
          <div>
          这是子组件传递的数据: {{ test }}
          </div>
        `,
        // 通过props来接收父组件传递的参数
        props: ['test']
    }

    // new vue 也是一个特殊的组件  由于组件1直接注册到了组件2 的内部  所以组件2是组件1的父组件
    // 组件2
    new Vue({
        el: "#app",
        data: {
            username: "",
        },
        components: {
            app: app,
        }
    })
</script>
1
2
3
4
# 总结
	1. 父组件向子组件传递数据的方式是在子组件的标签上绑定一个属性  :任意属性名="父组件的变量"
	2. 父组件传递的值可以在子组件内部通过props接收
	3. 尽量不要在子组件的内部修改来自于父组件的值

5.2 子传父

子传父是通过this.$emit("自定义事件", "要传递的参数")来向父组件传递参数

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
<div id="app">

    这是父组件中的username: {{username}}
    <hr>
    <!-- 接收子组件传递的自定义事件  并且绑定父组件的方法   -->
    <com @btn="clickMe"></com>

</div>

<script src="js/vue.min.js"></script>
<script>

    let com = {
        template: `
          <div>
          这是子组件:
          <button @click="clickBtn">按钮</button>
          </div>
        `,
        methods: {
            // 在子组件触发的函数内部提交一个自定义事件  且这个事件要包含传递的参数
            clickBtn() {
                // 向父组件触发一个自定义事件  参数1: 事件名  参数2: 要传递的数据
                this.$emit("btn", "百知教育")
            },
        }
    }


    new Vue({
        el: "#app",
        data: {
            username: "小黑",
        },
        methods: {
            clickMe(username) {
                console.log(username);
                this.username = username;
            },
        },
        components: {
            com: com,
        }
    })
</script>

6. vue-cli 脚手架

6.1 vue-cli的概念

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统 。使用脚手架可以让我们开发的页面成为一个完整的系统（项目）。脚手架将vue的每个组件都做成了单独的组件

6.2 vue-cli安装

6.2.1 环境准备

如果想要安装vue-cli脚手架, 必须先安装好node.js的环境.

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
# 1. 下载node.js
	http://nodejs.cn/download/
		windows: .msi 安装包(exe)可以指定安装位置  .zip(压缩包) 直接解压可以使用
		mac:  pkg 安装包直接配置好环境无需操作
		
# 2. 安装时需要勾选 add to path  如果没有勾选,需要手动配置环境变量
	NODE_HOME="C:\Program Files\nodejs;"
	PATH="xxxx;%NODE_HOME%"
	
# 3. 验证是否成功
	node -v

# 4. npm介绍
	npm -v
	相当于python pip
	node package manager  nodejs的包管理工具 前端主流技术都可以通过npm安装
	
# 5. 配置npm 淘宝镜像
	npm config set registry https://registry.npm.taobao.org
	
# 6. 验证配置环境
		npm config ls

# 7. 配置npm 下载依赖的位置
	npm config set cache "D:\node_space\npm_cache"
	npm config set prefix "D:\node_space\npm_global"

作业

1
2
1. 课堂案例完成
2. 安装node
Prev:
Next:

    • Copyright © 2022 - 2024 16778738 | Powered by “> |