VUE重复

作者: 文朝明 | 来源:发表于2020-01-26 16:18 被阅读0次

1.写一个index.html页面

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>hello world</title>
    <script src="./vue.js"></script>

</head>
<body>
<div id="app">{{content}}</div>
<script>
    var app=new Vue({
        el:'#app',//限制vue实例的范围
        data:{//定义数据
            content:'hello world'
        }
    })
</script>
</body>
</html>

vue.js：引入js库
el:限制vue实例的范围
data:定义数据
{{content}}：引入绑定数据

2.改变页面内容

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>hello world</title>
    <script src="./vue.js"></script>

</head>
<body>
<div id="app">{{content}}</div>
    <script>
    var app=new Vue({
        el:'#app',
        data:{
            content:'hello world'
        }
    })
    setTimeout(function(){
app.$data.content="bye world"
},1000)
    </script>
</body>
</html>

app.$data.content
app:vue实例
$data：data的对象
content：data对象里具体的数据

3.实现todolist

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>todolist</title>
    <script src="./vue.js"></script>

</head>
<body>
<div id="app">
<input type="text"  v-model="inputValue"/>
<button v-on:click="handleBtnClick">提交</button>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>

    <script>
    var app=new Vue({
    el:'#app',
    data:{
    list:['第一','第二','第三','第四','第五'],
    inputValue:"增加一条"
        },
    methods:{
    handleBtnClick:function(){
        this.list.push(this.inputValue),
        this.inputValue=""
    }
    }
    })
    </script>
</body>
</html>

v-for:将数据进行循环
item：循环的每一项
v-on：绑定事件
methods：事件的方法
v-model：数据双向绑定

4.MVVM模式

MVP：model-presenter-view(数据-逻辑模型-视图)
MVVM：Model-View-ViewModel

5.TodoList的前端组件化及组件之间传值

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>todolist组件之间传值</title>
    <script src="./vue.js"></script>

</head>
<body>
<div id="app">
<input type="text"  v-model="inputValue"/>
<button v-on:click="handleBtnClick">提交</button>
<ul>
<todo-item 
    :content="item" 
    :index="index"
    v-for="(item,index)  in list"
    @delete="handleItemDelete">
</todo-item>
</ul>
</div>

    <script>
    /*--子组件-*/
    var TodoItem={
        props:['content','index'],
        template:"<li @click='handleItemClick'>{{content}}</li>",
        methods:{
        handleItemClick:function(){
        console.log('222')
            this.$emit("delete",this.index)
            console.log(this.index)
        }
        }
    }
        /*--父组件-*/
    var app=new Vue({
    el:'#app',
            components:{
        TodoItem:TodoItem
        },
    data:{
    list:['第一','第二','第三','第四','第五'],
    inputValue:"增加一条"
        },

    methods:{
    handleBtnClick:function(){
        this.list.push(this.inputValue)
        this.inputValue=""
    },
        handleItemDelete:function(index){
        this.list.splice(index,1)
    }
    }
    })
    </script>
</body>
</html>

注：@delete

Vue.component:创建全局化的组件
<todo-item>：组件的模板
v-bind（:）：传入绑定值
props：接收内容
v-on(@):监听事件
【1】v-for循环list的内容item，并通过v-bind用content绑定item，并传递给<todo-item>,再用props接收content值，在template中以插值表达式{{content}}渲染出来；
$emit:触发事件

5.2.Vue实例

var vm=new Vue({
})

每个组件都是一个实例，vue页面由许多实例组成

6.生命周期函数

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>Vue实例生命周期函数</title>
    <script src="./vue.js"></script>

</head>
<body>
<div id="app">Vue实例生命周期函数</div>

    <script>
    var vm=new Vue({
    el:"#app",
    template:"<div>{{test}}</div>",
    data:{
    test:"Vue实例生命周期函数x"
        },
    beforeCreate:function(){
    console.log("beforeCreate")
    },
        created:function(){
    console.log("Created")
    },
    //数据传递
            beforeMount:function(){
    console.log(this.$el)
    },
                mounted:function(){
    console.log(this.$el)
    },
    //vm.$destroy()销毁
        beforeDestroy:function(){
    console.log("beforeDestroy")
    },
        destroyed:function(){
    console.log("Destroyed")
    },
    //vm.test="dell"改变数据
            beforeUpdate:function(){
    console.log("beforeUpdate")
    },
        updated:function(){
    console.log("updated")
    },
    })
    </script>
