Vue组件入门

最新推荐文章于 2024-06-15 14:41:39 发布
最新推荐文章于 2024-06-15 14:41:39 发布
阅读量133 收藏
点赞数
分类专栏： Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hiyiin/article/details/125444772
版权

1 模块与组件、模块化与组件化

1.1 模块

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

1.2 组件

  1. 理解：用来实现局部(特定)功能效果的代码合集(html/css/js/image…)
  2. 为什么使用组件：一个界面的功能很复杂
  3. 组件的作用：复用编码，简化项目编码，提高运行效率

1.3 模块化

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

1.4 组件化

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

2 组件的使用

2.1 组件的种类

分为非单文件组件和单文件组件

  • 非单文件组件：一个文件中包含有多个组件
  • 单文件组件：一个文件中只包含一个组件

2.2 组件使用的三个步骤

  1. 定义组件（创建组件）
  2. 注册组件
  3. 使用组件（写组件标签）

2.3 非单文件组件

2.3.1 定义非单文件组件

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的哪个options几乎一样，但也有区别：

  • el不用写，因为最终所有的组件都要经过一个vm的管理，由vm中的el决定服务于哪个容器。
  • data必须写成函数，避免组件被复用时数据存在引用关系。

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

2.3.2 注册非单文件组件

  • 局部注册：靠new Vue时传入components选项
  • 全局注册：考Vue.conmponent(“组件名”,组件)

2.3.3 使用组件

直接在html页面中的Vue服务的容器中编写组件标签

例如：<school></school>""

2.3.4 测试代码

<!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>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 编写组件标签 -->
        <school></school>
        <hr>
        <student></student>
    </div>
