vue的组件及运用

 

❤记在前面

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

 

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

今天先来说下组件，而后搭个头部组件实现复用

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

 

一 、官方解读

1.官方怎么说？组件能够扩展HTML元素，封装可重用的代码，这句话，只要记住可重用这几个字很重要——即到底何时应该把一部分的代码抽离出来构成组件？ （图片来自官网）

 

---

 

2.关于组件的命名

组件的命名在项目中统一用 kebab-case（短横线）表示：

---

 

 

3.组件的复用

能够讲组件进行任意次数的复用，举个例子以下图，每次点击按钮，每一个组件都会各自独立维护它的count；由于每用一次组件，就会有一个它的新实例被建立

---

 

 

4.其余

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

 

2、组件的运用——建立头部组件

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的安装传送：http://www.javashuo.com/article/p-wucenxmp-ga.html

---

 

 

3.而后，修改myHeader.vue组件里面的内容，这就是咱们的头部：

---

 

 

加点css 【CSS样式的修改在后面补充了：http://www.javashuo.com/article/p-czxcvlru-hv.html】

---

 

 

 

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