</body>
</html>

生命周期：vue实例在某一时间点会自动执行的函数
beforeCreate:初始化事件和生命周期创建结束之后
Create:数据的外部注入和双向绑定之后
beforeMount:模板和数据结合，即将加载到页面之前
Mount:页面加载之后
beforeUpdate：数据更改，重新渲染之后
Update：数据更改，渲染完之后
beforeDestroy：组件销毁之前
Destroy：组件销毁之后

7.模板语法

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>Vue模板语法</title>
    <script src="./vue.js"></script>

</head>
<body>
<div id="app">
<div id="vw"  >{{name+" ——id"}}</div>
<div v-text="name+' ——text'"></div>
<div v-html="name+' ——html'"></div>
</div>

    <script>
    var vm=new Vue({
    el:"#app",
    data:{
    name:"<h1>这里是模板语法，注意区分区别</h1>"
        },
        })
    </script>
</body>
</html>

8.计算属性和侦听器

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>Vue计算属性，方法与监听器</title>
    <script src="./vue.js"></script>

</head>
<body>
<div id="app">
<!--方法没有缓存-->
<!--fullName()-->
<!--计算属性有缓存-->
{{fullName}}
{{age}}
</div>

    <script>
    var vm=new Vue({
    el:"#app",
    data:{
    firstName:"周",
    lastName:"假伦",
    age:"18",
        },

        //计算属性
        computed:{
        fullName:function(){
        console.log('计算了一次computed')
            return this.firstName+""+this.lastName
        }
    },
        //方法
        //methods:{
        //  fullName:function(){
        //  console.log("计算了1次")
        // this.firstName+""+this.lastName
//}
//},
        //监听器
        watch:{
            firstName:function(){
                console.log('计算了1次first')
            this.fullName=this.firstName+""+this.lastName
            },
                
            lastName:function(){
            console.log('计算了1次last')
            this.fullName=this.firstName+""+this.lastName
            }
        }
        })
    </script>
</body>
</html>

computed:计算属性，内置缓存（避免多次计算，优化页面性能）
watch：侦听器，侦听数据改变，则出发方法
watch和computed都有内置缓存属性，computed更加简洁，效率高

9.计算属性setter&getter

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>Vue计算属性setter&getter</title>
    <script src="./vue.js"></script>

</head>
<body>
<div id="app">
{{fullName}}
</div>

    <script>
    var vm=new Vue({
    el:"#app",
    data:{
    firstName:"周",
    lastName:"假伦",
        },

        //计算属性--依赖的值变化，就会重新计算
        computed:{
        fullName:{function(){
    get:function(){
    return this.firstName+""+this.lastName
    },
    set:function(value){
    var arr=value.splice("")
    this.firstName=arr[0]
    this.lastName=arr[1]
        console.log(value)
    }
            
        }
        }
    },

        })
    </script>
</body>
</html>

方法中
get：取属性值时候会执行（其所依赖的值变化后，会重新计算）
set：设置属性值时会执行

10.列表渲染

<head>
    <meta charset="utf-8" />
    <title>列表渲染</title>
    <script src="./vue.js"></script>

</head>
<body>
<div id="app">
<!--单组数组循环-->
<h1>【单组数组循环】</h1>
<div v-for="(item,index) in list" key="item.id">
[text:]{{item.text}}——[index:]{{index}}——[id:]{{item.id}}
</div>
    <!--多组数组循环-template模板占位符-->
    <h1>【多组数组循环-template模板占位符】</h1>
<template v-for="(item,index) in list" key="item.id">
<p>[text:]{{item.text}}——[index:]{{index}}</p>
<span>[id:]{{item.id}}</span>
</template>
    <!--对象循环-->
    <h1>【对象循环】</h1>
<div v-for="(item,key,index) in userInfo">
[item:]{{item}}——[key:]{{key}}——[index:]{{index}}</div>
</div>
    <script>
    //push  pop(删除最后一项) shift(删除第一项) unshift（第一项里加内容）
    //splice sort（排序）  reverse（取反）
    
    var vm=new Vue({
    el:"#app",
    data:{
    list:[{
    id:"001",
    text:"你看"
    },
    {
    id:"002",
    text:"这碗面"
    },
        {
    id:"003",
    text:"又长"
    },
    {
    id:"004",
    text:"又短"
    },
    {
    id:"005",
    text:"又辣"
    },
    {
    id:"006",
    text:"又香"
    },
    {
    id:"007",
    text:"又甜"
    }
    ],
    userInfo:{
    name:"黄李馨萱",
    age:"18",
    gender:"male",
    salary:"$100000"}
},
    })
    </script>
