Vue组件化编程【Vue】

news2024/11/28 7:42:58

2.Vue 组件化编程

2.1 模块与组件、模块化与组件化

2.1.1 模块

  1. 理解：向外提供特定功能的js程序，一般就是一个js文件
  2. 为什么：js文件很多很复杂
  3. 作用：复用js、简化js的编写、提高js运行效率。

2.1.2 组件

  1. 理解：用来实现局部（特定）功能效果的代码集合
  2. 为什么：一个界面的功能很复杂
  3. 作用：复用编码，简化项目编码，提高运行效率

2.1.3 模块化

当应用中的js都以模块来编写的，那这个应用就是一个模块化应用。

2.1.4 组件化

当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。

2.2 非单文件组件

定义：一个文件中包含有 n 个组件。

2.2.1 基本使用

Vue中使用组件的三大步骤：

  • 定义组件（创建组件）
  • 注册组件
  • 使用组件（写组件标签）
  1. 如何定义一个组件？

使用 Vue.extend(options) 创建，其中options和 new Vue(options)时传入的那个 options 几乎一样，但也有点区别：
区别如下：
（1）el不要写，为什么？
因为最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
（2）data必须写成函数，为什么？
避免组件被复用时，数据村子啊引用关系。

备注：使用 template 可以配置组件结构。

  1. 如何注册组件？
    （1）局部注册：靠 new Vue 的时候传入 components 选项
    （2）全局注册：靠 Vue.component('组件名'，组件)

  2. 编写组件标签：< school >< /school >

