Vue day4 案例

发表于 | 更新于: | 分类于 | | 热度 ℃

案例分布

1. 组件案例练习
2. 路由嵌套
3. 命名视图案例

一、组件案例练习

重点

  • vue
    • @(v-on) v-for :key v-model
    • localStorage 本地存储
    • 子组件 data methods 方法
    • JSON
    • created 生命周期
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.5.17.js"></script>
    <link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>

<body>
    <div id="app">
        <tmp-box @add="addBox"></tmp-box>


        <ul class="list-group">
            <li class="list-group-item" v-for="item in list" :key="item.id">
                <span class="badge">评论人：{{item.name}}</span>
                {{item.con}}
            </li>
        </ul>
    </div>

    <template id="tmp">
        <div>
            <div class="form-group">
                <label>姓名：</label>
                <input type="text" class="form-control" v-model="name">
            </div>
            <div class="form-group">
                <label>评论：</label>
                <textarea class="form-control" rows="3" v-model="con"></textarea>
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-success" @click='add'>提交</button>
            </div>
        </div>
    </template>

</body>
<script>
    let tmpBox = {
        template: '#tmp',
        data() {
            return {
                id: Date.now(),
                name: '',
                con: ''
            }
        },
        methods: {
            add() {
                let addCon = {
                    id: Date.now(),
                    name: this.name,
                    con: this.con
                };

                if (addCon.name!==''&&addCon.con!=='') {
                    let list = JSON.parse(localStorage.getItem('yhf') || '[]');
                    list.unshift(addCon);

                    localStorage.setItem('yhf', JSON.stringify(list));
                    this.name = this.con = '';

                    this.$emit('add');
                }else {
                    alert('请输入姓名')
                }
            }
        }
    }

    var vm = new Vue({
        el: '#app',
        data: {
            list: [{
                    id: 1,
                    name: 'yhf',
                    con: 'djifjeifefefefe'
                },
                {
                    id: 2,
                    name: 'yhf2',
                    con: 'djifjeifeefeffefefe'
                },
                {
                    id: 3,
                    name: 'yhf3',
                    con: 'djifjeifefeefefefefe'
                },
            ]
        },
        created: function () {
            this.addBox()
        },
        methods: {
            addBox() {
                let list = JSON.parse(localStorage.getItem('yhf') || '[]');
                this.list = list;
            }
        },
        components: {
            tmpBox
        }
    })
</script>

</html>

二、路由嵌套

重点

  • vue
    • children 属性
    • 子路由的设置 带/ 和不带/
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.5.17.js"></script>
    <script src="./lib/vue-router-3.0.1.js"></script>
</head>

<body>
    <div id="app">
        <router-link to="/account">Account</router-link>

        <router-view></router-view>
    </div>

    <template id="tmp1">
        <div>
            <h1>这是 Account 组件</h1>

            <router-link to="/login">登录</router-link>
            <router-link to="/account/register">注册</router-link>

            <router-view></router-view>
        </div>
    </template>
</body>
<script>
    var account = {
        template: '#tmp1'
    }

    var login = {
        template: '<h3>登录</h3>'
    }

    var register = {
        template: '<h3>注册</h3>'
    }

    var router = new VueRouter({
        routes: [{
                path: '/account',
                component: account,
                // 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
                children: [{
                        path: '/login',
                        component: login
                    },
                    {
                        path: 'register',
                        component: register
                    }
                ]
            }

        ]
    })

    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router
    })
</script>

</html>

三、命名视图案例

重点

  • vue
    • 属性名 name
    • components 多地址设置
    • css 设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.5.17.js"></script>
    <script src="./lib/vue-router-3.0.1.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
            font-size: 16px;
        }

        .header {
            background-color: orange;
            height: 80px;
        }

        .container {
            display: flex;
            height: 600px;
        }

        .left {
            background-color: lightgreen;
            flex: 2;
        }

        .main {
            background-color: lightpink;
            flex: 8;
        }
    </style>

</head>

<body>
    <div id="app">
        <router-view></router-view>
        <div class="container">
            <router-view name="left"></router-view>
            <router-view name="main"></router-view>
        </div>
    </div>
</body>
<script>
    var header = {
        template: '<h1 class="header">header</h1>'
    }


    var leftBox = {
        template: '<h1 class="left">leftBox</h1>'
    }


    var mainBox = {
        template: '<h1 class="main">mainBox</h1>'
    }

    var router = new VueRouter({
        routes: [{
            path: '/',
            components: {
                'default': header,
                'left': leftBox,
                'main': mainBox
            }
        }]
    })

    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {},
        router
    })
</script>

</html>
-------------本文结束感谢您的阅读-------------
0%