</body>
</html>

<template>:模板占位符

11.条件渲染


<head>
   <meta charset="utf-8" />
   <title>条件渲染</title>
   <script src="./vue.js"></script>

</head>
<body>
<div id="app">
<div v-if="show==='a'"  data-test="v-if">用户名<input  key="un"/></div>
<div v-else-if="show==='b'"  data-test="v-else-if">密码<input key="pw"/></div>
<div v-else  data-test="v-else">邮箱<input key="mail"/></div>
<!--<div v-else="show"  data-test="v-else">others</div>-->
<div v-show="show"   data-test="v-show">{{message}}</div>
</div>
   <script>
   var vm=new Vue({
   el:"#app",
   data:{
   show:'a',
       message:"h w"
   },
   })
   </script>
</body>
</html>

v-if：变量值为false，dom就删除了；
v-else-if
v-else
v-show：变量值为false，dom只是隐藏，并没有删除；所以需要频繁变动，v-show页面性能更高

12.样式绑定

<head>
    <meta charset="utf-8" />
    <title>样式绑定</title>
    <script src="./vue.js"></script>
    <style>
    .activated{color:#ff0000;}
        </style>
</head>
<body>
    <div id="app">
    <div :class="{activated:isActivated}" @click="handleDivClick">{{content}}
    </div>
        </div>
    <script>
    var vm=new Vue({
    el:"#app",
    data:{
    content:"出现吧，神龙！",
    isActivated:false
    
    },
        methods:{
        handleDivClick:function(){
    this.isActivated=true
    }
    }
    })

    </script>
</body>
</html>

data:{isActivated:false}
class="{activated:isActivated}"
@click

13.模板中的is属性

虽然符合Vue模板，但不符合H5规则
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>组件使用中的细节</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <table>
            <tbody>
                <!--<tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>-->
                <row></row>
                <row></row>
                <row></row>
            </tbody>
        </table>
    </div>
    <script>

        Vue.component('row',
            {
                template: "<tr><td>this is  a row</td></tr>"
            }
        )
        var vm = new Vue({
            el: "#root"
        })
    </script>
</body>
</html>

所以我们需要用到模板中的is属性。


<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>组件使用中的细节</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <table>
            <tbody>
                <!--<tr><td>1</td></tr>
                <tr><td>2</td></tr>
                <tr><td>3</td></tr>
                <row></row>
                <row></row>
                <row></row>-->
                <tr is="row"></tr>
                <tr is="row"></tr>
                <tr is="row"></tr>
            </tbody>
        </table>
    </div>
    <script>

        Vue.component('row',
            {
                template: "<tr><td>this is  a row</td></tr>"
            }
        )
        var vm = new Vue({
            el: "#root"
        })
    </script>
</body>
</html>

<tr is="row"></tr>而非<row></row>

14.模板子组件中的data定义

子组件中，data必须是函数，因为可能被调用多次，函数能避免重复和冲突
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>组件中赋值方法</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <table>
            <tbody>
                <tr is="row"></tr>
                <tr is="row"></tr>
                <tr is="row"></tr>
            </tbody>
        </table>
    </div>
    <script>

        Vue.component('row',
            { data: {
                content:"this is  a row"
            }，
                template: "<tr><td>{{content}}</td></tr>"
            }
        )
        var vm = new Vue({
            el: "#root",
           
        })
    </script>
</body>
</html>

通过ref引用来操作dom

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>组件中ref引用</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <div ref="hello" @click="handleClick">ref引用</div>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            methods: {
                handleClick: function () {
                    //vue中所有引用中叫做hello的引用
                    console.log(this.$refs.hello.innerHTML)

                }
            }
        })
    </script>
</body>
</html>