<!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>Document</title>
    <script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body>
     <!-- 准备好一个容器 -->
     <div id="root">
        <hello></hello>
        <hr>
        <h1>{{msg}}</h1>
        <hr>
        <!-- 第三步：编写组件标签 -->
        <school></school>
        <hr>
         <!-- 第三步：编写组件标签 -->
        <student></student>
    </div>
    <div id="root2">
        <hello></hello>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成提示
    //第一步：创建school组件
    const school = Vue.extend({
        template: `
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>
            </div>
        `,
        data(){
            return {
                schoolName: '西安文理',
                address:'西安雁塔'
            }
        },
        methods: {
            showName(){
                alert(this.schoolName)
            }
        }
    })

    //第一步：创建student组件
    const student = Vue.extend({
        template: `
            <div>
                <h2>学生姓名：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data(){
            return {
                studentName: '张三',
                age: 18,
            }
        }
    })
    //创建hello组件
    const hello = Vue.extend({
        template:`
            <div>
                <h2>你好啊！{{name}}</h2>
            </div>
        `,
        data(){
            return {
                name: 'Tom'
            }
        }
    })

    //全局注册组件
    Vue.component('hello', hello)
    new Vue({
        el: '#root',
        data: {
            msg: '你好啊',
        },
        //第二步：注册组件（局部组件）
        components: {
            school: school,
            student: student,
        }
    })
    
    
    new Vue({
        el: '#root2',
        
    })
</script>
</html>

2.2.2 几个注意点

  1. 关于组件名：

一个单词组成：
第一种写法（首字母小写）：school
第二种写法（首字母大写）：School
多个单词组成：
第一种写法（kebab-case）：my-school
第二种写法（CamelCase）：MySchool（需要Vue脚手架支持）

备注：
（1）组件名尽可能回避HTML中已有的元素名称。例如：h2、H2都不行。
（2）可以使用name配置项指定组件在开发者工具中呈现的名字。

  1. 关于组件标签：
    第一种写法：< school >< /school >
    第二种写法：< school/ >

备注：不使用脚手架时，< school/ >会导致后续组件不能渲染

  1. 一个简写的方式：const school = Vue.extend(options) 可简写为：const school = options

2.2.3 组件的嵌套

<!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>Document</title>
    <script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">

    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成提示
     //定义student组件
     const student = Vue.extend({
        name: 'student',
        template: `
            <div>
                <h2>学生姓名：{{name}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data(){
            return {
                name: '李四',
                age: 18,
            }
        }
    })
    //定义school组件
    const school = Vue.extend({
        name: 'school',
        template: `
            <div>
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
                <student></student>
            </div>
        `,
        data(){
            return {
                name: '张三',
                address: '西安',
            }
        },
        //注册组件（局部）
        components: {
            student
        }
    })
    
    
    //定义hello组件
    const hello = Vue.extend({
        template: `<h1>{{msg}}</h1>`,
        data(){
            return {
                msg: '欢迎来到西安文理学习！'
            }
        }
    })
    
    //定义app组件
    const app = Vue.extend({
        template: `
            <div>
                <school></school>
                <hello></hello>
            </div>
        `,
        components: {
            school,
            hello,
        }
    })
    //创建 vm
    new Vue({
        template: `
           <app></app>
        `,
        el: '#root',
        //注册组件（局部）
        components: {
            app
        }
        
    })
</script>
</html>

关于Vuecomponent：

  1. school 组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
  2. 我们只需要写 < school/ >或< school >< /school >,Vue解析时会帮我们创建school组件的实例对象。
  3. 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！
  4. 关于this指向：
    （1）组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例对象】。
    （2）new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
  5. VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
    Vue的实例对象，以后简称vm。

2.2.4 一个重要的内置关系

  1. 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
  2. 为什么要有这关系：让组件实例对象（vc）可以访问到 Vue 原型上的属性、方法。
    在这里插入图片描述
<!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>Document</title>
    <script type="text/javascript" src="../js/vue.min.js"></script>
</head>
<body>
     <!-- 准备好一个容器 -->
     <div id="root">
        <school></school>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成提示
    Vue.prototype.x = 99

    //定义school组件
    const school = Vue.extend({
        name: 'school',
        template: `
            <div>
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showX">点我输出x</button>
            </div>
        `,
        data(){
            return {
                name: '张三',
                address: '西安',
            }
        },
       methods: {
        showX(){
            console.log(this.x);
        }
       }
    })
    

    //创建一个vm
    new Vue({
        el: '#root',
        data: {
            msg: '你好'
        },
        components: {
            school
        }
    }) 



    //定义一个构造函数
    /*function Demo(){
        this.a = 1,
        this.b = 2
    }

    //创建一个Demo的实例对象
    const d = new Demo()

    //以下两个都指向原型对象
    console.log(Demo.prototype);//显示原型属性

    console.log(d.__proto__);//隐式原型属性

    console.log(Demo.prototype === d.__proto__);

    //程序员通过显示原型属性操作原型对象，追加一个x属性，值为99
    Demo.prototype.x = 99

    console.log('@', d);*/
</script>
</html>

2.3 单文件组件

定义：一个文件中只包含一个组件。
1.一个.vue 文件的组成(3 个部分):
（1） 模板页面

<template>
页面模板
</template>

（2）JS 模块对象

<script>
export default {
data() {return {}}, methods: {}, computed: {}, components: {}
}
</script>

（3） 样式

<style>
样式定义
</style>
  1. 基本使用：
    （1）引入组件
    （2）映射成标签
    （3）使用组件标签

School.vue组件

<template>
    <div class="demo">
        <h2>学校名称：{{schoolName}}</h2>
        <h2>学校地址：{{address}}</h2>
         <button @click="showName">点我提示学校名</button>
    </div>
</template>

<script>
    /* 组件的交互相关的代码（数据、方法等等)*/
    export default {
        name: 'School',
        data(){
            return {
                schoolName: '西安文理',
                address:'西安雁塔'
            }
        },
        methods: {
            showName(){
                alert(this.schoolName)
            }
        }
    }
    
</script>

<style>
    /*组件的样式*/
    .demo{
        background-color: orange;
    }
</style>

App.vue（汇总所有的组件）

<template>
  <div>
    <School></School>
  </div>
</template>

<script>
    //引入组件
    import School from './School'
    export default {
        name: 'App',
        components: {
            School,
        }
    }
</script>

<style>

</style>

main.js（创建Vue实例并且指明为哪个容器服务）

import App from './App.vue'

new Vue({
    el: '#root',
    comments: {
        App
    }
})

index.js

<!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="root">
        <App></App>
    </div>
    <script type="text/javascript" src="../js/vue.js"></script>
    //先让模板出来，再引入 main.js
    <script type="text/javascript" src="./main.js"></script>
</body>
</html>

这里运行会报错，因为.vue文件浏览器不能直接运行，import语句浏览器不认识。
需要把以上代码放入到脚手架上才能运行。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/423331.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Linux搭建Web服务器（二）——Web Server 与 HTTP

Linux搭建Web服务器（二）——Web Server 与 HTTP

目录 0x01 Web Server 静态网络服务器&#xff08;static web server&#xff09; 动态网络服务器&#xff08;dynamic web server&#xff09; 0x02 HTTP协议 HTTP概述 HTTP工作原理 HTTP请求报文格式 HTTP响应报文格式 0x01 Web Server 一个Web Server就是一个服务器…
阅读更多...
我们要被淘汰了?从科技变革看＂ChatGPT＂与＂无代码开发＂

我们要被淘汰了?从科技变革看＂ChatGPT＂与＂无代码开发＂

现在只要一上网&#xff0c;就能看见GPT都在说“好厉害”、“太牛了”、“新技术要诞生了”、“我们人类要被淘汰了”之类的话题。但是这伟大的技术变革到底给我们带来了什么呢&#xff1f;答案好像又比较模糊。现在ChatGPT的代写、问答&#xff0c;以及开始做的搜索、办公是目…
阅读更多...
sql查询语句-01

sql查询语句-01

1.单表查询 ◆限制显示结果 使用limit限制显示的行数&#xff0c;分页函数limit m,n,从m1行开始显示n条记录 例&#xff1a;查询选修课程成绩排在前5的学生的学号和成绩。 select sno,score from SCorder by score desc limit 5;limit 1,3 零是第一条 ◆汇总数据(聚集函数&…
阅读更多...
coinex06 // 前端数据 -＞ ringbuffer -＞ cpu

coinex06 // 前端数据 -＞ ringbuffer -＞ cpu

目录 0. 逻辑树 1 exchange-service 发送消息 1.1 exchange-service 添加依赖 1.2. yml配置文件 1.3. Source 1.4. 配置类 1.5. 发送消息到撮合引擎 service -> impl -> EntrustOrderServiceImpl 1.6. recket-server:8080 2. match-server 接收数据 2.1 数据转…
阅读更多...
【SQL 必知必会】- 第十七课 创建和操纵表

【SQL 必知必会】- 第十七课 创建和操纵表

目录 17.1 创建表 17.1.1 表创建基础 替换现有的表 17.1.2 使用NULL值 主键和NULL 值 理解NULL 17.1.3 指定默认值 使用DEFAULT 而不是NULL 值 17.2 更新表 小心使用ALTER TABLE 17.3 删除表 使用关系规则防止意外删除 17.4 重命名表 17.5 小结 这一课讲授创建、更改和删除…
阅读更多...
【MyBatis Plus】002 -- 通用CRUD（插入、更新、删除、查询）

【MyBatis Plus】002 -- 通用CRUD（插入、更新、删除、查询）

目录 3、通用CRUD 3.1 插入操作 3.1.1 方法定义 3.1.2 测试用例 3.1.3 测试 3.1.4 TableField 3.2 更新操作 3.2.1 根据id更新 3.2.2 根据条件更新 3.3 删除操作 3.3.1 根据id删除&#xff08;deleteById&#xff09; 3.3.2 根据Map删除数据&#xff08;deleteByMap&#xff09…
阅读更多...
程序员必备技巧：Git 和 GitHub 中高效地将单个文件还原为特定提交

程序员必备技巧：Git 和 GitHub 中高效地将单个文件还原为特定提交

Git 和 GitHub 用于存储您的旧代码&#xff0c;允许您在出现问题时回滚并安全地恢复以前的准确代码。 与其他开发人员协作时&#xff0c;了解如何将单个文件恢复为特定提交也变得至关重要。这是因为&#xff0c;在处理某个功能时&#xff0c;您可能需要修改不相关的文件来测试…
阅读更多...
Cursor编程初体验，搭载GPT-4大模型，你的AI助手，自然语言编程来了

Cursor编程初体验，搭载GPT-4大模型，你的AI助手，自然语言编程来了

背景 这两天体验了下最新生产力工具Cursor&#xff0c;基于最新的 GPT-4 大模型&#xff0c;目前免费&#xff0c;国内可访问&#xff0c;不限次数&#xff0c;跨平台&#xff0c;你确定不来体验一把&#xff1f;官方的 Slogan &#xff1a; Build Software. Fast. Write, edi…
阅读更多...
【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )

