1. 组件化和模块化
- 模块化:是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一
- 组件化:是从UI界面的角度进行划分的;前端的组件化,方便UI组建的重用
- 什么是组件:组件的出现,就是为了拆分Vue实例的代码量,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可。
一、此处创建的组件均为公共组件
1.创建组件的方式一
var com1 = Vue.extend({
template:'<h3>这是使用 Vue.extend 创建的组件</h3>'
})
Vue.component('myCom1',com1)
<my-com1></my-com1>
Vue.component('myCom1',Vue.extend({
template:'<h3>这是使用 Vue.extend 创建的组件0</h3>'
}))
2. 创建组建的方式二
Vue.component('myCom1',{
template:'<h3>直接使用component创建的组件</h3>'
})
3.组件创建的方式三
<body>
<template id="tmpl">
<div>
<h1>这是通过 template 元素,在外部定义的组件结构,这个方式,有代码的提示</h1>
<h4>这个好用</h4>
<h4>注意 template 其中也是只能有一个元素</h4>
</div>
</template>
<div id="app">
<my-com1></my-com1>
</div>
<script>
Vue.component('myCom1',{
template:'#tmpl'
})
var app = new Vue({
el:'#app',
})
</script>
</body>
二、定义私有组件
var app = new Vue({
el:'#app',
components: {
loginer:{
template:'#tmpl2'
}
}
})
三、组件中的 data 和 methods
- 组件可以有自己的 data 数据
- 组建的 data 和实例(new Vue)的 data 有点不一样,实例中的 data 可以为一个对象,但是组件中的 data 必须是一个方法
- 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行
- 组件中的data数据,使用方式和实例中的 data 使用方式完全一样
四、使用 v-if 和 v-else 进行组件切换
<template id="log">
<h1>登陆界面</h1>
</template>
<template id="reg">
<h1>注册界面</h1>
</template>
<div id="body">
<a @click.prevent="flag=true">登录</a>
<a @click.prevent="flag=false">注册</a>
<login v-if="flag"></login>
<register v-else="flag"></register>
</div>
<script>
Vue.component('login',{
template:'#log'
})
Vue.component('register',{
template:'#reg'
})
var vm = new Vue({
el:"#body",
data:{
flag:true
},
methods:{
},
})
</script>