<div ref="hello":引用名为hello的dom
this.$refs.hello.innerHTML：在方法中引用dom节点进行操作

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
 <meta charset="utf-8" />  
 <title>组件中ref引用</title>  
 <script src="./vue.js"></script>  
 </head>  
 <body>  
 <div id="root">  
 <counter ref="one" @change="handleChange"></counter>  
 <counter ref="two" @change="handleChange"></counter>  
 <div>{{total}}</div>  
 </div>  
 <script>  
 Vue.component('counter', {  
 template: '<div @click="handleClick">{{number}}</div>',  
 data: function () {  
 return {  
 number:0  
 }  
 },  
 methods: {  
 handleClick: function () {  
 this.number++  
 this.$emit('change')  
 }  
 }  
 })  
 var vm = new Vue({  
 el: '#root',  
 data: {  
 total:0  
 },  
 methods: {  
 handleChange: function () {  
 // console.log("change")  
 // console.log(this.$refs.one.number)  
 this.total=this.$refs.one.number+ this.$refs.two.number  
   }  
 }  
 })  
 </script>  
 </body>  
 </html>

 点击后触发handleClick，数字递增并$emit（’change‘）触发change属性，其绑定的handleChange被触发。
然后通过$ref获取dom节点元素，进行total相加减。

16.父子组件之间的传值

父组件通过属性向子组件传值;
子组件通过事件触发向父组件传值；
单项数据流：父组件可以向子组件传递任何数据，
                      子组件不能改变父组件传递过来的数据，可以通过拷贝副本来实现修改，


<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>父子组件传值</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">   
<!---加冒号是数字，不加则是字符串--->
<!---父组件监听从子组件传过来的事件inc--->
        <counter :count="3" @inc="handleIncrease"></counter>
        <counter :count="2" @inc="handleIncrease"></counter>
        <div>{{total}}</div>
    </div>
    <script>
        var counter = {
            props: ['count'],
//子组件data必须是函数
            data: function () {
                return {
//复制父组件传递过来的count数据，命名为number
                    number:this.count
                }
            },
             //template: '<div  @click="handleClick">{{count}}</div>',
            template: '<div  @click="handleClick">{{number}}</div>',
            methods: {
                handleClick: function () {
                    //子组件不能随意改变父组件的数据，要通过拷贝副本了来实现
                   // this.count++
                   // this.number++
                    this.number=this.number+1
// 子组件通过触发change事件向父组件传值，并传递一个自己决定的参数数字
                    this.$emit('inc',1)//
                }
            }

        }
        var vm = new Vue({
            el: '#root',
            data: {
                total:5
            },
            components: {
                counter: counter
            },
            methods: {
                handleIncrease: function (step) {
                    console.log(step)
                    this.total+=step
                }
            }
        })
    </script>
</body>
</html>

count="1": 字符串
:count="1": 数字
:count="1"：父组件通过属性向子组件传值
props:子组件接收父组件的值
inc（随机命名）：子组件像父组件传递这个事件，监听后进行传值
step（随机命名）：接收传递来的数据

17.组件参数校验与非props特性

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>组件参数校验与非props特性</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <!--String-->
        <!--<child content="hello world"></child>-->
        <!--Number-->
        <!----<child :content="123"></child>-->
        <child content="hel"></child>
    </div>
    <script>
        Vue.component('child', {
            // props: ['content'],
            //组件参数验证
            props: {
               // content:String限定传递过来的数据类型
              //  content:Number
               // content:[String,Number]
                content: {//限定数据类型并限制大小
                    type: String,
                   // required: true,是否接受
                  //  default: 'default value',如果不传content，就会给你一个默认值，页面就显示这个default value
                    validator: function (value) {//要求传入的内容的值必须大于5
                        return (value.length>5)
                    }
                }
            },
            template: '<div>{{content}}</div>'
        })
        var vm = new Vue({
            el: '#root',

        })
    </script>
</body>
</html>

props特性：父组件向子组件传值时，子组件恰好声明了接收；其传递的值不会在dom标签上显示；子组件可以直接使用父组件传来值在模板里面使用。
非props特性：父组件向子组件传值时，子组件没有声明接收；子组件中也无法使用传来的值；其传递的值会在dom标签上显示。

18.给组件绑定原生事件

@click.native直接一次性监听触发handleclick事件
<head>
    <meta charset="utf-8" />
    <title>给组件绑定原生事件</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <!--@click.native是原生事件-->
        <child @click.native="handleClick"></child>
    </div>


    <script>
        Vue.component('child', {
            template: '<div>child</div>',
        })
        var vm = new Vue({
            el: "#root",
            methods: {
                /*监听自定义事件*/
                handleClick: function () {
                    console.log('handleClick')
                },
            }
        })

    </script>
