vue-> 过渡(动画) （它的本质走的是css3: transtion ,animation）
方法一
toggle(){ //methods
this.bSign=!this.bSign;
}
<div id="div1" v-show="bSign" transition="fade"></div>//动画名fade data:{data:{bSign:true}}
.fade-transition{
transition: 1s all ease;
}
.fade-enter{//进入
opacity: 0;
}
.fade-leave{//离开
opacity: 0;
transform: translateX(200px);
}
方法二 （推荐） 引入 animate.css
methods:{
toggle(){
this.bSign=!this.bSign;
}
},
transitions:{ //定义所有动画名称 vue的方法
bounce:{
enterClass:'zoomInLeft',//animate.css的动画
leaveClass:'zoomOutRight'
}
}
<div id="div1" class="animated" v-show="bSign" transition="bounce"></div>点击的时候执行bounce
组件 （就是一个大对象）
组件里面放数据:data必须是函数的形式，函数必须返回一个对象(json)
1. 全局注册组件 (不常用)
var oExt=Vue.extend({//继承 创建一个组件构造器
data(){//函数形式
return {//返回一个json return
msg:'Hellow word'
};
}
template:'<h3>{{msg}}</h3>'
});
Vue.component('oExt',oExt);//全局注册组件
2. 局部组件 (放到某个组件内部) (不常用)
var oExt=Vue.extend({
template:'<h3>{{msg}}</h3>',
data(){
return {
msg:'Hellow'
}
}
});
var vm=new Vue({
el:'#box',
components:{ //局部组件
oExt:oExt
}
});
3. 另一种编写方式 全局
<o-ext></o-ext>
Vue.component('o-ext',{
template:'<p>123435</p>'
});
var vm=new Vue({
el:'#box'
});
4.另一种编写方式2 局部
var vm=new Vue({
el:'#box',
components:{
'my-aaa':{
data(){
return {
msg:'welcome vue'
}
},
methods:{
change(){
this.msg='changed';
}
},
template:'<h2 @click="change">标题2->{{msg}}</h2>'
}
}
});
组件-模版
1.就是上面说的这种
template:'<h2 @click="change">标题2->{{msg}}</h2>'
2.单独放到某个地方
a).
<my-aaa></my-aaa>//显示
<script type="x-aaa" id="aaa"> //模板 为了不让浏览器认为他是写js的 在type更改任意类型就行
<h2>标题2->{{msg}}</h2>
<ul>
<li>1111</li>
<li>222</li>
<li>3333</li>
<li>1111</li>
</ul>
</script>
var vm=new Vue({
el:'#box',
components:{//组件 注意这块是components
'my-aaa':{
data(){
return {
msg:'welcome vue'
}
}
template:'#aaa'
}
}
});
b).用<template></template>包裹 （常用模板）
<template id="aaa">
<h1>标题1</h1>
<ul>
<li v-for="val in arr">
{{val}}
</li>
</ul>
</template>
动态组件
<input type="button" @click="a='one'" value="one组件">
<input type="button" @click="a='two'" value="two组件">
<component :is="type"></component>//根据type判断是那个模板
var vm=new Vue({
el:'#box',
data:{
type:'one'//默认显示组件一
},
components:{
'one':{
template:'<h2>我是one组件</h2>'
},
'two':{
template:'<h2>我是two组件</h2>'
}
}
});
