组件、Vue-cli脚手架
1.组件
组件化和模块化
组件化:通常指的是样式（轮播图，tab，列表区域）
模块化:通过指的是效果(弹框)
组件:
定义：全局定义组件 每一个vue实例对象(可复用的vue实例)
命名规则:
1.采用驼峰方式命名，页面使用的时候需要把大写字母转为连字符+字母,目的为了方便调用
2.采用小写命名方式，直接在页面使用即可<vone></vone>
3.不能以现有的标签名作为组件名
命名规范：
组件中的data定义:1.data必须是方法 2.方法必须有返回值 3.返回值必须是对象类型
如果使用data中的数据:在组件中声明的数据需要在组件的模板中使用
组件中还可以有的配置项；data，methods，filter，computed，watch，生命周期的钩子函数....
// 局部定义 语法:components:{组件名称：{模板对象}}
new Vue({
el:'#app',
data:{},
methods: {
},
components:{
vTwo:{
template:'<h2>我是第二个组件</h2>'
}
}
})
// 全局定义组件 语法:Vue.component(组件名称,{模板对象})
Vue.component('vOne',{
template:'<div><div>我是第一个组件{{msg}}</div><p>我是段落</p></div>',
data(){
return {
msg:'abc'
}
}
})
2.template
组件中的模板对象：有且只能有一个根元素
template使用: 位置:放到body的结束标签上面,给当前的模板标签添加id，同时把id赋值给组件的template
<template id='temp1'>
<div>
<div>我是第一个组件{{msg}}</div>
<p>我是第一个组件的段落</p>
</div>
</template>
Vue.component('vOne',{
template:'#temp1',
data(){
return {
msg:'abc'
}
}
})
let vm = new Vue({
el:'#app',
data:{},
methods: {
},
components:{
vTwo:{
template:'<h2>我是第二个组件</h2>'
}
}
})
3.data
data为什么在组件中是函数方式定义?
目的是为了实现数据共享而数据互相不影响
注意点:
1.data必须函数 2 必须有返回值 3返回值必须是对象
<body>
<div id="app">
<v-one></v-one>
<hr>
<v-one></v-one>
<hr>
<v-one></v-one>
<v-two></v-two>
</div>
<template id="temp1">
<div>
<div>{{number}}</div>
<div><button @click = 'add'>点击累加</button></div>
</div>
</template>
<template id="temp2">
<div>
<h2>我是Two组件</h2>
<v-inner></v-inner>
</div>
</template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 总结:组件不能使用外部数据，同时外部数据也不能该组件的数据
// 为什么组件中的data必须是函数:实现数据共享而互相不影响
// 组件嵌套特点:子组件只能在父组件中使用
let vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
},
components:{
vOne:{
template:'#temp1',
data(){
return {
number:0
}
},
methods: {
add(){
this.number++
}
},
},
vTwo:{
template:'#temp2',
components:{
vInner:{
template:'<div>我是嵌套组件</div>'
}
}
}
}
})
</script>
</html>
4.后台案例
原始代码参考:
<body>
<div id="app">
<div>
<v-app></v-app>
</div>
</div>
<template id="temp">
<div class="box">
<v-header></v-header>
<v-main></v-main>
<v-footer></v-footer>
</div>
</template>
<template id="header">
<div class="header">
header
</div>
</template>
<template id="main">
<div class="main">
<v-left></v-left>
<v-right></v-right>
</div>
</template>
<template id="footer">
<div class="footer">
footer
</div>
</template>
<template id="left">
<div class="left">
left
</div>
</template>
<template id="right">
<div class="right">
right
</div>
</template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {},
components: {
vApp:{
template:'#temp',
components:{
vHeader:{
template:'#header'
},
vMain:{
template:'#main',
components:{
vLeft:{
template:'#left'
},
vRight:{
template:'#right'
}
}
},
vFooter:{
template:'#footer'
}
}
}
}
})
</script>
抽离代码参考：
<body>
<div id="app">
<div>
<v-app></v-app>
</div>
</div>
<template id="temp">
<div class="box">
<v-header></v-header>
<v-main></v-main>
<v-footer></v-footer>
</div>
</template>
<template id="header">
<div class="header">
header
</div>
</template>
<template id="main">
<div class="main">
<v-left></v-left>
<v-right></v-right>
</div>
</template>
<template id="footer">
<div class="footer">
footer
</div>
</template>
<template id="left">
<div class="left">
left
</div>
</template>
<template id="right">
<div class="right">
right
</div>
</template>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vRight = {
template: '#right'
}
let vLeft = {
template: '#left'
}
let vHeader = {
template: '#header'
}
let vMain = {
template: '#main',
components: {
vLeft,
vRight
}
}
let vFooter = {
template: '#footer'
}
let vAPP = {
template: '#temp',
components: {
vHeader,
vMain,
vFooter
}
}
let vm = new Vue({
el: '#app',
data: {},
components: {
vApp
}
})
</script>
5.脚手架
1.全局安装webpack
npm install webpack -g
2.全局安装vue-cli
npm install vue-cli -g
(下面就是创建项目)
3.vue init webpack demo 项目名称为小写名字即可 这是创建vue2.0项目
4.cd demo 进入创建的文件中
5.npm run dev 启动项目
//淘宝镜像
npm i -g cnpm --registry=https://registry.npm.taobao.org
注意：当前文件夹中不能有vue.js文件，如果有安装脚手架会报错
项目安装
1.安装脚手架完成
2.清空工作
3.创建每一个组件(后台页面)
-componets
-header.vue
-footer.vue
-main.vue
APP.vue中
<template>
<div class="box">
<v-header></v-header>
<v-main></v-main>
<v-footer></v-footer>
</div>
</template>
<script>
import vHeader from './components/header'
import vMain from './components/main'
import vFooter from './components/footer'
export default {
components: {
vHeader,
vMain,
vFooter
}
}
</script>
<style scoped>
.box{
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
</style>
在main.js中引入静态资源
// 引入静态资源
import './assets/css/reset.css'
//创建公共组件
import vDel from './components/del.vue'
Vue.component('vDel',vDel)
浙公网安备 33010602011771号