vue-day04第四天

vue-day04

1.动画

1.动画的执行过程

1.v-enter 动画进入
2.v-enter-active 动画执行过程
3.v-enter-to 动画进入完成

4.v-leave 动画离开的初始状态
5.v-leave-active 动画离开过程
6.v-leave 动画离开完成

2.使用方法

 <transition>
      <div class="box" v-show='show'></div>
</transition>

        .v-enter {
            opacity: 0;
        }

        .v-enter-active {
            transition: all 2s;
        }

        .v-enter-to {
            opacity: 1;
        }

        .v-leave {
            opacity: 1;
        }

        .v-leave-active {
            transition: all 2s;
        }

        .v-leave-to {
            opacity: 0;
        }

3.自定义动画

 <transition name='aa'>
            <div class="box1" v-show='show'></div>
        </transition>

注意：一定要把样式总的v-换成aa即可

4.离开动画的设置

5.小球半场动画案例

<body>
    <div id='app'>
        <button @click = 'show=!show'>开始</button>
        <transition  @before-enter='beforeEnter'
                     @enter = 'enter'
                     @after-enter = 'afterEnter'
        >
            <div class="ball" v-show = 'show'></div>
        </transition>
    </div>
</body>
<script src='./vue.js'></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            show:false,
        },
        methods: {
            // 动画进入之前
            // el 代表的就是你要操作的元素
            beforeEnter(el){
                el.style.transform = 'translate(0,0)'
            },
            enter(el,done){
                el.offsetTop;//目的是为了触发动画，如果不写，动画就不会执行
                el.style.transform = 'translate(300px,500px)';
                el.style.transition = "all 2s ease";
                done()  //目的是为了触发afterEnter这个函数
            },
            afterEnter(el){
                this.show=!this.show  //最终是为了让小球隐藏起来
            }

        },
    })
</script>

2.组件

定义:可复用的vue实例

1.总结全局局部

filter,component有全局和局部定义两种方式

2.component的语法

1.局部使用

components:{
            vOne:{
                template:'<div>hello</div>'
            },
            vTwo:{
                template:'<p>我是two组件</p>'
            },
            // div:{
            //     template:'<h3>我是h3</h3>'
            // },
            a1:{
                template:'<h3>我是h3</h3>'
            }
        }

2.全局使用

Vue.component('vThree',{
    template:'<div>hello11111</div>'
})

3.template

在body中写
 <template id="one">
        <div>
            <h2>我是h2</h2>
            <div class="div1">我是h2de div</div>
            <p>我是p标签的内容{{inner}}</p>
            <input type="text" v-model='name'>
            <button @click = 'change("懒洋洋")'>点击修改name</button>
        </div>
    </template>

在js中写
 components:{
            vOne:{
                // template ：有且只能有一个根节点
                template:'#one',
                filters:{
                    
                },
                // 总结：数据的返回方式必须是函数，目的是为了防止数据相互影响
                data(){
                    return {
                        inner:'我是one组件的data',
                        name:'喜洋洋'
                    }
                   
                },
                methods: {
                    change(name){
                        this.name=name;
                    }
                },
            },
        }

4.data的使用

在组件中使用数据需要注意:
// 总结：数据的返回方式必须是函数，目的是为了防止数据相互影响
data(){
    return {
        inner:'我是one组件的data',
        name:'喜洋洋'
    }

},

5.组件嵌套

在js中写 
components:{
            vOne:{
                template:'#one',
                components:{
                    vTwo:{
                        template:'#two',
                        components:{
                            vThree:{
                                template:'#three'
                            }
                        }
                    }
                }
            }
        }

在页面中的嵌套关系: 
<body>
    <div id='app'>
        <v-one></v-one>
    </div>
    <template id="one">
        <div class="box">
            <h2>this is one</h2>
            <v-two></v-two>
        </div>
    </template>
    <template id="two">
        <div class="box">
            <h2>this is two</h2>
            <v-three></v-three>
        </div>
    </template>
    <template id="three">
        <div class="box">
            <h2>this is three</h2>
        </div>
    </template>
</body>

注意：嵌套关系是只有父子关系和非父子关系，子组件只能嵌套在父组件的模板中

3.vue脚手架

1.安装

1.安装webpack

cnpm i wepback -g

2.安装脚手架vue-cli

cnpm i vue-cli -g

3.创建项目

vue init webpack demo (注意名字不能带大写)

4.启动项目

cd demo
npm run dev    启动后去localhost:8080访问

posted @ 2020-10-13 20:52 默默的1 阅读(111) 评论(0) 收藏举报

刷新页面返回顶部