vue学习 生命周期，组件

vue生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{},
            //实例化后，数据还没有初始化
            beforeCreate:function(){
                console.log('beforeCreate')
            },
            //数据初始化后
            created:function(){
                console.log('created')
            },
            //未知标签进行关联之前
            beforeMount:function(){
                console.log('beforeMount')
            },
            //实例和标签进行关联后
            mounted:function(){
                console.log('mounted')
            },
            //数据更新前
            beforeUpdate:function(){
                console.log('beforeUpdate')
            },
            //数据更新后
            Updated:function(){
                console.log('Updated')
            },
        })


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

 

组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <demo></demo>    <!--直接引用组件 -->
        <demo></demo>
        <demo></demo>
        <demo></demo>
        <demo></demo>
        <demo></demo>
        <demo></demo>
    </div>
    <script src="vue.js"></script>
    <script>
        Vue.component('demo',{ 
            template:'<h1 @click="change">test{{msg}}</h1>',
            data:function(){
                return {msg:'_msg'} //只会改变一个组件
            },
            methods:{
                change:function(){
                    this.msg = 'test1'
                }
            }
        })
        new Vue({
            el:'#app'
        })

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

 

ref属性和组件的应用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div ref='test'>test111</div>
        <input type="button" @click='change' value="点击后f12查看">
        <div>-------计数累加器------</div>
        <test ref="a"></test>
        <test ref="b"></test>
        <div>{{count}}</div>
        <input type="button" value="test" @click="change1">
    </div>


    <script src="vue.js"></script>
    <script>
        Vue.component('test', {
            template: '<div><span @click="add">{{number}}</span></div>',
            data: function () {
                return {
                    number: 0
                }
            },
            methods: {
                add: function () {
                    this.number++
                }
            }
        })

        new Vue({
            el: '#app',
            data: {
                count:0
            },
            methods: {
                change: function () {
                    console.log(this.$refs) //ref属性    拿到一个map对象，可以拿到页面中所有使用ref属性的标签
                    console.log(this.$refs.test) //拿到对象下都div
                },
                change1:function(){
                    console.log(this.$refs.a.number)
                    this.count = this.$refs.a.number + this.$refs.b.number
                }
            }

        })
    </script>
</body>

</html>

 父子组件之间触发

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div ref='test'>test111</div>
        <input type="button" @click='change' value="点击后f12查看">
        <div>-------计数累加器------</div>
        <test ref="a" @lll="countadd"></test> <!--触发的事件绑定方法-->
        <test ref="b" @lll="countadd"></test>
        <div>{{count}}</div>
    </div>


    <script src="vue.js"></script>
    <script>
        Vue.component('test', {
            template: '<div><span @click="add">{{number}}</span></div>',
            data: function () {
                return {
                    number: 0
                }
            },
            methods: {
                add: function () {
                    this.number++
                    this.$emit('lll') //向父组件触发事件
                }
            }
        })

        new Vue({
            el: '#app',
            data: {
                count:0
            },
            methods: {
                change: function () {
                    console.log(this.$refs) //ref属性    拿到一个map对象，可以拿到页面中所有使用ref属性的标签
                    console.log(this.$refs.test) //拿到对象下都div
                },
                countadd:function(){
                    this.count++
                }
            }

        })
    </script>
</body>

</html>

 

posted @ 2020-08-13 16:31  RainBol  阅读(126)  评论(0)  编辑  收藏  举报
Live2D