</body>
<script>
    Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
    // 创建school组件
    const school = Vue.extend({
        // el:'#app',
        name:"school",
        template:`
            <div>
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
            </div>
        `,
        data(){
            return {
                name:"ycu",
                address:"江西宜春",
            }
        },
    })
    // 创建学生组件
    const student = Vue.extend({
        // el:'#app',
        name:"student",
        template:`
            <div>
                <h2>学生姓名：{{name}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data(){
            return {
                name:"李四",
                age:21,
            }
        },
    })
    Vue.component('student',student);
    const vm = new Vue({
        el:'#app',
        // 局部注册组件
        components:{
            school,
        },
        mounted() {
            
        },
    });
</script>
</html>

2.4 创建组件需要注意的地方

2.4.1 组件名

  • 一个单词组成：
    • 第一种写法（首字母小写）：school
    • 第二种写法（首字母大写）：School
  • 多个单词组成：
    • 第一种写法（kebab-case命名）：my-school
    • 第二种写法（CamelCase命名）：MySchool（需要脚手架支持）
  • 注意
    • 组件名尽可能回避HTML中已有的元素，例如h2，H2都不行
    • 可以使用name配置项指定组件在开发者工具中呈现的名字

2.4.2 组件标签

  • 第一种写法：<school></school>
  • 第二种写法：<school>或<school/>
  • 注意：不使用脚手架时，<school/>会导致后续组件不能渲染

2.4.3 创建组件的简写方式

const school = Vue.extend(options)可简写为const school = options

2.4.4 测试代码

<!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>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <school></school>
        <School></School>
        <my-school></my-school>
        <MySchool></MySchool>
        <school/>
    </div>
</body>
<script>
    const school = Vue.extend({
        name:"school",
        template:`
            <div>
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
            </div>
        `,
        data() {
            return {
                name:"ycu",
                address:"江西宜春"
            }
        },
    })

    Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
    const vm = new Vue({
        el:'#app',
        data(){
            return {
                msg:"欢迎学习Vue"
            }
        },
        methods:{
            
        },
        mounted() {
            
        },
        components: {
            school,
            School:school,
            "my-school":school,
            MySchool:school,
        },
    });
</script>
</html>

2.5 组件的嵌套

测试代码

<!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>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <!-- 编写组件标签 -->
        <app></app>
    </div>
</body>
<script>
    Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
    // 创建学生组件
    const student = Vue.extend({
        name:"student",
        // el:'#app',
        template:`
            <div>
                <h2>学生姓名：{{name}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data(){
            return {
                name:"李四",
                age:21,
            }
        },
    })

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

    // 创建school组件
    const school = Vue.extend({
        // el:'#app',
        name:"school",
        template:`
            <div>
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
                <student></student>
            </div>
        `,
        data(){
            return {
                name:"ycu",
                address:"江西宜春",
            }
        },
        // 局部注册组件
        components:{
            student,
        }
    })

    // 创建hello组件
    const hello = Vue.extend({
        name:"hello",
        template:`
            <h2>{{msg}}</h2>
        `,
        data() {
            return {
                msg:"Vue什么牛马"
            }
        },
    })

    // 创建app组件
    const app = Vue.extend({
        name:"app",
        template:`
            <div>
                <hello></hello>
                <school></school>
            </div>
        `,
        components:{
            school,
            hello
        }
    })
    
    const vm = new Vue({
        el:'#app',
        data() {
            return {
                msg:"欢迎学习Vue"
            }
        },
        // 局部注册组件
        components:{
            app
        },
        mounted() {
            
        },
    });
</script>
</html>

2.6 VueComponent

2.6.1 定义

VueComponent是一个构造函数，每一个的Vue组件的实例对象都是通过这个构造函数创建的。

2.6.2 验证VueComponent

<!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>VueComponent</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <school></school>
        <hello></hello>
    </div>
</body>
<script>
    Vue.config.productionTip = false; //阻止vue在启动时生成生产提示
    // 创建school组件
    const school = Vue.extend({
        // el:'#app',
        name:"school",
        template:`
            <div>
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>
            </div>
        `,
        data(){
            return {
                name:"ycu",
                address:"江西宜春",
            }
        },
        methods:{
            showName(){
                console.log("showName",this);
            }
        }
    })

    // 创建hello组件
    const hello = Vue.extend({
        template:`
            <h2>{{msg}}</h2>
        `,
        data() {
            return {
                msg:"你好"
            }
        },
    })
    console.log('@',school);
    console.log('#',hello);
    console.log(school===hello);

    school.a = 99;
    console.log('@',school.a);
    console.log('#',hello.a);
    const vm = new Vue({
        el:'#app',
        data(){
            return {
                
            }
        },
        methods:{
            
        },
        components: {
            school,
            hello
        },
        mounted() {
            
        },
    });
</script>
</html>

2.6.3 关于VueComponent

  1. school组件本质是一个名为VueComponent的构造函数，且并不是程序员定义的，是Vue.extend生成的。

  2. 我们只需要些<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行了new VueComponent(options)。

  3. **特别注意：**每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

  4. 关于this的指向：

    • 组件配置中

      • data函数、methods中的函数、watch中的函数、computed中的函数，他们的this均是VueComponent实例对象。

    • new Vue(options)配置中

      • data函数、methods中的函数、watch中的函数、computed中的函数，他们的this均是Vue实例对象。

  5. VueComponent的实例对象，简称vc（亦可称之为：组件实例对象），Vue的实例对象，简称vm

2.7 分析Vue与VueComponent的内置关系

详见尚硅谷Vue视频

2.8 单文件组件

单文件组件需要依靠webpack或Vue脚手架才能运行。

2.8.1语法

html中的写法

// 创建学生组件
const student = Vue.extend({
    name:"student",
    template:`
        <div>
            <h2>学生姓名：{{name}}</h2>
            <h2>学生年龄：{{age}}</h2>
        </div>
    `,
    data(){
        return {
            name:"李四",
            age:21,
        }
    },
})

student.vue

<template>
    <div class="demo">
        <h2>学生姓名：{{ name }}</h2>
        <h2>学生年龄：{{ age }}</h2>
    </div>
</template>
<script>
export default {
    name: "Student",
    data() {
        return {
            name: "李四",
            age: 21,
        }
    },
}
</script>
<style>
.demo {
    background-color: green;
}
</style>

2.8.2 单文件组件的嵌套

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

<script>
import School from './School.vue';
import Student from './Student.vue';
// 引入组件

export default {
    name: "App",
    components: { School, Student }
}
</script>

<style>
</style>
Hiyiin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3 入门
x94410891的博客
07-02 1339
vue3 Vue是一套用于构建用户界面的渐进式框架。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。目前最新版本是Vue3.x。 Vue3 支持 vue2 的大多数特性 更好的支持 Typescript 性能提升 打包大小减少 41% 初次渲染快 55%, 更新渲染快 133% 内存减少 54% 使用 Proxy 代替 define
VUE组件入门
04-10
VUE组件入门，很基础的ppt，入门的同学可以看下哦！！
Vue组件（一）Vue组件基础_Vue组件入门
天马3798
09-29 588
组件允许我们将UI划分为独立的、可重用的部分，并且可以对每个部分组件进行单独思考。在实际应用中，组件常常被组织层层嵌套的树结构。HTML，JS，CSS 代码都可以独立的封装。新版vue框架，命名组件默认需要两个单词。Vue 组件理解： 封装，重用。.vue是单文件组件。
Vue组件入门（单文件组件）
qq_43776195的博客
03-01 1240
文章目录Vue组件入门（单文件组件）前言单文件组成单文件开发1、创建组件2、编写主入口文件 Vue组件入门（单文件组件） 前言 本博客是对以下视频教程做的一个笔记总结，可作为参考，不喜勿喷。 2021最新Vue迅速上手教程丨vue3.0入门到精通 单文件组件需要安装node.js才能运行。 单文件组成 components：存放组件 APP.vue：统一管理其他组件的组件（父组件） main.js：主入口文件 单文件开发 1、创建组件 一个组件一般有三种大标签。 template：编写html代码 sc
一小时入门vue组件（建议收藏）
热门推荐
安之ccy的博客
06-06 2万+
初识vue组件应用，包括：1.实例化多个vue对象；2.全局组件与局部组件；3.父向子传值/传引用(props)；4.子向父事件传值($emit)；5.使用脚手架创建项目并运用组件and传值的案例。欢迎小伙伴们一起交流学习~
六十分钟入门vue组件（建议收藏）
m0_64875238的博客
10-16 1281
六十分钟入门vue组件（建议收藏）
Vue.js基础知识解析：Vue组件入门
Why_does_it_work的博客
07-12 754
Vue的组件化开发是一种强大的方式，可以帮助我们构建模块化、可复用的应用程序。本文介绍了Vue组件概念的理解以及如何创建和使用组件。我们讨论了全局注册和局部注册组件的方法，并展示了具体的代码示例。通过合理地拆分应用程序为多个组件，我们可以提高代码的可维护性和可重用性。组件能够封装相关的HTML、CSS和JavaScript代码，实现模块化的开发，同时也提供了灵活的通信机制，使得组件之间可以方便地共享数据和事件。
Vue组件入门：倒计时
yeyeye0525的博客
12-06 3442
本文首发于：https://github.com/bigo-frontend/blog/ 欢迎关注、转载。 一、前言 入职的第一个需求是跟着一位前端大佬一起完成的一个活动项目。 由于是一起开发，当然不会放过阅读大佬的代码的机会。 因为我的页面中需要使用到倒计时功能，发现大佬的已经写了个现成的倒计时组件，于是直接就拿过来用了。 传个参数就实现了功能的感觉真是太棒了。项目完成后，就膜拜了一下大佬的倒计时组件的代码。真是让我学到了不少。列举如下： 计时器为什么要用setTimeout而不用setInterva.
10vue组件入门_如何写一个最简单的vue组件_vue组件的作用是啥
jiang7701037的博客
03-01 4496
一、vue组件的概念：       组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义标签，所有的 Vue 组件同时也都是 Vue 的实例（对象）。commonJS，AMD，CMD是把JS逻辑进行模块化vue组件是把页面（html代码，CSS代码）进行模块化如下图所示，一个页面分四个部分，每个部分是个vue组...
Vue 基础入门
我的的博客哦
05-17 1万+
🔰Vue 是 一 套用于动态构建用户界面的渐进式JavaScript框架。🔰特点：采用组件化模式，提高代码复用率，且让代码更好维护。声明式编码，让编码人员无需直接操作DOM，提高开发效率。使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。
vue基础入门
weixin_58470558的博客
05-13 5850
vue基础、指令、过滤器、监听器、计算属性、vue-cli、vue组件
vue组件入门知识全梳理
01-18
声明一个局部组件，变量名首字母大写（为了和H5标签做区分），里面的内容和vue实例化对象的内容相似，但是不需要el，data必须是一个函数，函数返回一个对象 把组件挂载到入口文件的components对象中。 在入口文件...
vue组件实例解析
08-31
Tag组件其实是一个很小的组件，业务价值很低，主要用于Vue新手入门。主要实现Vue常用的父组件改变子组件的值，view改变model，model的变化反应到view上，事件的绑定等功能。下面跟着小编一起来看下吧
vue入门到精通
11-10
Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue ...另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
【Vue3】使用v-model实现父子组件通信（常用在组件封装规范中）
最新发布
qq_42582773的博客
06-15 180
父组件添加modelValue绑定数据且传递到子组件，然后绑定@update:modelValue事件接收子组件传过来的值子组件内部使用defineProps来接收父组件modelValue传过来的值，使用defineEmits自定义事件修改值然后触发父组件@update绑定的事件。
【Echarts系列】平滑折线面积图
kk爱闹
06-11 339
Vue版本以及脚本语言的选择各有不同，核心内容主要是option，重点关注该部分内容即可。为了节省后续开发学习成本，这个系列将记录我工作所用到的一些echarts图表。
vue初使用实例之笔记本
m0_72168336的博客
06-11 795
vue初使用实例之笔记本
Ant Design Vue 动态表头与数据填充教程
学习编程的小羊的博客
06-11 358
安装并引入 Ant Design Vue 组件库。准备动态表头和数据的状态。发起请求获取表头和数据。将获取到的表头和数据赋值给组件的状态。使用a-table组件渲染表格，并传入动态表头和数据。根据需要为表格添加样式。
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1262
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
vue canvas入门
09-08
欢迎来到 Vue Canvas 入门。Vue 是一个流行的 JavaScript 框架，而 Canvas 是一个 HTML5 元素，用于在网页上绘制图形。结合 Vue 和 Canvas，你可以创建动态的图形和交互性应用程序。下面是一个简单的入门示例。 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值