vue组件化
2018-11-16 本文已影响0人
A_9c74
什么是组件：
组件的出现，就是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能模块，将来我们需要什么样的功能，就可以去调用对应的组件即可；
组件化和模块化的不同：
- 模块化：是从代码逻辑的角度进行划分的；
- 组件化：是从UI界面的角度进行划分的；
创建组件的三种方式：
方式一：
Vue.component定义全局组件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="js/vue.js"></script>
<body>
<div id="app">
<!--<mycom1></mycom1>-->
<my-com1></my-com1>
</div>
</body>
<script>
/*var com1=Vue.extend({
template:"<h3>这是使用Vue.extend创建的组件</h3>"//通过template属性，指定了组件要展示的HTML结构
})*/
//Vue.component('mycom1',com1)
/*如果使用驼峰命名 则引用组件的时候，需要把大写的驼峰改为小写的字母，同时 两个单词之间 用-连接*/
/*第一个参数 组件的名称，将来在引用组件的时候就是通过这个名称来当做标签进行引用*/
/*第二个参数 Vue.extend创建的组件，其中template 就是组件将来要展示的HTML结构*/
Vue.component('myCom1',Vue.extend({
template:"<h3>这是使用Vue.extend创建的组件</h3>"//通过template属性，指定了组件要展示的HTML结构
}))
var vm=new Vue({
el:'#app',
data:{
}
})
</script>
</html>
方式二:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<mycom2></mycom2>
</div>
</body>
<script>
Vue.component('mycom2',{
//不论是哪种方式创建出来的组件，组件的template属性指向的模版内容，必须有且只能有唯一的一个根元素
template: '<div><h3>这是直接使用Vue.component创建出来的组件</h3><span>123</span></div>'
})
var vm=new Vue({
el:"#app"
})
</script>
</html>
方式三：
外部定义组件模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!--在被控制的#app 外面 使用 template元素 定义 组件的html结构-->
<mycom3></mycom3>
</div>
<div id="app2">
<login></login>
</div>
<template id="tmpl">
<div>
<h1>这是通过template元素在外部定义的组件结构</h1>
</div>
</template>
<template id="tmpl2">
<div>
<h1>这是私有组件</h1>
</div>
</template>
</body>
<script>
Vue.component('mycom3',{
template:'#tmpl'
})
var vm=new Vue({
el:"#app"
})
/*通过 components定义一个私有组件*/
var vm2=new Vue({
el:"#app2",
components:{
login:{
template:'#tmpl2'
}
}
})
</script>
</html>
