开发者社区> ArimaMisaki> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

一幅长文细学Vue(三)——组件基础(上)

简介: 在本文中,我们将学习什么是SPA,以及Vue中组件的基本使用。
+关注继续查看

3 组件基础(上)

摘要

​ 在本文中,我们将学习什么是SPA,以及Vue中组件的基本使用。

声明:为了文章的清爽性,在文章内部的代码演示中只会附上部分演示代码,main.js文件的代码通常不贴出,如果感兴趣可以前往代码仓库获取

作者:来自ArimaMisaki创作

[TOC]

3.1 SPA

3.1.1 单页面应用程序

说明:单页面应用程序(Single Page Application)简称SPA,即在Web网站中只有唯一的一个HTML页面,所有功能与交互都在一个页面内完成。

特点:所有功能局限于一个页面中,这就意味着如果想要做出切换页面的效果,就需要通过JS来动态变化HTML的内容,做出一种切换页面的假象。

优点

  • 良好用户体验
  • 良好的前后端工作分离
  • 减轻服务器压力

缺点

  • 首屏加载慢
  • 不利于SEO(搜索引擎优化),但可以使用SSR服务器端渲染


3.1.2 创建工程化的SPA项目

说明:Vue官方提供了两种快速创建工程化SPA项目的方式,即ViteVue-cli

区别

image-20220820225020973


3.1.3 Vite创建项目

创建项目

  1. 运行npm init vite-app
  2. 进入项目
  3. npm i安装所有依赖包
  4. npm run dev可执行脚本启动项目

项目结构

image-20220820225509580

运行流程:通过main.js将App.vue渲染到index.html的指定区域中。


3.1.4 Vite基本使用

说明:按照运行流程,我们应该做如下的几件事

  1. 在vue文件中编写模板结构,模板上采用html语法书写,用template标签括起
  2. 在index.html中预留一块区域给vue模板。常用div,并且用id指明模板名称,如app
  3. 在main.js中关联模板和html,书写如下:
//1 按需导入createApp函数
import { createApp } from "vue";

//2 导入组件
import App from './App.vue';

// 3 调用createApp函数,创建SPA应用实例
const app = createApp(App);

// 4 调用mount()把APP组件的模板结构渲染到指定的el区域中,这里我们渲染到index.html标签id为app的元素中
app.mount('#app');


3.2 组件

3.2.1 组件化开发

说明:从宏观来看,我们可以把可复用的结构封装为组件,然后在index.html上进行多次使用。从而方便项目的开发和维护。

vue组件化:vue是一个完全支持组件化开发的框架,vue中规定组件的后缀名为.vue

vue组件结构:vue的组件可以由三个节点组成

  • template:相当于html,是组件的模板结构
  • script:组件的js行为
  • style:组件的样式


3.2.2 组件结构

template:在vue3.x版本中,可以在该模板定义多个根节点,但在vue2.x版本中,仅支持定义一个根节点。

script:可以在script中定义行为,并且通过ES6模块化暴露语法export default来暴露模板中的内容,除此之外还可以定义一些属性来为组件提供功能性辅助。

  • name:键值对形式;用于指定模板名称,名称建议首字母大写。
  • data:函数形式;用于渲染模板的数据,需要采用return返回一个对象的形式来返回模板所需的数据
  • methods:对象形式;对象中的每个属性都是一个方法。

style:可以编写组件的样式,其中可以通过添加标签属性lang来指定style采用什么语言编写样式,lang="css"则采用css方式,这也是默认方式,lang="less"则采用less方式。不过要使用less之前需要使用npm i less来安装依赖包获得less语法的编译支持。


3.2.3 组件注册

说明:组件中可以引入其他组件进行使用,这也就催生了两种组件的注册方式,即全局注册局部注册

  • 全局注册:可以在全局被任何一个组件使用
  • 局部注册:在当前注册的范围内使用

全局注册的方法:使用app.component('使用的标签名',组件)

局部注册的方法:在需要导入的模块下的script节点中导入组件,并声明components选项,该选项是一个对象,可以按照使用的标签名形式填写。

提示:在官方文档中,我们把module.exports对象中的各个属性称为选项。如components选项,data选项,name选项。

<script>
import MyArticle from './Article.vue';
export default {
    name:'MyApp',
    components:{
        MyArticle
    }
}
</script>


3.2.4 注册组件时名称的大小写

说明:在进行组件的注册时,定义组件注册名称的方式有两种

  • 使用kebab-case命名法,即短横线命名法,如my-swiper
  • 使用PascalCase命名法,即大驼峰命名法,如MySwiper

