VueJs第三天1 -动画与组件
程序员文章站
2024-01-13 22:29:40
...
VueJS第三天1–动画
bower(前端包管理器)
npm install bower -g
bower install
bower uninstall
bower info vue
bower install vue#1.0.28
- 动画 (进入 出去)
<div id="div1" class="animated" v-show="bSign" transition="bounce">
new Vue({
el:'',
data:{
bSign=true;
},
methods:{
toggle(){
this.bSign=!this.bSign
}
},
transitions:{ //定义所有动画名称
bounce:{
enterClass:'zoomInLeft', //这里用的就是animate.css中定义的动画样式
leaveClass:'zoonOutRight'
}
}
})
- Vue组件 组件就是一个大对象
全局组件
<div id="#box">
<aaa></aaa>
<div>
var Aaa=Vue.extend({
data(){
return {
msg:'标题'
}
},
methods:{
change(){
alert(123);
}
}
template:"<h1 @click="change">{{msg}}</h1>"
});
Vue.component('aaa',Ass); //全局组件
var vm=new Vue({
el:'#box',
data:{
}
})
局部组件
<div id="#box">
<aaa></aaa>
<div>
var Aaa=Vue.extend({
data(){
return {
msg:'标题'
}
},
methods:{
change(){
alert(123);
}
}
template:"<h1 @click="change">{{msg}}</h1>"
});
var vm=new Vue({
el:'#box',
data:{
},
components:{ //局部组件
aaa:Aaa
}
})
上一篇: ACID - 数据库