</body>
</html>
下面写法要监听两次，甚至可以不看
这样要 
<head>
    <meta charset="utf-8" />
    <title>给组件绑定原生事件</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <child @click="handleClick"></child>
    </div>


    <script>
        Vue.component('child', {
            template: '<div @click="handleChildClick">child</div>',
            methods: {
                //监听原生事件
                handleChildClick: function () {
                    console.log('handleChildClick')
                    //子组件触发父组件自定义事件用$emit
                    this.$emit('click')
                }
            }
        })
        var vm = new Vue({
            el: "#root",
            methods: {
                /*监听自定义事件*/
                handleClick: function () {
                    console.log('handleClick')
                },
            }
        })

    </script>
</body>
</html>

@click.native直接一次性监听触发handleclick事件

19.非父子组件之间的传值(Bus/总线、发布订阅模式、观察者模式)

<head>
    <meta charset="utf-8" />
    <title>非父子组件之间的传值(Bus/总线、发布订阅模式、观察者模式)</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
<!---这里是两个子组件，它们之间进行传值-->
        <child content="Dell"></child>
        <child content="Lee"></child>
    </div>
    <script>
        Vue.prototype.bus=new Vue()
        Vue.component('child', {
            data: function () {
                return {
                    selfContent:this.content
                }
            },
            props: {
                content: String
            },
            template: '<div  @click="handleClick">{{selfContent}}</div>',
            methods: {
                handleClick: function () {
                   // console.log(this.content)
                    this.bus.$emit('change',this.selfContent)
                }

            },
            mounted: function () {
                var _this=this
                //监听change事件
                this.bus.$on('change', function (msg) {
                    console.log(msg)
                    _this.selfContent=msg
                })
            }
        })
        var vm = new Vue({
            el: "#root",
        })

    </script>
</body>
</html>

Vue.prototype.bus=new Vue()：在vue的类上挂了bus属性，下面的vue实例就会拥有这个属性。
子组件模板中定义点击事件handleClick，其被点击后，
通过 this.bus.$emit触发change事件并传递this.selfContent的值，
在钩子函数mounted下通过this.bus.$on监听change事件，
触发后返回一个selfContent的值，在子组件data里面接收并拷贝，就可以带入模板，达到了改变内容的目的

20.Vue中的作用域插槽

<head>
    <meta charset="utf-8" />
    <title>Vue中的作用域插槽</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <child>
            <!--作用域插槽：template开头结尾，声明从子组件接受的数据放在那里（props）,模板的展示方式（li）；
                使用场景：子组件循环或某部分dom结构由外部传递过来时候-->
            <template slot-scope="props">
                <li>{{props.item}}</li>
            </template>
        </child>
    </div>
    <script>
        Vue.component('child', {
            data: function () {
                return {
                    list: [1, 2, 3, 4]
                }
            },
             template: '<div><ul><slot v-for="item of list"  :item=item>{{item}}</slot></ul></div>'

        })
        var vm = new Vue({
            el: "#root",
        })

    </script>
</body>
</html>

作用域插槽：template开头结尾，声明(slot-scope)从子组件接受的数据放在那里（props）,模板的展示方式（li）；
使用场景：子组件循环或某部分dom结构由外部传递过来时候
<slot>：

21.动态组件与v-once指令

toggle效果
<head>
    <meta charset="utf-8" />
    <title>动态组件与v-once指令</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <child-one v-if='type==="child-one"'></child-one>
        <child-two v-if='type==="child-two"'>  </child-two>
        <button @click="handleBtnClick">change</button>
    </div>
    <script>
        Vue.component('child-one', {
            template: '<div>child-one</div>'
        })
        Vue.component('child-two', {
            template: '<div>child-two</div>'
        })
        var vm = new Vue({
            el: "#root",
            data: {
                type: "child-one"
            },
            methods: {
                handleBtnClick: function () {
                    this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
                }

            }
        })

    </script>
</body>
</html>
【动态组件】
<head>
    <meta charset="utf-8" />
    <title>动态组件与v-once指令</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <!--<child-one v-if='type==="child-one"'></child-one>
        <child-two v-if='type==="child-two"'>  </child-two>-->
        <component :is="type"></component>
        <button @click="handleBtnClick">change</button>
    </div>
    <script>
        Vue.component('child-one', {
            template: '<div>child-one</div>'
        })
        Vue.component('child-two', {
            template: '<div>child-two</div>'
        })
        var vm = new Vue({
            el: "#root",
            data: {
                type: "child-one"
            },
            methods: {
                handleBtnClick: function () {
                    this.type = this.type === 'child-one' ? 'child-two' : 'child-one'
                }

            }
        })

    </script>