如果使用的标签名使用短横线命名法的方式,则在使用标签时只能严格按照自己命名的名称来使用,但如果使用的是帕斯卡命名法,则在后续的使用中都可以转换为短横线命名来表示。


3.2.5 通过name属性注册组件

说明:组件的注册也可以使用组件中暴露出的name属性


3.2.6 组件冲突的解决

组件冲突原因:如果一个组件里面嵌套一个子组件,则在渲染样式时,有可能会影响子组件的样式。出现这种情况的根本原因是因为vue文件下的模板节点我们写的结构都是虚拟DOM,而所有的组件都是基于唯一的index.html页面来呈现的。

解决方法:为每个组件分配唯一的自定义属性,在编写组件样式时,在传统的选择器后跟一个中括号,里面放你分配的自定义属性名,这样就可以解决冲突了。

<template>
    <div class="container">
        //自定义data-v-001属性
        <h3 data-v-001></h3>
    </div>
</template>

<style>
    .container[data-v-001]{
        border:1px soild red;
    }
</style>

更好的方法:如果手动指定自定义样式,这样会很麻烦。为此,vue为style节点提供了scoped属性,让vue自动为各个组件分配随机的属性。


3.2.7 样式穿透

说明:如果给当前组件的style节点添加了scoped属性,则当前组件的样式对其子组件不再生效。如果想让某些样式对子组件生效,可以在选择器前添加:deep()

原理:当加上样式穿透后,scoped的效果由原先的选择器[自定义属性]变为了[自定义属性] 选择器

<style scoped>
    :deep() p {
    color: gold;
    }   
</style>


3.2.8 props

引入:为了提高组件的复用性,我们在封装组件时要遵循的规则是

  • 组件的DOM结构和style样式要尽量复用
  • 组件中展示的数据,尽量由组件的使用者提供

比较显著的一个例子是:我们封装轮播图组件,组件的外观和轮换时间我们希望都一样,但是轮播图里的图片我们可不希望一样。我们希望在调用组件时,轮播图的图片由我们自己提供。

说明:如果我们希望数据由组件使用者提供,那我们就要使用到props。props是组件的一个选项,可以通过props暴露想要传递的数据。当我们在编写组件模板的时候,模板中需要数据的地方用插值表达式来声明,而后在module.exports对象中新增props,以数组形式编写插值表达式对应的位置数据。当我们需要使用模板时,在data中提前准备好数据,利用v-bind传到组件上即可。

提示:在组件的插值表达式中不允许声明未定义的props。如果传递了未声明的props属性,则这些属性会被忽略,无法被子组件使用。

命名问题:props数组中存放的数据命名也采用短横线和帕斯卡命名的方式,声明帕斯卡时也可以转换短横线。

<template>
    <div>
        <h3>标题:{{title}}</h3>
        <h5>作者:{{author}}</h5>
        <h6>发布时间:{{pubTime}}</h6>
    </div>
</template>

<script>
export default {
    name:'MyArticle',
    // 外界可以传递数据到当前的组件中
    props:['title','author','pubTime']
}
</script>
<template>
    <div>
        <h1>这是App.vue根组件</h1>
        <hr>
        <my-article :title = "info.title" :author = "'post by '+info.author" :pubTime="info.pubTime"></my-article>
    </div>
</template>

<script>
import MyArticle from './Article.vue';
export default {
    name:'MyApp',
    data(){
        return {
            info:{
                title:'abc',
                author:'123',
                pubTime:'1989'
            },
        }
    },
    components:{
        MyArticle
    }
}
</script>


3.2.9 动态绑定HTML的class

说明:我们可以通过三元表达式,动态的为元素绑定class的类名。

绑定多个class:如果元素需要动态地绑定多个class类名,可以使用数组的语法格式,不同的三元表达式之间采用逗号分隔。

简化:使用数组语法动态绑定class会导致模板结构臃肿的问题,此时可以使用对象语法进行简化。

以对象语法绑定内联style:使用:style可以在模板结构标签中添加内联样式,这种语法的本质是一个js。

