vue的组件及运用

❤记在前面

         享受一个微雨的夜晚··· ···

【前面学了vue-router,今天开始正式搭建页面,先从首页开始,在搭建页面的过程中,也会穿插vue的知识点】

今天先来讲下组件,然后搭个头部组件实现复用

 【组件基础官方文档:https://cn.vuejs.org/v2/guide/components.html

一 、官方解读

1.官方怎么说?组件可以扩展HTML元素,封装可重用的代码,这句话,只要记住可重用这几个字很重要——即到底什么时候应该把一部分的代码抽离出来构成组件? (图片来自官网)


2.关于组件的命名

组件的命名在项目中统一用 kebab-case(短横线)表示:


3.组件的复用

可以讲组件进行任意次数的复用,举个例子如下图,每次点击按钮,每个组件都会各自独立维护它的count;因为每用一次组件,就会有一个它的新实例被创建


4.其他

还有很多关于组件使用的很重要的内容,如组件之间数据的传递、组件的事件等等,在后面的项目中具体用到了再穿插

二、组件的运用——创建头部组件

1.新建一个myHeader头部组件

首先在src->compontent下新建一个myHeader.vue组件,有helloworld.vue的删掉或者直接改个名直接用都是OK的,代码如下:


解析上图:一个myHeader.vue的页面分为了三个部分,<template></template>里面是放html代码的是为结构,<script></script>里面写js是为逻辑,<style></style>里写CSS是为样式,这就是vue里面的结构、样式、逻辑三者分离,里面标记了三个小要点:

❤① name,就是对这个组件的命名,具体表现在哪里,待会再说;

❤② data标记出来的意思就是记得data必须函数;

❤③ style里面有个scoped,就是你加了CSS就会只作用于这个组件、这个页面,不会污染;

2.组件的引入

① 在div里面加了个helloworld便于展示


②然后,在app.vue里面引入


 怎么引入的?import照着上图引入,然后components属性里面注册一下,在这里讲一下命名规范,import后面请使用首字母大写的形式MyHeader,template里面使用短横线连接法my-header

3.组件的复用

组件的复用就比较简单了,写复制粘贴一下就行了,记住:组件都是独立的


运行项目

4.最后再回到第1个点下面关于组件里面name属性具体体现在哪里的问题:

打开vue的插件(vue-devtools),name属性的值就是组件的名字,你可以自己修改name属性看看效果:

vue-devtools的安装传送:https://www.cnblogs.com/crystral/p/9116817.html


3.然后,修改myHeader.vue组件里面的内容,这就是我们的头部:


加点css 【CSS样式的修改在后面补充了:https://www.cnblogs.com/crystral/p/9119146.html


 以上,完成,辛苦啦~~~

原文地址:https://www.cnblogs.com/crystral/p/9113867.html