VUE-组件
全局组件定义的三种方式
使用Vue.extend配合Vue.component方法：
varlogin=Vue.extend({
template:'<h1>登录</h1>'
});
Vue.component('login',login);
直接使用Vue.component方法：
Vue.component('register',{
template:'<h1>注册</h1>'
});
将模板字符串，定义到script标签种：
<scriptid="tmpl"type="x-template">
<div><ahref="#">登录</a>|<ahref="#">注册</a></div>
</script>
同时，需要使用Vue.component来定义组件：
Vue.component('account',{
template:'#tmpl'
});
在组件中，data需要被定义为一个方法，例如：
Vue.component('account',{
template:'#tmpl',
data(){
return{
msg:'大家好！'
}
},
methods:{
login(){
alert('点击了登录按钮');
}
}
});
在子组件中，如果将模板字符串，定义到了script标签中，那么，要访问子组件身上的data
属性中的值，需要使用this来访问；
【重点】为什么组件中的data属性必须定义为一个方法并返回一个对象
示例：
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metaname="viewport"content="width=device-width,initial-scale=1.0">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
<scriptsrc="./lib/vue-2.4.0.js"></script>
</head>
<body>
<divid="app">
<counter></counter>
<hr>
<counter></counter>
<hr>
<counter></counter>
</div>
<templateid="tmpl">
<div>
<inputtype="button"value="+1"@click="increment">
<h3>{{count}}</h3>
</div>
</template>
<script>
vardataObj={count:0}
//这是一个计数器的组件,身上有个按钮,每当点击按钮,让data中的count值+1
Vue.component('counter',{
template:'#tmpl',
data:function(){
//returndataObj
return{count:0}
},
methods:{
increment(){
this.count++
}
}
})
//创建Vue实例，得到ViewModel
varvm=newVue({
el:'#app',
data:{},
methods:{}
});
</script>
</body>
</html>
2.3使用components属性定义局部子组件
组件实例定义方式：
<script>
//创建Vue实例，得到ViewModel
varvm=newVue({
el:'#app',
data:{},
methods:{},
components:{//定义子组件
account:{//account组件
template:'<div><h1>这是Account组件{{name}}</h1><login></login></div>',//在这里
使用定义的子组件
components:{//定义子组件的子组件
login:{//login组件
template:"<h3>这是登录组件</h3>"
}
}
}
}
});
</script>
引用组件：
<divid="app">
<account></account>
</div>
使用flag标识符结合v-if和v-else切换组件
页面结构：
<divid="app">
<inputtype="button"value="toggle"@click="flag=!flag">
<my-com1v-if="flag"></my-com1>
<my-com2v-else="flag"></my-com2>
</div>
Vue实例定义：
<script>
Vue.component('myCom1',{
template:'<h3>奔波霸</h3>'
})
Vue.component('myCom2',{
template:'<h3>霸波奔</h3>'
})
//创建Vue实例，得到ViewModel
varvm=newVue({
el:'#app',
data:{
flag:true
},
methods:{}
});
</script>
2.4使用:is属性来切换不同的子组件，并添加切换动画
组件实例定义方式：
//登录组件
constlogin=Vue.extend({
template:`<div>
<h3>登录组件</h3>
</div>`
});
Vue.component('login',login);
//注册组件
constregister=Vue.extend({
template:`<div>
<h3>注册组件</h3>
</div>`
});
Vue.component('register',register);
//创建Vue实例，得到ViewModel
varvm=newVue({
el:'#app',
data:{comName:'login'},
methods:{}
});
使用component标签，来引用组件，并通过:is属性来指定要加载的组件：
<divid="app">
<ahref="#"@click.prevent="comName='login'">登录</a>
<ahref="#"@click.prevent="comName='register'">注册</a>
<hr>
<transitionmode="out-in">
<component:is="comName"></component>
</transition>
</div>
添加切换样式：
<style>
.v-enter,
.v-leave-to{
opacity:0;
transform:translateX(30px);
}
.v-enter-active,
.v-leave-active{
position:absolute;
transition:all0.3sease;
}
h3{
margin:0;
}
</style>
posted on
