整理一下vue笔记 - web吧

level 2

乱涂乱画i 楼主

vue基础篇之组件
组件是可复用的Vue实例，vue里面用到组件的好处主要是提高代码的复用率，便于后期管理维护代码。
注册组件，传入一个扩展过的构造器
Vue.component("v-header",Vue.extend({ }))
注册组件，传入一个选项对象（自动调用 Vue.extend）
Vue.component("v-footer",{ })
vue实例化中components { ‘组件名’: 组件内容 }
components:{
"v-con":{
template:"<div><h2>container</h2></div>"
}
}
一个例子
//index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我要编程http://www.51program.com
<script src="../8-20/js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out">
<v-header></v-header>
<v-con></v-con>
<v-footer></v-footer>
</div>
</body>
<script type="text/javascript">
// 1.注册组件，传入一个扩展过的构造器
Vue.component("v-header",Vue.extend({
template:"<div><h1>hello header</h1></div>"
}))
//2. 注册组件，传入一个选项对象（自动调用 Vue.extend）
Vue.component("v-footer",{
template:"<div><h3>hi footer</h3></div>"
})
// 获取注册的组件（始终返回构造器）
var MyComponent = Vue.component('v-header')
console.log(MyComponent)
var vm = new Vue({
el:"#out",
data:{
},
//3.vue实例化中 components { ‘组件名’: 组件内容 }
//私有组件
components:{
"v-con":{
template:"<div><h2>container</h2></div>"
}
}
})
</script>
</html>

2018年08月22日 07点08分 1