vue练习+笔记2

过滤器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <!--{{msg}}-->
    {{count|change('--百分比')}}
    {{status|change}}

    <div>全局过滤器{{count|allNumber}}</div>

</div>

<script src="vue.js"></script>
<script>
    Vue.filter('allNumber', function (value) {
        return value + '%'
    });

    new Vue({
        el: '#app',
        data: {
            msg: 'test',
            count: 19,
            status: 2
        },
        methods: {},
        //过滤器
        filters: {
//            change:function (value,flag) {

            change: function (status) {
                // 1、代表成功
                // 2、代表失败
                if (status == 1) {
                    return '成功'
                } else if (status == 2) {
                    return '失败'
                }
                // console.log('value-->'+value)
                // console.log('flag-->'+flag)
                 return value+'%'+flag
            }
        }
    })
</script>
</body>
</html>

生命周期

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <div id="app">{{msg}}</div>

<script src="vue.js"></script>
<script>
    //    生命周期
    //    vue在实例化到页面经理了哪些步骤
    //    钩子函数
    //    预留了几个特殊的方法
    new Vue({
        el: '#app',
        data: {
            msg: ''
        },
        //实例化后，数据还没有初始化
        beforeCreate: function () {
            console.log('beforeCreate')
        },
        // 数据初始化之后
        created: function () {
            console.log('created')
        },
        // 未和标签进行关联之前
        beforeMount: function () {
            console.log('beforeMount')
        },
        // 实例和标签进行关联后
        mounted: function () {
            // 获取后台的列表数据
            this.msg = '获取后台的列表数据'
            console.log('mounted')
        },
        // 数据更新前
        beforeUpdate: function () {
            console.log('beforeUpdate')
        },
        // 数据更新后
        updated: function () {
            console.log('updated')
        },
        methods: {
            register: function () {
                axios({
                    method: 'post',
                    data: {
                        name: vm.username,
                        grade: vm.pwd,
                        phone: vm.cpwd
                    },
                    url: 'http://api.nnzhp.cn/api/user/add_stu'
                }).then(function (data) {
                    console.log(data)
                }).catch(function (error) {
                    console.log(error)
                })
            }
        }
    })

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

组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <!--<demo></demo>-->
    <demo-key></demo-key>

</div>

<script src="vue.js"></script>
<script>
    //    组件：将公用的功能抽离出来，形成组件，目的：复用代码
    //    全局组件
    Vue.component('demo', {
        template: '<h1 @click="change">{{msg}}</h1>',
//        组件当中的data必须是个方法
        data: function () {
            return {
                msg: 'msg'
            }
        },
        methods: {
            change: function () {
                this.msg = 'test'
            }
        }
    })

    new Vue({
        el: '#app',
        data: {},
        methods: {},
        // 局部组件
        components: {
            "demo-key": {
                template: "<h1 @click='change'>{{msg}}</h1>",
                data: function () {
                    return {
                        msg: 0
                    }
                },
                methods: {
                    change: function () {
                        this.msg++
                    }
                }
            }
        }
    })

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

refs介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">

    <!--<div ref="test">ref=test</div>-->
    <test ref="a"></test>
    <test ref="b"></test>
    <div>父组件-<span>{{count}}</span></div>
    <input type="button" value="test" @click="change">

</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.test)
//                document.getElementById('i1')
                this.count = this.$refs.a.number + this.$refs.b.number
            }
        }
    })

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

is规避错误

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <table border="1">
            <thead>
            <th>id</th>
            </thead>

            <tbody>
            <tr is="tr-demo"></tr>
            </tbody>
        </table>
        <!-- <tr-demo></tr-demo> -->
    </div>
    <script src="vue.js"></script>

    <script>
//        单纯的创建了一个全局组件
        Vue.component('tr-demo', {
            template: '<tr><td>1</td></tr>'
        })
        new Vue({
            el: '#app'
        })
    </script>

</body>
</html>

父子组件交互

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <number @change="countAdd"></number>
        <number @change="countAdd"></number>
        <div>父组件-<span>{{count}}</span></div>
    </div>
<script src="vue.js"></script>
<script>
    Vue.component('number', {
        template: '<div>子组件-<span @click="add">{{num}}</span></div>',
        data: function () {
            return {
                num: 0
            }
        },
        methods: {
            add: function () {
                this.num++
                this.$emit('change')   //向父组件触发事件
            }
        }
    })

    new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            countAdd: function () {
                this.count++
            }
        }
    })
</script>
</body>
</html>

父组件像子组件传值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <number :num2="number2" num3="10"></number>
        <!-- {{number2}}<input type="button" value="test" @click="change"> -->
    </div>

<script src="vue.js"></script>
<script>
    Vue.component('number', {
        //父组件向子组件 存在单向数据流
        // props:['num2','num3'],
        props: {
            'num2': {
                type: [Number, String],
                default: 200,
                required: true    //不能和default连用
            }
        },
        // template :'<div>子组件-<span>{{count}}</span></div>',
        template: '<div>子组件-<span @click="add">{{count}}</span></div>',
        data: function () {
            return {
                count: this.num2,
                number3: this.num3
            }
        },
        methods: {
            add: function () {
                this.count = 100
            }
        }
    })

    new Vue({
        el: '#app',
        data: {
            number2: 99
        }
    })

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

posted on 2020-07-27 15:23 彩彩常阅读(101) 评论(0) 编辑收藏举报