这是我参与8月更文挑战的第19天，活动详情查看： 8月更文挑战
微信公众号搜索 程序媛小庄 人生苦短 一起学Python
组件
组件(Component)是自定义封装的功能。
在前端开发过程中，经常出现多个页面的功能是重复的，而且很多不同的页面之间，也存在同样的功能。
而在网页中实现一个功能，需要使用html定义功能的内容结构，使用css声明功能的外观样式，还要使用js来定义功能的特效，因此就产生了把一个功能相关的[HTML、css和javascript]代码封装在一起组成一个整体的代码块封装模式，我们称之为“组件”。
所以，组件就是一个html网页的功能，一般就是一个标签，标签中有自己的html内容结构，css样式和js特效，这样，前端人员就可以在组件化开发时，只需要书写一次代码，随处引入即可使用。
vue的组件有两种：默认组件[全局组件]和单文件组件
默认组件
通过vue创建默认组件的方法
1.通过vue创建组件
Vue.component('组件名',{
template:`
组件代码
`，
data:function(){return{
// 组件内部使用的数据
num:0,
}},
methods:{
// 组件内部使用的方法
add(){
return this.num++
},
},
// 事件的侦听属性
watch:{
// 侦听属性代码
},
});
2.在页面上调用自定义组件,即可使用自定义组件中的代码
<组件名></组件名>
自定义组件代码小案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- 调用组件 -->
<mynav></mynav>
<mynav></mynav>
<mynav></mynav>
<mynav></mynav>
<mynav></mynav>
<mynav></mynav>
</div>
<script>
// 1.通过vue创建组件
// 组件与组件之间的数据方法都是独立的，互相不会影响
Vue.component('mynav',{
// `我是html代码多行文本语法`
template:`
<div>
<button @click="num--">-</button>
<input type="text" v-model="num"/>
<button @click="add">+</button>
</div>`,
data:function(){return {
// 组件内部使用的数据
num:0
}},
methods:{
// 组件中使用的方法
add(){
// 这里的this指代的就是组件中的数据
return this.num++
}
},
watch:{
num(){
if (this.num<=0){this.num=0}
}
}
});
let vm = new Vue({
el:'#app',
// 这里写的数据是全局公用的，整个文件共享
data:{},
})
</script>
</body>
</html>
VUE自动化工具vue-cli
单文件组件则需要提前先安装准备一些组件开发工具。否则无法使用和学习单文件组件。
一般情况下，单文件组件，我们运行在 自动化工具vue-CLI中，可以帮我们把单文件组件编译成普通的js代码。所以我们需要在系统中先搭建vue-CLI工具
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+),所以还需要安装node.js
安装Node.js
Node.js是一个新的后端(后台)语言，它的语法和JavaScript类似，所以可以说它是属于前端的后端语言，后端语言和前端语言的区别：
- 运行环境：后端语言一般运行在服务器端，前端语言运行在客户端的浏览器上
- 功能：后端语言可以操作文件，可以读写数据库，前端语言不能操作文件，不能读写数据库。
我们一般安装LTS(长线支持版本 Long-Time Support)：
Node.js如果安装成功，可以查看Node.js的版本,在终端输入如下命令：
node -v
NODE.JS~NPM
在安装node.js完成后，在node.js中会同时帮我们安装一个npm包管理器npm。我们可以借助npm命令来安装node.js的包。这个工具相当于python的pip管理器。
npm install -g 包名 # 安装模块 -g表示全局安装，如果没有-g，则表示在当前项目安装
npm list # 查看当前目录下已安装的node包
npm view 包名 engines # 查看包所依赖的Node的版本
npm outdated # 检查包是否已经过时，命令会列出所有已过时的包
npm update 包名 # 更新node包
npm uninstall 包名 # 卸载node包
npm 命令 -h # 查看指定命令的帮助文档
安装VUE-CLI
npm install -g vue-cli
使用Vue-CLI初始化创建前端项目
- 生成项目目录
使用vue自动化工具可以快速搭建单页应用项目目录。
该工具为现代化的前端开发工作流提供了开箱即用的构建配置。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目：
cmd命令行（在目标文件夹的路径框中双击后输入cmd回车后就可以将命令行的目录直接跳转到当前路径）
// 生成一个基于webpack模板的新项目
vue init webpack 项目名称
// 回答9个问题
...
// 启动开发服务器
cd myproject
npm run dev # 运行这个命令就可以启动node提供的测试http服务器
- 项目目录结构分析
- src 主开发目录，要开发的单文件组件全部在这个目录下的components目录下
- static 静态资源目录，所有的css，js文件放在这个文件夹
- dist 项目打包发布文件夹，最后要上线单文件项目文件都在这个文件夹中[后面打包项目,让项目中的vue组件经过编译变成js 代码以后,dist就出现了]
- node_modules node的包目录，如果误删了可以直接在pycharm的终端中执行npm install
- config 配置目录
- build 项目打包时依赖的目录
- src/router 路由,后面需要我们在使用Router路由的时候,自己声明.
- 项目执行流程
整个项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,main.js中会导入顶级单文件组件App.vue,App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。
pycharm终端运行vue项目指令:nmp run dev
单文件组件的基本使用
单文件组件介绍
组件有两种：普通组件（自定义组件）单文件组件
单文件组件的缺点：
- html代码是作为js的字符串进行编写，所以组装和开发的时候不易理解，而且没有高亮效果。
- 普通组件用在小项目中非常合适，但是复杂的大项目中，如果把更多的组件放在html文件中，那么维护成本就会变得非常昂贵。
- 普通组件只是整合了js和html，但是css代码被剥离出去了。使用的时候的时候不好处理。
将一个组件相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件，这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用，这种文件的扩展名为“.vue”，比如："Home.vue"。
单文件组件的3个使用步骤
创建组件---在components文件夹下创建vue文件
- 创建单文件组件会在vue文件中自动产生下述三个标签
<template>编写视图代码</template>
<script>vm对象代码</script>
<style>css样式代码</style>
template是编写html代码的地方,该标签内有且只能有一个大标签，其他标签都应该写在该大标签内部
<template>
<div id='Home'>
<span @click='num--' class='sub'>-</span>
<input type='text' v-model='num'>
<span @click='num++' class='add'>+</span>
</div>
</template>
script标签内部编写vue对象代码
<script>
// export default用于规定vue对象数据的对外接口，将vue对象中的属性及方法对外开放
export default{
name:'Home',
data:function(){
return {
// 将数据以对象的方式返回给外界使用
num:0
},
},
}
</script>
style标签内部编写当前组件的样式代码,scoped是声明当前的样式只对当前组件中的标签产生效果
<style scoped>
.sub,.add{
border: 1px solid red;
padding: 4px 7px;
}
</style>
在App.vue中注册组件
在开发前端vue项目中会编写大量的组件，一般大的组件就代表是一个页面，大的组件下面会引入小的组件；
小的组件往往就是一个页面的部分功能代码，例如导航栏 侧边栏等；
因此组件与组件之间的嵌套很频繁，可以在app中引入一个页面组件（大组件），然后在大组件中引入小组件；
小组件代码文件经常放在components文件夹下的common文件夹下；
import Home from './components/Home'
// import 后面的Home相当于python中导入模块的as方法起别名
export default {
name: 'App',
components:{
Home
},
}
在App.vue中调用组件
<template>
<div id="app">
<Home></Home>
</div>
</template>
单文件组件案例 --- 点击加减数字
注意：在开发vue项目之前需要手动将App.vue的HelloWorld组件代码以及默认的css样式清除。
创建Home.vue单文件组件
<template>
<div class="add_num">
<span @click="num++">+</span>
<input type="text" size="2" v-model="num">
<span @click="num--">-</span>
</div>
</template>
<script>
export default{
name:"AddNum",
data: function(){
return {
num: 0,
}
}
}
</script>
<style scoped>
.add_num{
font-size: 32px;
}
</style>
在App.vue组件中调用Home组件
<template>
<div id="app">
<Home></Home>
</div>
</template>
组件的嵌套
有时候开发Vue项目时，页面也可以算是一个大组件，同时页面也可以分成多个子组件。因为产生了父组件调用子组件的情况。
例如可以声明一个组件作为父组件，在components文件夹下创建一个common文件夹来保存子组件Nav(导航条)
- 子组件Nav.vue
<template>
<div>
<p>导航栏</p>
</div>
</template>
<script>
export default {
name:'Nav',
}
</script>
<style scoped>
</style>
- 父组件Home.vue
<template>
<div id='home'>
<!--3调用子组件-->
<Nav></Nav>
</div>
</template>
<script>
// 1导入子组件
import Nav from './commom/Nav'
export default {
name:'Home',
},
// 2注册组件
components:{
Nav
},
</script>
最后父组件Home.vue被App.vue所调用
传递数据
父组件向子组件传递数据
- 第一步，需要将传递的数据以属性的格式编写到调用组件的标签名中
- 第二步，在子组件的vm对象中通过props接收即可使用
- 父组件Home.html
<template>
<div id='home'>
<!--3调用子组件-->
<Nav :mynum='num'></Nav>
</div>
</template>
<script>
// 1导入子组件
import Nav from './commom/Nav'
export default {
name:'Home',
// 组件所需数据
data(){
return {num=10}
},
},
// 2注册组件
components:{
Nav
},
</script>
<style scoped>
</style>
- 子组件Nav.vue
结语
文章首发于微信公众号程序媛小庄，同步于掘金。
码字不易，转载请说明出处，走过路过的小伙伴们伸出可爱的小指头点个赞再走吧(╹▽╹)
