Vue学习笔记——Part2

最新推荐文章于 2024-04-21 16:09:33 发布

ElegantKurumi

最新推荐文章于 2024-04-21 16:09:33 发布

阅读量149

点赞数

文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/ElegantKurumi/article/details/120703076

版权

本文深入探讨Vue的组件化编程，包括非单文件组件的基本使用、注册与编写，强调组件名与标签的规范，以及组件实例的this指向。通过Vue.extend创建组件，并通过局部或全局注册使用。同时，讲解了VueComponent与Vue实例的关系，以及组件实例的属性和方法的访问。

摘要由CSDN通过智能技术生成

Vue学习笔记——Part2

二、Vue组件化编程

2.1 非单文件组件

2.1.1 基本使用

组件：实现应用中局部功能代码和资源的集合

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

一、定义组件(创建组件)
二、注册组件
三、使用组件(写组件标签)

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

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

二、如何注册组件？

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非单文件组件基本使用</title>
    <script type="text/javascript" src="../vue/vue.js"></script>
</head>
<body>
    <div id="root">
        <school></school>
        <hr>
        <student></student>
    </div>
    <script type="text/javascript">
        const school = Vue.extend({
            template:` 
                <div>
                    <h2>学校名称：{{schoolName}}</h2>
                    <h2>学校地址：{{address}}</h2>
                </div>
            `,
            data(){
                return {
                    schoolName:'北京工业大学',
                    address:'北京朝阳'
                }
            }
        })
        const student = Vue.extend({
            template:`
                <div>
                    <h2>学生姓名：{{studentName}}</h2>
                    <h2>学生年龄：{{age}}</h2>
                </div>
            `,
            data(){
                return {
                    studentName:'张三',
                    age:23 
                }
            }
        })
        new Vue({
            el:'#root',
            //注册组件（局部注册）
            components:{
                school:school,
                student,//简化写法
            }
        })
    </script>
</body>
</html>

2.1.2 注意点

关于组件名:
     一个单词组成：
          第一种写法(首字母小写)：school
          第二种写法(首字母大写)：School
     多个单词组成：
          第一种写法(kebab-case命名)：my-school
          第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

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

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

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

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

2.1.3 ViewComponent

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