Vue 2.0-＞3.0学习笔记（第二章 Vue组件化编程）

已于 2024-09-28 19:48:34 修改
阅读量851 收藏 27
点赞数 36
文章标签： vue.js 学习 笔记 前端
于 2024-09-25 20:34:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/PNPYY/article/details/142523491
版权

Vue 2.0-＞3.0学习笔记（第二章 Vue组件化编程）

1. 非单文件组件

1.1 基本使用

笔记

Vue中使用组件的三大步骤：
  一、定义组件（创建组件）
  二、注册组件
  三、使用组件（写组件标签）

一、如何定义一个组件？
    使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别。
区别如下：

  1. el不要写，为什么？ ———— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
  2. data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
    备注：使用template可以配置组件结构。

二、如何注册组件？

  1. 局部注册：靠new Vue的时候传入components选项
  2. 全局注册：靠Vue.component(‘组件名’,组件)

三、编写组件标签：
  <school></school>

传统方式编写应用
传统方式编写应用
使用组件方式编写应用
使用组件方式编写应用

组件的定义
组件的定义

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基本使用</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.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({
        //el:'#root'，//一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
        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:'max',
                age:18
            }
        }
    })

    //第一步：创建hello组件
    const hello = Vue.extend({
        template:`
            <div>
                <h2>你好啊！{{name}}</h2>
            </div>
        `,
        data(){
            return{
                name:'Tom'
            }
        }
    })

    //全局注册组件
    Vue.component('hello',hello)

    //创建VM
    new Vue({
        el:'#root', 
        //第二步：注册组件（局部注册）
        data:{
            msg:'你好啊！',
        },
        components:{
            school,
            student,
        }
    })

    new Vue({
        el:'#root2'
    })
</script>
</html>

1.2 几个注意点

笔记

几个注意点：

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

  2. 关于组件标签：
      第一种写法：<school></school>
      第二种写法：<school/>
      备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>几个注意点</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>{{msg}}</h2>
        <school></school>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
    
    //定义组件
    const s = Vue.extend({
        name:'max',
        template:`
            <div>
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
            </div>
        `,
        data(){
            return{
                name:'华美实验',
                address:'广东揭阳',
            }
        }
    })

        new Vue({
            el:'#root', 
            data: { 
                msg:'欢迎学习Vue！'
            },
            components:{
                school:s
            }
        })
</script>
</html>

1.3 组件的嵌套

