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>
Processed:
0.036, SQL:
9