</body>
</html>

toggle效果：点击按钮，如果是child-one则把对应的child-one销毁，创建child-two，然后如果是child-two就把它销毁，创建一个child-one；这样非常消耗性能
v-once动态组件：点击按钮，如果是child-one则把对应的child-one放到内存里，等从child-two换回来时候，从内存里拿出来就可以，然后把child-two放入内存，这样比toggle效果的性能要好

22.Vue中的CSS动画原理

<html>
<head>
    <meta charset="utf-8" />
    <title>Vue中的CSS动画原理</title>
    <script src="./vue.js"></script>
    <style>
        .fade-enter {
            opacity: 0
        }

        .fade-enter-active {
            transition: opacity 3s;
        }

        .fade-leave-to {
            opacity: 0
        }

        .fade-leave-active {
            transition: opacity 3s;
        }
    </style>
</head>
<body>
    <div id="root">
        <transition name="fade">
            <div v-if="show">hello world</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show
                }
            }
        })

    </script>
</body>
</html>

        .fade-enter {
            opacity: 0
        }

        .fade-enter-active {
            transition: opacity 3s;
        }

        .fade-leave-to {
            opacity: 0
        }

        .fade-leave-active {
            transition: opacity 3s;
        }

23.Vue中使用animate.css

【在Vue中使用keyframes】
<html>
<head>
  <meta charset="utf-8" />
  <title>Vue中使用animate.css库</title>
  <script src="./vue.js"></script>
  <style>
      @keyframes bounce-in {
          0% {
              transform: scale(0)
          }

          50% {
              transform: scale(1.5)
          }

          100% {
              transform: scale(1)
          }
      }

      .enter {
          transform-origin: left center;
          animation: bounce-in 3s;
      }

      .leave {
          transform-origin: left center;
          animation: bounce-in 3s reverse;
      }
  </style>
</head>
<body>
  <div id="root">
      <transition name="fade" enter-active-class="enter" leave-active-class="leave">
          <div v-if="show">hello world</div>
      </transition>
      <button @click="handleClick">切换</button>
  </div>
  <script>
      var vm = new Vue({
          el: "#root",
          data: {
              show: true
          },
          methods: {
              handleClick: function () {
                  this.show = !this.show
              }
          }
      })

  </script>
</body>
</html>
【Vue中使用animate.css】
<html>
<head>
    <meta charset="utf-8" />
    <title>Vue中使用animate.css库</title>
    <script src="./vue.js"></script>
    <link rel="stylesheet" type="text/css" href="./animate.css">

</head>
<body>
    <div id="root">
        <transition name="fade" enter-active-class="animated swing" leave-active-class="animated shake">
            <div v-if="show">hello world</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show
                }
            }
        })

    </script>
</body>
</html>

 <transition name="fade" enter-active-class="enter" leave-active-class="leave">
在@keyframes中定义名为bounce-in的动画，在下面enter等class中调用
enter-active-class=“enter”们为enter-active命名，可以明确作用域；
<transition name="fade" enter-active-class="animated swing" leave-active-class="animated shake">

24.Vue中同时使用过渡和动效

<html>
<head>
    <meta charset="utf-8" />
    <title>Vue中同时使用过渡和动效</title>
    <script src="./vue.js"></script>
    <link rel="stylesheet" type="text/css" href="./animate.css">
    <style>
        .fade-enter, .fade-leave-to {
            opacity: 0
        }

        .fade-enter-active, .fade-leave-active {
            transition: opacity 5s;
        }
    </style>
</head>
<body>
    <div id="root">
        <!--type设定时长的参照标准type="transition"--:duration直接规定动画秒数:duration="5000"-->
        <transition name="fade"
                    :duration="{enter:5000,leave:10000}"
                    appear
                    enter-active-class="animated swing fade-enter-active"
                    leave-active-class="animated shake fade-leave-active"
                    appear-active-class="animated shake">
            <div v-if="show">hello world</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>

        var vm = new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show
                }
            }
        })

    </script>