笔记 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件的嵌套</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
    
    //定义student组件
    const student = Vue.extend({
        template:`
            <div>
                <h2>学生名称：{{studentName}}</h2>
                <h2>学生年龄：{{age}}</h2>
            </div>
        `,
        data(){
            return{
                studentName:'max',
                age:18
            }
        }
    })

    //定义school组件
    const school = Vue.extend({
        //el:'#root'，//一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
        name:'school',
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <student></student>
            </div>
        `,
        data(){
            return{
                schoolName:'华美实验',
                address:'广东揭阳',
            }
        },
        //注册组件（局部）
        components:{
            student,
        }
    })

    //定义hello组件
    const hello = Vue.extend({
        template:`
            <h1>{{msg}}</h1>
        `,
        data(){
            return{
                msg:'欢迎学习Vue！'
            }
        }

    })

    //定义app组件
    const app = Vue.extend({
        template:`
            <div>
                <hello></hello>
                <school></school>
            </div>
        `,
        components:{
            school,
            hello
        }
    })

    new Vue({
        template:'<app></app>',
        el:'#root', 
        //注册组件（局部）
        components:{
            app
        }
    })

</script>
</html>

1.4 VueComponent

笔记

关于VueComponent：

  1. school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
  2. 我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school1组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
  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。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>VueComponent</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <school></school>
        <hello></hello>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示
    
    //定义school组件
    const school = Vue.extend({
        //el:'#root'，//一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
        name:'school',
        template:`
            <div>
                <h2>学校名称：{{name}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showName">点我提示学校名</button>
            </div>
        `,
        data(){
            return{
                name:'华美实验',
                address:'广东揭阳',
            }
        },
        methods: {
            showName(){
                console.log('showName',this)
            }
        },

    })

    const test = Vue.extend({
        template:`<span>max</span>`,
    })

    const hello = Vue.extend({
        template:`
            <div>
                <h2>{{msg}}</h2>
                <test></test>
            </div>
        `,
        data(){
            return{
                msg:'你好啊！'
            }
        },
        components:{
            test
        }
    })

    console.log('@',school)
    console.log('#',hello)    

    const vm = new Vue({
        el:'#root', 
        components:{
            school,
            hello
        }
    })
</script>
</html>

1.5 一个重要的内置关系

笔记

  1. 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype
  2. 为什么要有这个关系：让组件实例对象（vc）可以访问到Vue原型上的属性、方法。

分析Vue与VueComponent的关系
分析Vue与VueComponent的关系

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>一个重要的内置关系</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.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({
        //el:'#root'，//一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
        name:'school',
        template:`
            <div>
                <h2>学校名称：{{schoolName}}</h2>
                <h2>学校地址：{{address}}</h2>
                <button @click="showX">点我输出X</button>
            </div>
        `,
        data(){
            return{
                schoolName:'华美实验',
                address:'广东揭阳',
            }
        },
        methods: {
            showX(){
                console.log(this.x)
            }
        },
    })

        const vm = new Vue({
        el:'#root', 
        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. 单文件组件

笔记

  • 可安装插件Vetur（作者：Ping Wu），提供各类快捷代码输入，例如（输入"<v"，可以提供初始标准的vue组件模板）
  • 引入组件：import 引入名（自取）from ‘组件文件（Vue）路径’，例如：import School from ‘./School.vue’;
  • 导出：export default {}
  • 注意：组件文件名应与name值一致，否则在Vue开发者工具中会显示name值，而不是组件文件名，易被修改，造成混淆。且文件名命名应为驼峰大写形式，例如：MySchool.vue

App.vue

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

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

    export default {
        name:'App',
        template:`<App></App>`,
        components:{
            School,
            Student
        }
    }
</script>

<style>

</style>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>练习一下单文件组件的语法</title>
</head>
<body>
    <!-- 准备一个容器 -->
    <div id="root"></div>
    <!-- <script type="text/javascript" src="../js/vue.js"></script> -->
    <!-- <script type="text/javascript" src="main.js"></script> -->
</body>
</html>

main.js

import App from "./App.vue";

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

School.vue

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

<script>
    // 组件交互相关的代码（数据、方法等等）
    export default{
        name:'School',
        data(){
            return{
                name:'max',
                address:'广东揭阳',
            }
        },
        methods: {
            showName(){
                alert(this.name)
            }
        },
    }
</script>
<style>
    /* 组件的样式 */
    .demo{
        background-color: orange;
    }
</style>

Student.vue

<template>
    <div>
        <h2>学生姓名：{{name}}</h2>
        <h2>学生年龄：{{age}}</h2>
    </div>
</template>

<script>
    // 组件交互相关的代码（数据、方法等等）
    export default{
        name:'Student',
        data(){
            return{
                name:'max',
                age:18,
            }
        },
    }
</script>
<style>

</style>
  • 本文仅作个人学习笔记使用，无商业用途。
  • 上述内容笔记大部分摘自“B站尚硅谷”
  • 如若转载，请先声明
普宁彭于晏
关注
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （一）
weixin_44566194的博客
12-08 3173
本文为总结尚硅谷Vue2.0+Vue3.0 的学习笔记系列的第一章——Vue的核心，包含Vue简介、模板语法、数据绑定、MVVM模型、事件处理，计算属性与监视、class与style绑定、列表渲染、过滤器、内置指定和自定义指令以及Vue生命周期等知识点
Vue2-Vue3.0学习笔记（2021年黑马程序员最新视频）
m0_67402588的博客
03-09 1978
Vue 介绍 什么是 vue ？ 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 只有把上面老师罗列的内容掌握以后，才有开发 vue 项目的能力！ vue 的两个特性 数据驱动视图： 数据的变化会驱动视图自动更新 好处：程序员只管把数据维护好，那么页面
vue插件库.doc
09-10
vue插件库 的的一些详细应用介绍，大家不妨都看看，希望对大的工作和学 习有所帮助
vue中要用到的插件 和vscode中要下的插件
weixin_42446516的博客
06-24 2914
vue要用到的插件 1.vue-router: 页面路由，用于做单页面应用(SPA)。 2.vuex: 数据状态管理。 3.vue-navigation: 记录路由并缓存页面，像原生APP导航一样。 4.vconsole: 移动端调试利器 5. axios: 一个很好的ajax封装集 6. fastclick: 为了能够立即响应用户的点击事件，解决移动端click 300ms延迟，才有了FastC...
VUE常用插件库总结
热门推荐
诗水人间
10-11 13万+
一、UI组件及框架 element- 饿了么出品的Vue2的web UI工具套件 mint-ui- Vue 2的移动UI元素 iview- 基于 Vuejs 的开源 UI 组件库 Keen-UI- 轻量级的基本UI组件合集 vue-material- 通过Vue Material和Vue 2建立精美的app应用 muse-ui- ...
vue插件库
weixin_42018524的博客
12-23 271
https://chenxuan0000.github.io/component-document/index_prod.html#/component/svg-bar-default(在线演示)版权声明：本文为CSDN博主「qq_25462315」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。原文链接：https://blog.csdn.net/qq_25462315/article/details/83996945。2.一个简单的基于vue.js的无缝滚动。
vue插件库整理
qq_58061710的博客
09-21 451
插件整理
vue3学习笔记，亲测有效，持续更新
06-14
这篇学习笔记将逐步介绍如何从零开始搭建一个 Vue3 项目，以及在开发过程中遇到的关键概念和功能。 首先，Vue3 的安装是通过命令行工具 CMD 来完成的。在你希望创建项目的位置打开终端，然后使用 Vue CLI 或 Vite ...
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （三）
weixin_44566194的博客
12-24 928
本文整理了B站尚硅谷Vue2.0 + Vue3.0 入门到精通教程视频第三章 Vue脚手架的学习内容笔记，包含初始化脚手架、ref与props属性、混入、插件、自定义事件、全局事件总线、消息订阅与发布、过渡与动画以及TodoList案例实操等内容。
尚硅谷 Vue2.0 + Vue3.0 入门到精通教程学习笔记 （五）
weixin_44566194的博客
01-10 430
本文整理了B站尚硅谷Vue2.0 + Vue3.0 入门到精通教程视频第五章的学习内容的笔记，包括Vuex 核心概念和相应的API、VUex 工作原理、多组件数据共享、模块化+命名空间等知识。
Vue 插件集合
gyueh的博客
04-14 1003
UI组件 element - 饿了么出品的Vue2的web UI工具套件 Vux - 基于Vue和WeUI的组件库 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量级的基本UI组件合集 vue-material - 通过Vue Material和Vue 2建立精美的app应用 muse-ui - 三端样式一致的响应式 U...
VUE常用插件库
beidingtp05370的博客
08-08 480
一、UI组件及框架element- 饿了么出品的Vue2的web UI工具套件mint-ui- Vue 2的移动UI元素iview- 基于 Vuejs 的开源 UI 组件库Keen-UI- 轻量级的基本UI组件合集vue-material- 通过Vue Material和Vue 2建立精美的app应用muse-ui- 三端样式一致的响应式 UI 库vuetify...
Vue常用插件库
weixin_48618258的博客
01-29 634
前端Vue常用插件库
Vue的组件库大全
最新发布
我就是我是好孩子的博客
05-07 4125
它是由 Mozilla 团队开发的，建立在 HTML、CSS 和 JavaScript 的基础上，通过简单的标记语言和组件系统，使开发者能够轻松创建和展示交互式的 VR 和 AR 内容。
vue插件合集
Winsom1的博客
11-17 780
UI库/相关工具/可视化/生态全分享
Vue——插件
hulin的博客
04-30 1069
Vue的插件
史上最全的vue插件库
qq_33262275的博客
08-18 1万+
无意间发现的一个整个内容，超级强大记录下来！原文链接 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 UI组件 element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuejs 的开源 UI 组件库 mint-ui ★6253 - Vue 2的移动UI元素 muse-ui ★3705 - 三端样式一致的响应式 UI 库 vue-material ★3328 - 通
Vue2.0与Vue3.0入门指南：组件化与数据绑定详解
本学习笔记主要涵盖了Vue 2.0和Vue 3.0的核心概念，从基础入门到深入理解。 首先，Vue被定义为一种**渐进式框架**，这意味着它允许开发者根据项目需求逐步引入和使用其特性，而不是一次性全部采用。Vue的特点在于：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值