【CSS】课程网站 Banner 制作 ② ( Banner 栏版心盒子测量 | Banner 版心盒子模型左侧导航栏代码示例 )

文章目录一、Banner 栏版心盒子测量1、测量版心元素尺寸2、课程表测量二、Banner 版心盒子模型左侧导航栏代码示例1、HTML 标签结构2、CSS 样式3、展示效果一、Banner 栏版心盒子测量 1、测量版心元素尺寸 拉四条辅助线 , 将版心包起来 , 可以测量 Banner 条版心的尺寸为 1200 …
阅读更多...
Nginx网站服务详解（第二部分：Nginx服务的主配置文件 ——nginx.conf）

Nginx网站服务详解（第二部分：Nginx服务的主配置文件 ——nginx.conf）

1. 全局配置的六个模块简介 全局块&#xff1a;全局配置&#xff0c;对全局生效&#xff1b;events块&#xff1a;配置影响 Nginx 服务器与用户的网络连接&#xff1b;http块&#xff1a;配置代理&#xff0c;缓存&#xff0c;日志定义等绝大多数功能和第三方模块的配置&…
阅读更多...
SLBR通过自校准的定位和背景细化来去除可见的水印

SLBR通过自校准的定位和背景细化来去除可见的水印

一、简要介绍 本文简要介绍了论文“Visible Watermark Removal via Self-calibrated Localization and Background Refinement ”的相关工作。在图像上叠加可见的水印&#xff0c;为解决版权问题提供了一种强大的武器。现代的水印去除方法可以同时进行水印定位和背景恢复&#…
阅读更多...
C++ 实现 Matlab 的 lp2lp 函数

