Vue组件
组件(Component)是Vue.js最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。就像是python中封装一个类，在其他类中可以继承和调用类中的属性和方法。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期钩子。
1.组件的基本使用
-
1.1 全局组件
Vue.component()方法中参数说明：- 第一个参数指定组件名
- 第二个参数以{}形式传递，在里面指定组件的属性，template指定组件的要加载的内容。
调用：组件名以标签的形式调用组件中的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<!-- 将组件名以标签的形式添加到div中，调用组件中的内容 -->
<zujian_all></zujian_all>
</div>
<script>
// 全局组件通过 Vue.component注册
Vue.component(
'zujian_all',
{ // template指定组件显示的html内容
template:'<div>全局组件</div>',
}
)
new Vue({
el: '#app',
})
</script>
</body>
</html>
- 1.2 局部组件
使用var定义局部组件，使用components将局部组件注册到全局组件中，在全局组件中调用局部组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<zujian_all></zujian_all>
</div>
<script>
// 局部组件注册,定义局部组件
var zujian_a={
template:'<div>局部组件1</div>',
};
// 全局组件
Vue.component(
'zujian_all',
{ // 在全局中调用局部组件
template:'<div>全局组件 <zujian_a></zujian_a> </div>',
// components 将局部组件注册到全局组件中
components:{
zujian_a
}
}
)
new Vue({
el: '#app',
})
</script>
</body>
</html>
- 1.3 多个局部组件的使用
- 1.4组件的关系
2.Vue组件中的data和props属性
2.1 组件中数据的绑定
在vue中数据通过data属性进行绑定，在组件中进行数据绑定也是通过data属性，但是对应的值不再是{}json形式，而是一个函数方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<zujian_all></zujian_all>
</div>
<script>
// 局部组件注册,定义局部组件
var zujian_a={
template:'<div>局部组件1</div>',
};
// 全局组件
Vue.component(
'zujian_all',
{ // 在全局中使用绑定的数据 {{name}}
template:'<div>全局组件 <zujian_a></zujian_a> {{name}} </div>',
// components 将局部组件注册到全局组件中
components:{
zujian_a,
},
// data属性指定绑定的数据内容，可以在当前的组件中进行使用
data:function(){
return {name:'python'}
}
}
)
new Vue({
el: '#app',
})
</script>
</body>
</html>
2.2 组件传值
- 父组件给子组件传值，组件通过props属性传递数据
在全局组件中调用子组件时，通过v-bind指定子组件中pos接受父组件中的哪个值，在子组件中通过props属性定义接受值的名称。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<zujian_all></zujian_all>
</div>
<script>
// 局部组件注册,定义局部组件
var zujian_a={
template:'<div>局部组件1 {{pos}} </div>',
// 在子组件中通过props属性定义接受值的名称
props:['pos']
};
// 全局组件
Vue.component(
'zujian_all',
{ // 在全局组件中调用子组件时，通过v-bind指定子组件中pos接受父组件中的哪个值
template:'<div>全局组件 <zujian_a v-bind:pos="name"></zujian_a> </div>',
// components 将局部组件注册到全局组件中
components:{
zujian_a,
},
// data属性指定绑定的数据内容，可以在当前的组件中进行使用
data:function(){
return {name:'python'}
}
}
)
new Vue({
el: '#app',
})
</script>
</body>
</html>
- 子组件给父组件传值，通过 $emit 将数据传递给父组件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Ming</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id='app'>
<zujian_all></zujian_all>
</div>
<script>
var zujian_a={
template:'<div> 局部组件A <button v-on:click="isupload"> 上传</button> </div>',
methods:{
isupload:function(){
this.$emit('isListen','hello') // 子元素上的点击事件成功后，通过 $emit 将事件和数据传递给父组件
}
}
}
Vue.component('zujian_all',{
template:'<div> 全局组件 <zujian_a v-on:isListen="isShow"></zujian_a> </div>',
components:{
zujian_a
},
methods:{
isShow:function(data){
alert(data) //data参数接受子组件传递的值
}
}
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
3.单文件组件
将一个组件相关的html结构，css样式，以及交互的JavaScript代码从html文件中剥离出来，合成一个文件，这种文件就是单文件组件，相当于一个组件具有了结构、表现和行为的完整功能，方便组件之间随意组合以及组件的重用，这种文件的扩展名为“.vue”，比如：“breadcrumb.vue”。
3.1 单文件组件使用配置
单文件组件不能直接运行使用，需要依赖node项目对其进行解析打包，在使用之前需要先进行环境配置
- 1.安装node版本管理工具nvm
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash - 2.安装最新版本的node
nvm install node - 3.更新npm的安装源
npm config set registry https://registry.npm.taobao.org - 4.创建项目目录
mkdir project - 5.进入项目目录，对项目目录进行初始化
说明：初始化完成后在当前目录中会生成一个package.json文件，该文件指定项目所有依赖的模块。cd project npm init - 6.配置package.json文件
说明：该文件定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。{ "name": "project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "babel-core": "^6.22.1", "babel-loader": "^7.1.1", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "css-loader": "^0.28.11", "element-ui": "^2.7.2", "file-loader": "^1.1.4", "lodash": "^4.17.4", "style-loader": "^0.23.1", "url-loader": "^1.1.2", "vue": "^2.6.10", "vue-loader": "^15.7.0", "vue-router": "^3.0.2", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.5.2", "webpack": "^4.29.6", "webpack-cli": "^3.3.0", "webpack-dev-server": "^3.2.1" } } - 7.安装项目依赖模块
npm install - 8.创建项目文件 main.js ,index.html, App.vue
说明：可以借助vscode编辑工具创建文件touch index.html main.js App.vue.- index.html文件 是项目的首页文件
- main.js 文件 定义vue及调用单文件组件，也是项目打包时所依赖的文件
- App.vue文件为单文件组件文件
- 9.创建webpack打包的配置文件webpack.config.js
在通过webpack对项目进行打包时，需要指定相应的配置文件，通过配置文件对单文件组件中的各个内容进行解析，生成一个index.js的压缩文件，在index.html只需引该文件就可进行页面加载渲染
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin');
module.exports = {
entry: { main: "./main.js" }, //入口文件
output: {
filename: 'index.js', //出口文件名
path: path.resolve(__dirname), //当前目录
library: 'index' // 打包后模块的名称
},
plugins: [
// make sure to include the plugin for the magic
new VueLoaderPlugin()
],
module: {
rules: [ //定义不同类型的文件使用的loader
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.css$/,
loader: 'vue-style-loader',
},
{
test: /\.css$/,
loader: 'css-loader',
options: {
minimize: true //添加
}
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader'
},
]
}
}
目录创建完成后结构如下：
3.2 单文件组件打包
项目搭建完成后需要分别对 main.js , index.html , App.vue 文件进行编写代码
- 编写代码
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id='app'>
<App></App>
</div>
<!-- 引入打包后的index.js文件。该文件的名字不是固定名字，可以在webpack.config.js的出口文件中指定 -->
<script src="./index.js"></script>
</body>
</html>
main.js
// 引入vue和App组件
import Vue from "vue"
import App from "./App.vue"
new Vue({
el:"#app",
// 渲染App组件中的内容，返回给index.html文件使用
render:function(creater){
return creater(App)
}
})
App.vue
<template>
<!-- 指定html显示内容 -->
<div>单文件组件</div>
</template>
<script>
// 指定js内容
export default {
}
</script>
<style>
/* 指定css内容 */
</style>
- 项目打包
文件编写完成后并不能直接运行index.html产生效果，需要对项目进行打包生成一个渲染后的index.js文件进行使用
打包后会在当前目录下生成一个index.js 文件，在index.html中引用该文件，运行index.html文件看到效果npm run build - 项目调试运行
每次我们需要看到组件效果需要手动生成一个index.js文件，这是我们可以借助webpack-dev-server自动运行我们的代码// 在项目目录下，执行下面指令可以开启前端服务，自动运行前端代码 ./node_modules/.bin/webpack-dev-server
3.3 多个单文件组件使用
在project目录下创建components文件夹，然后将所有子组件放入components文件夹下
(1)多组件嵌套使用
Child1.vue
<template>
<div>子组件1</div>
</template>
<script>
// export default {
// }
</script>
<style>
</style>
Child2.vue
<template>
<div>子组件2</div>
</template>
<script>
// export default {
// }
</script>
<style>
</style>
App.vue
<template>
<div>
单文件组件
<!-- 调用子组件 -->
<Child1></Child1>
<Child2></Child2>
</div>
</template>
<script>
//导入components目录下的子文件 Child1为指定的组件名，可以任意命名，不一定按照文件名
import Child1 from './components/Child1.vue'
import Child2 from './components/Child2.vue'
export default {
// 将子组件添加到App.vue中
components:{
Child1,
Child2,
}
}
</script>
<style>
</style>
(2) 多组件路由使用
使用路由形式将多个单文件组件组合在一起
- 1.定义路由目录和路由文件
mkdir router touch router.js - 2.编写路由文件router.js
import Vue from "vue" // 导入路由插件 import Router from "vue-router" import Child1 from "../components/Child1.vue" import Child2 from "../components/Child2.vue" // 在vue中使用插件 Vue.use(Router) export default new Router({ // 定义匹配规则 routers:[ { path:"/", // 匹配根路径/，加载Child1中的内容 component:Child1 }, { path:"/child2", component:Child2 } ] }) - 3.在main.js中使用路由
import Vue from "vue" import App from "./App.vue" // 导入定义好的路由 import router from "./router/router.js" new Vue({ el:"#app", router, // 使用路由 render:function(creater){ return creater(App) } }) - 4.在App.vue中指定路由标签
<template> <div> 单文件组件 <!-- 加载路由标签 --> <router-view></router-view> </div> </template> <script> </script> <style> </style>
3.4 使用Element-ui
单文件组件就像是一个个封装好的页面样板，我们可一把这些样板组合在一起形成一个完整的页面。就像QQ空间装扮一样，将个个样板放入QQ空间页面中组成自己风格的页面。而Element-ui就将我们需要的样式封装成单文件组件，我们可以直接集成到我们的项目中。
- 1.在子组件中使用element-ui的代码Element1.vue
<template> <div> <div class="block"> <span class="demonstration">默认</span> <el-slider v-model="value1"></el-slider> </div> <div class="block"> <span class="demonstration">自定义初始值</span> <el-slider v-model="value2"></el-slider> </div> <div class="block"> <span class="demonstration">隐藏 Tooltip</span> <el-slider v-model="value3" :show-tooltip="false"></el-slider> </div> <div class="block"> <span class="demonstration">格式化 Tooltip</span> <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider> </div> <div class="block"> <span class="demonstration">禁用</span> <el-slider v-model="value5" disabled></el-slider> </div> </div> </template> <script> export default { data() { return { value1: 0, value2: 50, value3: 36, value4: 48, value5: 42 } }, methods: { formatTooltip(val) { return val / 100; } } } </script> - 2 编写路由文件router.js
import Vue from "vue" // 导入路由插件 import Router from "vue-router" import Child1 from "../components/Child1.vue" import Child2 from "../components/Child2.vue" // 导入 import Element1 from "../components/Element1.vue" // 在vue中使用插件 Vue.use(Router) export default new Router({ // 定义匹配规则 routers:[ { path:"/", // 匹配根路径/，加载Child1中的内容 component:Child1 }, { path:"/child2", component:Child2 }, { path:"/element", component:Element1 } ] }) - 3.在main.js中将element-ui引入到项目中
import Vue from "vue" import App from "./App.vue" import router from "./router/routers.js" // 引入ElementUI import ElementUI from "element-ui" // 引入css import "element-ui/lib/theme-chalk/index.css" // vue使用ElementUI Vue.use(ElementUI) new Vue({ el:'#app', router, render:function(creater){ return creater(App) } })
4.vue-cli的使用
我们的项目文件都是手动创建出来，在实际开发中我们可以借助vue-cli创建出我们的所有项目文件
- 1.全局安装vue-cli
npm install --global vue-cli - 2.项目创建
vue init webpack 项目名 - 3.运行调试项目
// 进入项目目录下，执行下面命令 npm run dev - 4.项目打包
npm run build
项目目录结构
- 文件夹1(src)，主开发目录，要开发的单文件组件全部在这个目录下
- 文件夹2(static)，静态资源目录，所有的css，js文件放在这个文件夹
- 文件夹3(components)，组件目录，vue格式的单文件组件都存在这个目录中
- 文件夹4(router)，路由目录，在此文件夹中配置组件路由
- 还有node_modules目录是node的包目录，config是配置目录，build是项目打包时依赖的目录。
页面结构说明
整个项目是一个主文件index.html,index.html中会引入src文件夹中的main.js,main.js中会导入顶级单文件组件App.vue,App.vue中会通过组件嵌套或者路由来引用components文件夹中的其他单文件组件。
扫一扫
4万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