</body>
</html>

  <transition name="fade"
                    :duration="{enter:5000,leave:10000}"
                    appear
                    enter-active-class="animated swing fade-enter-active"
                    leave-active-class="animated shake fade-leave-active"
                    appear-active-class="animated shake">
            <div v-if="show">hello world</div>
appear：初始渲染的过度（第一次显示时候的效果，一般第一次就是页面初次渲染的时候）
        </transition>

25.Vue中Js动画与velocity.js的结合

<html>
<head>
    <meta charset="utf-8" />
    <title>Vue中Js动画与velocity.js的结合</title>
    <script src="./vue.js"></script>
    <script src="./velocity.js"></script>
</head>
<body>
    <div id="root">
        <transition name="fade"
                    @before-enter="handleBeforeEnter"
                    @enter="handleEnter"
                    @after-enter="handleAfterEnter">
            <div v-if="show">hello world</div>
        </transition>
        <button @click="handleClick">切换</button>
    </div>
    <script>

        var vm = new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show
                },
              handleBeforeEnter: function (el) {

                    el.style.opacity = 0
                },
                handleEnter: function (el, done) {
                    Velocity(el, {
                        opacity: 1
                    }, {
                        duration: 1000,
                        complete: done
                    })
                },
                handleAfterEnter: function (el) {
                    console.log('动画结束')
                }
            }
        })

    </script>
</body>
</html>

el:被动画包裹的标签
done:一个回调函数
  Velocity(el, {
                        opacity: 1
                    }, {
                        duration: 1000,
                        complete: done
                    })
complete: done：当 Velocity执行完动画后，complete对应的函数会被执行，即done这个回调函数会被执行

26.Vue中多个元素和组件的过渡

<html>
<head>
    <meta charset="utf-8" />
    <title>Vue中多个 元素和组件的过渡</title>
    <script src="./vue.js"></script>
    <script src="./velocity.js"></script>
    <style>
        .v-enter, .v-leave {
            opacity: 0
        }

        .v-enter-active, .leave-active {
            transition: opacity 1s
        }
    </style>
</head>
<body>
    <!--in-out 先显示再隐藏，out-in先隐藏 再显示-->
    <div id="root" mode="in-out">
        <transition>
            <div v-if="show" key="'hellow">hellow world</div>
            <div v-else track-by="bye">bye world</div>
        </transition>
        <button @click="handleClick">toggle</button>
    </div>
    <script>
        var vm = new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show
                },
            }
        })

    </script>
</body>
</html>

26.Vue中多个元素和组件的过渡

【多个元素过渡】
<html>
<head>
    <meta charset="utf-8" />
    <title>Vue中多个 元素和组件的过渡</title>
    <script src="./vue.js"></script>
    <script src="./velocity.js"></script>
    <style>
        .v-enter, .v-leave {
            opacity: 0
        }

        .v-enter-active, .leave-active {
            transition: opacity 1s
        }
    </style>
</head>
<body>
    <!--in-out 先显示再隐藏，out-in先隐藏 再显示-->
    <div id="root" mode="in-out">
        <transition>
            <child v-if="show"></child>
            <child-one v-else></child-one>
        </transition>
        <button @click="handleClick">toggle</button>
    </div>
    <script>
        Vue.component('child', {
            template: '<div>child</div>'
        })
        Vue.component('child-one', {
            template: '<div>child-one</div>'
        })
        var vm = new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show
                },
            }
        })

    </script>
</body>
</html>
【多个组件过渡1】
<html>
<head>
    <meta charset="utf-8" />
    <title>Vue中多个 元素和组件的过渡</title>
    <script src="./vue.js"></script>
    <script src="./velocity.js"></script>
    <style>
        .v-enter, .v-leave {
            opacity: 0
        }

        .v-enter-active, .leave-active {
            transition: opacity 1s
        }
    </style>
</head>
<body>
    <!--in-out 先显示再隐藏，out-in先隐藏 再显示-->
    <div id="root" mode="in-out">
        <transition>
            <child v-if="show"></child>
            <child-one v-else></child-one>
        </transition>
        <button @click="handleClick">toggle</button>
    </div>
    <script>
        Vue.component('child', {
            template: '<div>child</div>'
        })
        Vue.component('child-one', {
            template: '<div>child-one</div>'
        })
        var vm = new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                handleClick: function () {
                    this.show = !this.show
                },
            }
        })

    </script>
