Vue的核心思想
A.数据化驱动
B.组件化驱动:最强大的核心功能之一
1.定义组件(component)
①全局定义
a) 扩展组件
var component=Vue.extend({
template:'<div></div>'
});
注册组件
Vue.component('div-app',component);
挂载到实例上面去
new Vue({
el:'#app'
})
b)
Vue.component('div-app', {
template:` //:模板属性,用来放置你需要封装的html代码
<div class="alert alert-secondary" role="alert">
This is a secondary alert—check it out!
</div>
});
例:
<div id="app1">
<div-app></div-app>
</div>
<script src="vue/vue.min.js"></script>//引用VUE库
<script>
/*全局*/
var component=Vue.extend({
template:'<div>这是一个全局</div>',
});
Vue.component('div-app',component);
new Vue({
el:'#app1'
});
</script>
②局部定义
a)
new Vue({
el: '#app1',
components: {
'div-app': {
template: `<div >xxxxx</div>`,
}
}
});
b)
var div = {
template: `<div>xxxxx</div>`,
};
new Vue({
el: '#app1',
components: {
' div-app': div
}
});
c):通过template标签
例:
/*局部 兄弟*/
<div id="app">
<div-aoo></div-aoo>
<div-abb></div-abb>
</div>
<template id="app1">
<div>{{msg1}}</div>
</template>
<template id="app2">
<div>{{msg2}}</div>
</template>
<script src="vue/vue.min.js"></script>
<script>
/*局部 兄弟*/
new Vue({
el:'#app',
components:{
'div-aoo':{
template:'#app1',
data:function(){
return{
msg1:'这是一个局部',
}
}
},
'div-abb':{
template:'#app2 ',
data:function(){
return{
msg2:'这是局部的兄弟'
}
}
}
}
})
</script>
ps:
1 组件里面的data必须通过函数来定义,并且通过return返回数据源
2 在template里面如果是几个平行的元素,那么需要一个空元素将他们包起来
例:
/*局部 父子*/
<div id="app">
<div-app></div-app>
</div>
<template id="app1">
<div>
{{msg}}
<h1-app></h1-app>
</div>
</template>
<template id="h1">
<div>
<div>
<h1 class="display-3">{{msg2}}</h1>
</div>
</div>
</template>
<script src="vue/vue.min.js"></script>
<script>
/*局部 父子*/
new Vue({
el: '#app',
components: {//父组件
'div-app': {
template: '#app1',
data: function () {
return {
msg1: '这是局部的劳资',
}
},
components: {//子组件
'h1-app': {
template: '#h1',
data: function () {
return {
msg2: '这是局部的儿砸'
}
}
}
}
}
}
});
</script>