<template>
    <div>
        <!-- <h3 class = "thin" :class = "isItalic ? 'italic':''">MyStyle组件</h3> -->
        <!-- <h3 class = "thin" :class = "[isItalic ? 'italic':'',isDelete ? 'delete':'']">MyStyle组件</h3>
        <button @click="isItalic = !isItalic">Toggle Italic</button>
        <button @click = "isDelete = !isDelete">Toggle Delete</button> -->
        <h3 class = "thin" :class = "classObj">MyStyle组件</h3>
        <button @click="classObj.italic = !classObj.italic ">Toggle Italic</button>
        <button @click = "classObj.delete = !classObj.delete">Toggle Delete</button>
        <hr>
        <div :style = "{color:active,fontSize:fSize + 'px',backgroundColor:bgcolor}">人才</div>
        <button @click="fSize ++">字号 +1</button>
        <button @click="fSize --">字号 -1</button>
    </div>
</template>

<script>
export default {
    name:'Mystyle',
    data(){
        return {
            isItalic:false,
            isDelete:false,
            classObj:{
                italic:false,
                delete:false,
            },

            // 高亮的文本颜色
            active:'red',
            //文字的大小
            fSize:30,
            // 背景颜色
            bgcolor:'pink',
        }
    },
}
</script>

<style>
    .thin{
        font-weight: 200;
    }

    .italic{
        font-style: italic;
    }

    .delete{
        text-decoration: line-through;
    }

</style>
<template>
    <div>
        <!-- <h3 class = "thin" :class = "isItalic ? 'italic':''">MyStyle组件</h3> -->
        <!-- <h3 class = "thin" :class = "[isItalic ? 'italic':'',isDelete ? 'delete':'']">MyStyle组件</h3>
        <button @click="isItalic = !isItalic">Toggle Italic</button>
        <button @click = "isDelete = !isDelete">Toggle Delete</button> -->
        <h3 class = "thin" :class = "classObj">MyStyle组件</h3>
        <button @click="classObj.italic = !classObj.italic ">Toggle Italic</button>
        <button @click = "classObj.delete = !classObj.delete">Toggle Delete</button>
        <hr>
        <div :style = "{color:active,fontSize:fSize + 'px',backgroundColor:bgcolor}">人才</div>
        <button @click="fSize ++">字号 +1</button>
        <button @click="fSize --">字号 -1</button>
    </div>
</template>

<script>
export default {
    name:'Mystyle',
    data(){
        return {
            isItalic:false,
            isDelete:false,
            classObj:{
                italic:false,
                delete:false,
            },

            // 高亮的文本颜色
            active:'red',
            //文字的大小
            fSize:30,
            // 背景颜色
            bgcolor:'pink',
        }
    },
}
</script>

<style>
    .thin{
        font-weight: 200;
    }

    .italic{
        font-style: italic;
    }

    .delete{
        text-decoration: line-through;
    }

</style>


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
初识 Vue(05)---(组件间传值)
组件间传值(改进 TodoList) 改进 TodoList ,点击那个输出 ,那个输出就会消失 步骤一 TodoList 提交 ...
779 0
vue 组件间传值
1、父组件给子组件传值 父组件: &lt;template&gt; &lt;child :name="name"&gt;&lt;/child&gt; &lt;/template&gt; &lt;script&gt; import child from ".
590 0
vue组件传值的概括图
vue组件传值的概括图
0 0
知道vue组件同级传值吗?
知道vue组件同级传值吗?
0 0
vue-组件传值
组件传值 不管 vue 还是react 亦或某个框架都是重点 记得有篇文章写了 ,其实有些情况 完全可以用 js自带 dataset来传值哦
0 0
Vue动态组件的实践与原理探究
Vue动态组件的实践与原理探究
0 0
Vue 组件如何在设置 Props
在 Vue 中构建组件通常需要定义一些属性,以使组件可以更好复用,在这种情况下会使用 props 来自定义数据来传递数据。接下来以一个简单的组件来介绍如何使用组件 props 。
0 0
《跟热饭一起学习vue吧》Part.21 组件 component
《跟热饭一起学习vue吧》Part.21 组件 component
0 0
《跟热饭一起学习vue吧》Part.22 组件带参数 Prop
《跟热饭一起学习vue吧》Part.22 组件带参数 Prop
0 0
Vue中如何自定义组件实现组件化开发(案例步骤及组件传值)
在前端项目中,对于大面积可以复用的地方我们通常对其进行组件化的封装,从而提高代码复用率,简化开发,也便于后期对代码进行维护和修改。
0 0
+关注
ArimaMisaki
一个认真并且每天保持学习的开荒者
文章
问答
文章排行榜
最热
最新
相关电子书
更多
基于VUE的单页面性能优化实践
立即下载
利用编译将 Vue 组件转成 React 组件
立即下载
产品经理的硬技能——业务建模
立即下载