一、组件
- 组件化开发优势：复用性强 ，便于后期维护和开发
- 什么是组件：包含了html,css,js的一个整体(js对象)，是一个独立的功能
- 单页面应用(SPA)
- VUE的核心：数据驱动，组件化
1、组件使用
组件的全局注册
- 语法
Vue.component('组件名',{
组件配置对象})
- 使用(调用)组件
<组件名></组件名>
-
注意：
- 全局注册组件需要放在vue实例化之前，所有的vue实例都可以使用
- template指定了组件的模板信息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/vue.js"></script>
<style>
ul{
padding: 0;
margin: 0;
list-style: none;
width: 500px;
display: flex;
height: 50px;
border: 1px solid;
}
li{
width: 99px;
height: 50px;
border-right: 1px solid;
line-height: 50px;
text-align: center;
}
.active{
background-color: yellow;
color:red;
}
</style>
</head>
<body>
<div id="app">
<mycom></mycom>
<hr/>
<mycom></mycom>
</div>
<h3>---------分割线-------</h3>
<div id="main">
<mycom></mycom>
</div>
</body>
<script>
Vue.component("mycom",{
// template指定组件的模板
template: "<div><a href='#'>全局组件</a></div>"
})
// 全局注册组件需要放在vue实例化之前，所有的vue实例都可以使用
var app=new Vue({
el:"#app",
data:{
}
})
var main=new Vue({
el:"#main",
data:{
}
})
</script>
</html>
组件的局部注册
- 语法
var app=new Vue({
el:"#app",
data:{
},
components:{
组件名:{
配置对象},
组件名:{
配置对象}
}
})
- 使用(调用)组件
<组件名></组件名>
-
注意
- 局部组件只能在当前所在的实例去使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/vue.js"></script>
<style>
ul{
padding: 0;
margin: 0;
list-style: none;
width: 500px;
display: flex;
height: 50px;
border: 1px solid;
}
li{
width: 99px;
height: 50px;
border-right: 1px solid;
line-height: 50px;
text-align: center;
}
.active{
background-color: yellow;
color:red;
}
</style>
</head>
<body>
<div id="app">
<mycon></mycon>
</div>
<h3>---------分割线-------</h3>
<div id="main">
<!-- <mycon></mycon> -->
</div>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
},
components:{
// 组件名:{配置对象}
// 局部组件只能在当前所在的实例去使用
mycon:{
template:`
<div>
<h3>我是局部组件</h3>
</div>
`
}
}
})
var main=new Vue({
el:"#main",
data:{
}
})
</script>
</html>
2、组件命名
- 不能是html标签名(html新增的语义标签：header,nav,main,aside,section,slider,article,footer…)
- 命名尽量语义化
- 组件那个组件名驼峰命名了，使用组件的时候需要用- 链接 比如组件名为myHead 使用
- 单标签只可以使用一次，后面的将不再显示
3、template配置项
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/vue.js"></script>
<style>
ul{
padding: 0;
margin: 0;
list-style: none;
width: 500px;
display: flex;
height: 50px;
border: 1px solid;
}
li{
width: 99px;
height: 50px;
border-right: 1px solid;
line-height: 50px;
text-align: center;
}
.active{
background-color: yellow;
color:red;
}
</style>
</head>
<body>
<div id="app">
<mycon></mycon>
<mybb></mybb>
</div>
<template id="aa">
<div>
<div>
<h3>我是局部组件</h3>
</div>
<div>789</div>
</div>
</template>
<template id="bb">
<div>123</div>
</template>
</body>
<script>
var app=new Vue({
el:"#app",
data:{
},
components:{
// 组件名:{配置对象}
// 局部组件只能在当前所在的实例去使用
mycon:{
template:"#aa"
},
mybb:{
template:"#bb"
}
}
})
</script>
</html>
4、组件嵌套
<body>
<div id="app">
<mycon></mycon>
<hr/>
<mybb></mybb>
</
</body>
<script>
Vue.component("mycd",{
template:"<a href='#'>00000</a>"
})
var app=new Vue({
el:"#app",
data:{
},
components:{
// 组件名:{配置对象}
// 局部组件只能在当前所在的实例去使用
mycon:{
template:`
<div>
mycon
<hr/>
<mycd></mycd>
<aa></aa>
</div>
`,
components:{
aa:{
template:`
<div>aaa</div>
`
}
}
},
mybb:{
template:`
<div>
mybb
</div>
`
}
}
})
</script>
</html>
5、组件的配置选项(重点)
-
The “data” option should be a function that returns a per-instance value in component definitions.
data选项应该是一个函数
-
组件中的data是一个函数，返回一个对象
- 组件的data不能是一个对象，因为一旦是一个对象，所有组件都会共享一个数据源，造成了数据的污染
- 组件data必须是一个函数，函数返回一个对象，每次返回都会重新创建一个新对象
- 组件的数据应该是独立的
-
template是指定模板的
-
其他配置选项和vue实例一模一样的
<body>
<div id="app">
<mycon></mycon>
<hr/>
<mybb></mybb>
</div>
</body>
<script>
Vue.component("mycd",{
template:`
<div>
mycd全局组件
{
{msg}}
<button @click="fn">更改msg</button>
</div>
`,
data:function(){
return {
msg:"成都"
}
},
methods:{
fn(){
this.msg="nihao"
}
}
})
var app=new Vue({
el:"#app",
data:{
},
components:{
// 组件名:{配置对象}
// 局部组件只能在当前所在的实例去使用
mycon:{
template:`
<div>
mycon
<hr/>
<mycd></mycd>
<aa></aa>
</div>
`,
components:{
aa:{
template:`
<div>aaa</div>
`
}
}
},
mybb:{
template:`
<div>
mybb
</div>
`
}
}
})
</script>
</html>
二、Vue CLI Vue脚手架开发
- vue-cli脚手架工具：快速搭建一个vue项目
1、安装vue-cli
确保电脑安装了node环境，输入以下命令检测是否安装了node
node -v //显示版本号说明安装了node 如果提示node不是内部命令，那就就去安装node
node的安装地址：https://nodejs.org/en/download/
npm install vue-cli -g //全局安装脚手架工具
如果电脑上安装了cnpm淘宝镜像，可以使用cnpm 安装
cnpm install vue-cli -g
如果没有淘宝镜像先安装淘宝镜像
npm install cnpm -g --registry=http://registry.npm.taobao.org
执行 cnpm/npm install vue-cli -g 该命令 安装脚手架工具
vue -V //显示版本号说明安装成功
2.9.6
2、初始化vue项目
-
找到需要存储项目的目录
-
在该目录下执行命令
vue init webpack 项目名(英文)
- 启动项目
npm run dev
or
npm start
3、创建项目过程详解
4、目录及文件介绍
三、Vue源码介绍
import Vue from 'vue'
//完整写法
import Vue from "../node_modules/vue/dist/vue.js"
//因为main.js是在src文件中，所以../向前一级相对目录查找node_modules，再依次寻找后面的文件。
- 1.import…from…的from命令后面可以跟很多路径格式，若只给出vue，axios这样的包名，则会自动到node_modules中加载；若给出相对路径及文件前缀，则到指定位置寻找。
- 2.可以加载各种各样的文件：.js、.vue、.less等等。
可以不输入后缀名既加载是因为这个原因：
webpack解析里的扩展配置:
resolve: {
extensions: ['.wasm', '.js', '.vue', '.json']
}