C++ 实现 Matlab 的 lp2lp 函数

文章目录1. matlab 的 lp2lp 函数的作用2. matlab 的 lp2lp 函数的使用方法3. C 实现3.1 complex.h 文件3.2 lp2lp.h 文件4. 测试结果4.1 测试文件4.2 测试3阶的情况4.3 测试9阶的情况1. matlab 的 lp2lp 函数的作用 去归一化 H(s) 的分母 2. matlab 的 lp2lp 函数的使用方法…
阅读更多...
人脸识别经典网络-MTCNN（含Python源码实现）

人脸识别经典网络-MTCNN（含Python源码实现）

人脸检测-mtcnn 本文参加新星计划人工智能赛道&#xff1a;https://bbs.csdn.net/topics/613989052 文章目录人脸检测-mtcnn1. 人脸检测1.1 人脸检测概述1.2 人脸检测的难点1.3 人脸检测的应用场景2. mtcnn2.1 mtcnn概述2.2 mtcnn的网络结构2.3 图像金字塔2.4 P-Net2.5 R-Net2…
阅读更多...
为什么说过早优化是万恶之源？

为什么说过早优化是万恶之源？

Donald Knuth&#xff08;高德纳&#xff09;是一位计算机科学界的著名学者和计算机程序设计的先驱之一。他被誉为计算机科学的“圣经”《计算机程序设计艺术》的作者&#xff0c;提出了著名的“大O符号”来描述算法的时间复杂度和空间复杂度&#xff0c;开发了TeX系统用于排版…
阅读更多...
开启数字新时代，5G-Advanced加速带入现实！

开启数字新时代，5G-Advanced加速带入现实！

在过去的这些年里&#xff0c;我们亲眼见证了5G的崛起。据GSMA&GSA统计&#xff0c;截至2022年12月&#xff0c;全球共部署了超过240张5G商用网络&#xff0c;5G用户超过10亿。在韩国、瑞士、芬兰等地&#xff0c;5G用户渗透率已超过30%。中国的5G网络建设更是独领风骚。截…
阅读更多...
形式语言与自动机总结---上下文无关文法(CFG)

形式语言与自动机总结---上下文无关文法(CFG)

第5章上下文无关文法: 设计文法: 做题的时候发现了一个正则表达式到文法的算法 R规则 根据正则式推导右线性文法_右线性文法表达ab*_Pluto 的博客-CSDN博客 举例 设计文法的关键在于理解递归性,文法是一个迭代器 1.The set {| i ≠ j or j ≠ k}, that is, the set of st…
阅读更多...
AIGC时代，分享11款超实用AI生成内容检测工具

AIGC时代，分享11款超实用AI生成内容检测工具

前往未来百科查看全部AI内容检测工具箱 一、AI 内容检测器 在数字内容创作的世界中&#xff0c;高质量的内容对至关重要。但随着创建的内容量不断增加&#xff0c;确保内容是原创的、高质量的非常具有挑战性。 AI 内容检测器指的是一种利用人工智能技术来自动化审核和识别不当…
阅读更多...
进程优先级

进程优先级

目录&#xff1a; 1.进程优先级的概念 2.查看进程优先级的方案 3.linux当中进程的优先级共有40个级别 4.对于进程的其它概念 ---------------------------------------------------------------------------------------------------------------------- 1.进程优先级的概念 为…
阅读更多...
Talk预告 | ICLR‘23 斯坦福大学计算机系博士后吴泰霖：学习可控的自适应多分辨率物理仿真

Talk预告 | ICLR‘23 斯坦福大学计算机系博士后吴泰霖：学习可控的自适应多分辨率物理仿真

本期为TechBeat人工智能社区第478期线上Talk&#xff01; 北京时间3月8日(周三)20:00&#xff0c;斯坦福大学计算机系博士后——吴泰霖的Talk将准时在TechBeat人工智能社区开播&#xff01; 他与大家分享的主题是: “学习可控的自适应多分辨率物理仿真”&#xff0c;届时将分…
阅读更多...
灌区泵站及闸门控制自动化系统

灌区泵站及闸门控制自动化系统

根据灌区泵站及闸门控制现状&#xff0c;利用智能终端与互联网相结合方法&#xff0c;实施取水、输水、供水、灌溉、排水、防洪和水资源管理等自动控制系统&#xff0c;实现骨干渠道灌排闸门现场及远程自动控制和远程监测监视&#xff0c;达到计划配水、精准灌溉&#xff0c;高…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023