尚硅谷vue学习p52

p52 生命周期-总结

在这里插入图片描述

p53 对组件的理解

在这里插入图片描述

p54 非单文件组件

在这里插入图片描述

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

    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/dayjs.min.js"></script>
</head>

<body>

    <div id="root">
        <input type="text" :value="number"> <br>
        <button @click="number++">number++</button>
        <!-- 3使用组件(局部) -->
        <stu></stu>
        <stu></stu>
        <!-- 使用全局组件 -->
        <school></school>
        <school></school>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false
        // 1.定义组件1
        const stu = Vue.extend({
            template: `
            <div>
                <h1>姓名:{{studentname}}</h1>
                <h1>年龄:{{age}}</h1>
                <button @click="show">点我提示姓名</button>
            </div>
            `,
            // data: function () {
            //     return {
            //         studentname: 'zhangsan',
            //         age: 18
            //     }
            // }
            data() {
                return {
                    studentname: 'zhangsan',
                    age: 18
                }
            },
            methods: {
                show() {
                    alert(this.studentname)
                }
            }
        })

        //定义组件2
        const school = Vue.extend({
            template: `
            <div>
                <h1>学校:{{schoolName}}</h1>
                <h1>地址:{{address}}</h1>
            </div>
            `,
            data() {
                return {
                    schoolName: '尚硅谷',
                    address: '北京'
                }
            }
        })
        //注册全局组件2
        Vue.component('school', school)

        new Vue({
            el: "#root",
            data: {
                number: 10
            },
            // 2.注册组件1(局部注册)
            components: {
                stu: stu
            }
        })
    </script>
    </head>
</body>
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

p55 组件的几个注意点

多个单词的写法
在这里插入图片描述

定义组件时候的名称,在开发者工具中会把name当作组件名称

定义组件时候可以简写,省略Vue.extend()

p56 组件的嵌套

<body>

    <div id="root">

        <school></school>
        -----------
        <school></school>
    </div>


    <script type="text/javascript">
        Vue.config.productionTip = false
        // 定义子组件
        const student = Vue.extend({
            name: "student",
            template: `
            <div>
                <h1>姓名:{{stuName}}</h1>
                <h1>年龄:{{age}}</h1>
            </div>
            `,
            data() {
                return {
                    stuName: 'tom',
                    age: 18
                }
            },
        })
        // 定义父组件
        const school = Vue.extend({
            name: "school",
            template: `
            <div>
                <h1>学校:{{schName}}</h1>
                <h1>地址:{{address}}</h1>
                <student></student>
            </div>
            `,
            data() {
                return {
                    schName: '尚硅谷',
                    address: '北京'
                }
            },
            components: {
                student:student
            }
        })

        new Vue({
            el:'#root',
            components:{
                school
            }
        })
    </script>
    </head>
</body>
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

app组件
在这里插入图片描述

p57 VueComponent构造函数

在这里插入图片描述

p58 Vue实例与组件实例

在这里插入图片描述

p59 一个重要的内置关系

在这里插入图片描述

p60 单文件组件

在这里插入图片描述

p61 创建Vue脚手架

配置 npm 淘宝镜像：npm config set registry https://registry.npm.taobao.org

第一步（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

第三步：启动项目

npm run serve

启动成功
在这里插入图片描述
访问

p62 分析脚手架结构

在这里插入图片描述

p63 render函数

在这里插入图片描述

p64 修改默认配置

在这里插入图片描述

关闭语法检查
在这里插入图片描述

p65 ref属性

这里this代表vc组件
在这里插入图片描述

p66 props配置

在这里插入图片描述

代码
在这里插入图片描述
props简写数组形式

数字类型的前面要加 :
在这里插入图片描述

p 67mixin混入

在这里插入图片描述

可以多个组件重复利用同一代码片段
在这里插入图片描述

上面的都是局部的,下面我们使用全局的mixin

p68 插件

在这里插入图片描述
定义plugin.js

导入插件

就可以直接使用插件中定义好的过滤器等功能了

p69 scoped样式

多个组件之间style使用样式如class属性可能会有重名的发生冲突,所以使用scope

在这里插入图片描述

使用less格式style样式

在这里插入图片描述
安装less-loader6 (要和npm版本对应)

npm i less-loader@6

相关阅读:
充电学习—3、Uevent机制和其在android层的实现
 SwiftUI Swift iOS iPadOS 实现更改 App 图标
 JAVA反射机制实现调用类的方法
 Java代码之this关键字应用示例分享
 RabbitMQ安装
 【前端杂文】 axios的AxiosResponse分析
 力扣刷题（6）
使用乐鑫 Web IDE 助力物联网开发
 【数据结构】深入理解AVL树：实现和应用
 新冠疫情历史数据可视化分析
原文地址：https://blog.csdn.net/weixin_44229645/article/details/125439268