</body>
</html>
【多个组件过渡2】
<html>
<head>
    <meta charset="utf-8" />
    <title>Vue中多个 元素和组件的过渡</title>
    <script src="./vue.js"></script>
    <script src="./velocity.js"></script>
    <style>
        .v-enter, .v-leave {
            opacity: 0
        }

        .v-enter-active, .leave-active {
            transition: opacity 1s
        }
    </style>
</head>
<body>
    <!--in-out 先显示再隐藏，out-in先隐藏 再显示-->
    <div id="root" mode="in-out">
        <transition>
            <component :is="type"></component>
        </transition>
        <button @click="handleClick">toggle</button>
    </div>
    <script>
        Vue.component('child', {
            template: '<div>child</div>'
        })
        Vue.component('child-one', {
            template: '<div>child-one</div>'
        })
        var vm = new Vue({
            el: "#root",
            data: {
                /* show: true*/
                type: 'child'
            },
            methods: {
                handleClick: function () {
                    this.type = this.type === 'child' ? 'child-one' : 'child'
                },
            }
        })

    </script>
</body>
</html>

 mode="in-out"：in-out 先显示再隐藏，out-in先隐藏 再显示

27.Vue中的列表过渡

<html>
<head>
  <meta charset="utf-8" />
  <title>Vue中的列表过渡</title>
  <script src="./vue.js"></script>
  <style>
      .v-enter, .v-leave-to {
          opacity: 0
      }

      .v-enter-active, .v-leave-active {
          transition: opacity 1s
      }
  </style>
</head>
<body>
  <div id="root">
      <transition-group>
          <div v-for="item of list" :key="item.id">
              {{item.title}}
          </div>
      </transition-group>
      <button @click="handleBtnClick">add</button>
  </div>
  <script>
      var count = 0;
      var vm = new Vue({
          el: "#root",
          data: {
              list: []
          },
          methods: {
              handleBtnClick: function () {
                  this.list.push({
                      id: count++,
                      title: 'hellow world'
                  })
              }
          }

      })

  </script>
</body>
</html>

<transition-group>:过渡包裹标签

28.Vue中的动画封装

[不带样式]
<html>
<head>
    <meta charset="utf-8" />
    <title>Vue中的动画封装</title>
    <script src="./vue.js"></script>
    <style>
        .v-enter, .v-leave {
            opacity: 0
        }

        .v-enter-active, .v-leave-active {
            transition: opacity 1s
        }
    </style>
</head>
<body>
    <div id="root">
        <fade :show="show">
            <div>hellow world</div>
        </fade>
        <fade :show="show">
            <h1>hellow world</h1>
        </fade>
        <button @click="handleBtnClick">toggle</button>
    </div>
    <script>
        //封装
        Vue.component('fade', {
            props: ['show'],
            template: '<transition><slot v-if="show"></slot></transition> '
        })
        var vm = new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                handleBtnClick: function () {
                    this.show = !this.show
                },
            }
        })

    </script>
</body>
</html>
[带样式]
<html>
<head>
    <meta charset="utf-8" />
    <title>Vue中的动画封装</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <fade :show="show">
            <div>hellow world</div>
        </fade>
        <fade :show="show">
            <h1>hellow world</h1>
        </fade>
        <button @click="handleBtnClick">toggle</button>
    </div>
    <script>
        //封装
        Vue.component('fade', {
            props: ['show'],
            template: '<transition @before-enter="handleBeforeEnter" @enter="handleEnter"><slot v-if="show"></slot></transition>',
            methods: {
                handleBeforeEnter: function (el) {
                    el.style.color = 'red'
                },
                handleEnter: function (el, done) {
                    setTimeout(() => {
                        el.style.color = 'green'
                        done()
                    }, 2000)
                }
            }
        })
        var vm = new Vue({
            el: "#root",
            data: {
                show: true
            },
            methods: {
                handleBtnClick: function () {
                    this.show = !this.show
                },
            }
        })

    </script>
</body>
</html>

[不带样式] Vue.component写一个组件, 在里面写一个template: '<transition>模板,里面加入插槽<slot v-if="show">，接受变量props:['show']，根据props判断是否被显示；
在页面模板添加<fade show="show">标签。
[带样式] 用js，定义handleBeforeEnter，handleBeforeEnter，在其函数中增加样式效果。

VUE重复

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读