vue技术

最新推荐文章于 2022-08-07 21:42:52 发布

画个圈圈诅咒你 yebo

最新推荐文章于 2022-08-07 21:42:52 发布

阅读量540

点赞数

分类专栏：笔记学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_53950248/article/details/122284753

版权

笔记同时被 2 个专栏收录

71 篇文章 0 订阅

订阅专栏

学习

70 篇文章 0 订阅

订阅专栏

本文深入探讨了Vue中的组件理解，包括模块化、组件化概念，详细阐述了非单文件组件和单文件组件的区别，并通过实例展示了组件的定义、注册和使用。重点讲解了组件的命名规范、标签编写，以及组件的嵌套和VueComponent构造函数的作用，强调了this在不同上下文中的指向。

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

对组件的理解

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

作用:复用编码，简化项目编码，提高运行效率

模块化

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

组件化

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

非单文件组件

一个文件中包含有n个组件

单文件组件

一个文件中只包含有1个组件

非单文件组件

实现代码1

<!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>
    <!-- 引入Vue -->
    <script type="text/javascript"src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>学校名称:{{schoolName}}</h2>
        <h2>学校地址:{{address}}</h2>
        <hr>
        <h2>学校姓名:{{studentName}}</h2>
        <h2>学校年龄:{{age}}</h2>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示

    new Vue({
        el:'#root',
        data:{
            schoolName:'尚硅谷',
            address:'北京昌平',
            studentName:'张三',
            age:18
        }
    })
</script>
</html>

运行效果

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

一、定义组件(创建组件)

二、注册组件

三、使用组件(写组件标签)

一、如何定义一个标签?

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

区别如下:

1.el不要写，为什么？——最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器

2.data必须写成函数，为什么？——避免组件被复用时，数据存在引用关系

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

二、如何注册组件

1、局部注册:靠new Vue的时候传入components选项

2、全局注册:靠Vue.component('组件名',组件)

三、编写组件标签

实现代码2(完整)

<!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>
    <!-- 引入Vue -->
    <script type="text/javascript"src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>{{msg}}</h1>
        <hr>
       <!-- 第三步:编写组件标签 -->
       <school></school>
       <hr>
       <student></student>
    </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>
        `,
        //el:'#root', 
        //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，,由vm决定服务
        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
            }
        }
    })
    const hello=Vue.extend({
        template:`
        <div>
            <h2>你好啊!{{name}}</h2>
            </div>
        `
    })
    //第二步:注册全局组件
    Vue.component('hello',hello)
    //创建vm
    new Vue({
        el:'#root',
        data:{
            msg:'你好啊!'
        },
        //第二步，注册组件(局部注册)
        components:{
            school,
            student
        }
    })
   /* function data(){
        return {
            a:1,
            b:2
        }
    }
    const x1=data()
    const x2=data()*/
</script>
</html>

运行效果

组件的几个注意点

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 http-equiv="X-UA-Compatible" content="IE=edge">
    <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">
        <h1>{{msg}}</h1>
        <my-school></my-school>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示

    //定义组件
    const s=Vue.extend({
        template:`
        <div>
            <h2>学校名称:{{name}}</h2>
            <h2>学校地址:{{address}}</h2>
            </div>
        `,
        data(){
            return {
                name:'尚硅谷',
                address:'北京'
            }
        }
    })
    new Vue({
        el:'#root',
        data:{
            msg:'欢迎学习Vue!'
        },
        components:{
            'my-school':s
        }
    })
</script>
</html>

运行效果

组件的嵌套

代码实现

<!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>
    <!-- 引入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({
        name:'student',
        template:`
        <div>
        <h2>学校姓名:{{studentName}}</h2>
        <h2>学校年龄:{{age}}</h2>
        </div>
        `,
        data(){
            return {
                name:'张三',
                address: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>
        <hello></hello>
        <school></school>
        </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组件的实例对象，

即Vue帮我们执行的:new VueComponent(options)

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

4.关于this指向:

(1)组件配置中:

data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是VueComponent实例对象

(2)new Vue()配置中

data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是Vue实例对象

5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）

vue的实例对象，以后简称vm

<!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>
    <!-- 引入Vue -->
    <script type="text/javascript"src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <hello></hello>
        <school></school>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false//阻止vue在启动时生成生产提示

           //定义school组件
           const school=Vue.extend({
        name:'school',
        template:`
        <div>
            <h2>学校名称:{{name}}</h2>
            <h2>学校地址:{{address}}</h2>
            <button @click='showName'>点我提示学校名</button>
            </div>
        `,
        data(){
            return {
                name:'尚硅谷',
                address:'北京'
            }
        },
        methods:{
         showName(){
            alert('showName',this)
        }  
        },
    })
       //定义hello组件
       const hello=Vue.extend({
        template:`<h2>{{msg}}</h2>`,
        data(){
            return {
                msg:'你好啊!'
            }
        }
    })

    school.a=99
    console.log('@',school)
    console.log('#',hello)
        //创建vm
        new Vue({
            el:'#root',
            components:{school}
        
    })
</script>
</html>

运行结果

画个圈圈诅咒你 yebo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue技术

对组件的理解组件的定义——实现应用中局部功能代码和资源的集合作用:复用编码，简化项目编码，提高运行效率模块化当应用中的js都以模块来编写的，那这个应用就是一个模块化的应用。组件化当应用中的功能都是多组件的方式来编写的，那这个应用就是一个组件化的应用。非单文件组件一个文件中包含有n个组件单文件组件一个文件中只包含有1个组件非单文件组件实现代码1<!DOCTYPE html><html lang="en">&...
复制链接

扫一扫