Zephon Blog
0%

发表于 更新于 分类于
本文字数： 14k 阅读时长 ≈ 13 分钟

第十四天

父组件向子组件传值

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
<!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>父组件向子组件传值</title>
        <script src="./js/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <!-- 父组件可以在引用子组件时，通过属性绑定的形式，把需要传递的值数据，以属性绑定的形式传递到子组件内，供子组件使用 -->
            <com1 :parentmsg="msg"></com1>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
                    msg: '父组件中数据'
                },
                components: {
                    com1: {
                        data() { // 子组件中的data数据，并不是通过父组件传递过来的，而是子组件自身私有的，比如：子组件通过ajax请求回来的数据，都可以放到data身上
                            // data中的数据，都是可读可写的
                            return {
                                title: '123'
                            }
                        },
                        // 结论：子组件中默认无法访问到父组件中的data上的数据和methods中的方法
                        // template: '<h1>这是子组件---{{msg}}</h1>'
                        template: '<h1 @click="change">这是子组件---{{parentmsg}}</h1>',
                        // props中的数据都是只读的，无法重新赋值(强行赋值不报错，有警告)
                        props: ['parentmsg'], // 把父组件传递过来的 parentmsg属性，先在props数组中定义，才能使用这个数据
                        methods: {
                            change() {
                                this.parentmsg = "被修改了";
                            }
                        }
                    }
                }
            })
        </script>
    </body>

</html>
阅读全文 »

发表于 更新于 分类于
本文字数： 20k 阅读时长 ≈ 18 分钟

第十三天

vue-resource改造品牌列表案例

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
112
113
114
115
116
117
118
119
120
<!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>vue-resource改造品牌列表案例</title>
        <script src="./js/vue.js"></script>
        <script src="./js/vue-resource.js"></script>
        <style>
            #app th,
            td {
                border: 1px solid #000;
            }

            #app thead th {
                width: 200px;
            }

            #app tbody td {
                width: 200px;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="app">
            <div>
                <label for="">Name: <input type="text" v-model="name"></label>
                <input type="button" value="添加" @click="add">
            </div>
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Ctime</th>
                        <th>Operation</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in list" :key="item.id">
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.ctime}}</td>
                        <td><a href="" @click.prevent="del(item.id)">删除</a></td>
                    </tr>
                </tbody>
            </table>
        </div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    name: '',
                    list: []
                },
                created() {
                    this.getAllList();
                },
                methods: {
                    getAllList() {
                        //获取所有车的列表
                        // 分析：
                        // 1. 由于已经导入了 Vue-resource包，可以直接通过this.$http 来发起数据请求
                        // 2. 根据接口API文档，获取列表时应该发起一个get请求
                        // 3. this.$http.get('url').then(function(result){})
                        // 4. 当通过then 指定回调函数后，在回调函数可以拿到数据服务器返回的result
                        // 5. 先判断result.status是否等于0，如果等于0，就成功了，可以把result.message赋值给this.list；如果不等于0，可以提示获取数据失败
                        this.$http.get('http://localhost:8080/Vue/get').then(result => {
                            console.log(result.body);
                            // 注意：通过$http获取到的数据，都在result.body中放着
                            var result = result.body;
                            if (result.status === 0) {
                                this.list = result.message;
                            } else {
                                alert('获取数据失败')
                            }
                        });
                    },
                    add() {
                        // 添加到后台服务器
                        // 分析
                        // 1. 经过查看api接口， 发现要发送一个post请求， this.$http.post
                        // 2. this.$http.post() 中接收三个参数
                        // 第一个参数：要请求的URL地址
                        // 第二个参数：要提交给服务器的数据，要以对象形式提交给服务器
                        // 第三个参数：一个配置对象，要以哪种表单数据类型提交{emulateJSON:true}，以普通表单格式，将数据提交给服务器application/x-www-form-urlencoded
                        // 3.在post方法中，使用.then来设置成功的回调函数，如果想要拿到成功的结果，需要result.body
                        this.$http.post("http://localhost:8080/Vue/add", {
                            name: this.name
                        }, {
                            emulateJSON: true
                        }).then(result => {
                            console.log(result.body);
                            if (result.body.status === 0) {
                                // 成功
                                this.getAllList();
                            } else {
                                alert("添加失败")
                            }
                        })
                    },
                    del(id) {
                        this.$http.get('http://localhost:8080/Vue/del?id=' + id).then(result => {
                            if (result.body.status === 0) {
                                this.getAllList();
                            } else {
                                alert("删除失败");
                            }
                        });
                    }
                }
            });
        </script>
    </body>

</html>
阅读全文 »

发表于 更新于 分类于
本文字数： 18k 阅读时长 ≈ 17 分钟

第十二天

过滤器

概念：Vue.js允许自定义过滤器，可以被用作一些常见的文本格式化，过滤器可以用在两个地方：mustache插值和v-bind表达式。过滤器应该被添加在JavaScript表达式的尾部，由“管道”符表示

阅读全文 »

发表于 更新于 分类于
本文字数： 16k 阅读时长 ≈ 15 分钟

第十一天

JavaScript开源框架

Jquery、ExtJS、Dojo、vue.js

阅读全文 »

发表于 更新于 分类于
本文字数： 4.3k 阅读时长 ≈ 4 分钟

第十天

Json

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
<!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>Json</title>
</head>
<body>
    <script>
        // restful架构,json
        // xml

        var json = {//对象
            id:1,
            link:"http://www.baidu.com",
            img:"img/1.jpg",
            content:"这是content",
            time:"2019-09-10"
        }
        //key键，value值，键值对
        for(var k in json){
            console.log(k,json[k]);
        }
        console.log(json.id);
        document.write(JSON.stringify(json));//将JSON变为字符串

        var str = JSON.stringify(json);//字符串
        var o = JSON.parse(str);//对象
        console.log(o.link);
    </script>
</body>
</html>
阅读全文 »

发表于 更新于 分类于
本文字数： 6.5k 阅读时长 ≈ 6 分钟

第九天

闭包

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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>closure 闭包</title>
</head>
<body>
    <script>
        //闭包是定义在函数内部的函数。通常，函数内定义的函数为返回值
        function a(){
            var n=0;
            console.log("执行了a");
            return function(){console.log(n);return ++n;}
        }
        var b = a();//执行了a()，但没有执行闭包函数，b是闭包函数的别名
        console.log("b()"+b());
        console.log(a()());//和b()不同，这种调用方式将执行a函数的内部的内容
    </script>
</body>
</html>
阅读全文 »

发表于 更新于 分类于
本文字数： 9.7k 阅读时长 ≈ 9 分钟

第八天

面向对象

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
<!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>面向对象</title>
</head>
<body>
    
    <script>
        // javascript没有类，es6中的class只是一种语法糖(同一种东西的简单写法)
        // 使用function来实现面向对象
        // 对象 实例
        function rect(w,h){
            //该函数相当于构造函数constructor
            // this是指该对象的实例，定义对象的属性一定要使用this
            this.width = w;
            this.height = h;
            // 在方法中使用属性，一定要使用this
            this.c=function(){
                return 2*(this.width+this.height);
            }
            this.s=function(){
                return this.width*this.height;
            }
        }
        var r1 = new rect(100,200);
        console.log(r1.width);
        console.log(r1.c());
        console.log(r1.s());
        console.log(r1 instanceof rect);

        console.log(r1,rect);
        // 不建议在正式代码中使用__proto__
        // prototype 原型
        // 原型链
        // 一个实例的__proto__指向其对象的prototype
        console.log(r1.__proto__==rect.prototype);
        console.log(rect.prototype.constructor==rect);
        console.log(rect.prototype.__proto__== r1.__proto__.__proto__);
        console.log(rect.prototype.__proto__==Object.prototype)
        console.log(Object.prototype);
        // 总结：子类的prototype中的__proto__指向父类的prototype

        Object.prototype.king = "monkey";
        console.log(r1.king);
        rect.prototype.sayname = function(){
            console.log("hello "+this.king);
        }
        r1.sayname();
        console.log(rect.prototype);
    </script>
</body>
</html>
阅读全文 »

发表于 更新于 分类于
本文字数： 16k 阅读时长 ≈ 15 分钟

第七天

DOM

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
<!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>event-dom</title>
</head>

<body>
    <div id="box">
        <h2>JavaScript <span onclick="clickspan()">事件</span></h2>
    </div>
    <script>
        //DOM0 DOM2事件
        function clickspan() {
            alert("you have clicked span")
        }
        var h2 = document.getElementsByTagName("h2")[0];
        h2.onclick = function(e){
            e.stopPropagation();//停止冒泡，在dom0中无效
            alert("you have clicked h2!");
        }
        //需求1：点击span不响应父元素的事件，不冒泡
        //需求2：先响应父元素的事件，后响应子元素的事件，冒泡(默认的事件响应方式)->捕获(先响应你元素的事件)
    </script>
</body>

</html>
阅读全文 »

发表于 更新于 分类于
本文字数： 10k 阅读时长 ≈ 10 分钟

第六天

Javascript

javascript输出

阅读全文 »

发表于 更新于 分类于
本文字数： 6.3k 阅读时长 ≈ 6 分钟

第五天

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
<!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>图片解决方案</title>
    <style>
        ul{
            list-style:none;
        }
        a{
            text-decoration: none;
            color: #999;
        }
        /* 普通背景图片处理 */
        .tlist>li{
            height: 30px;
            line-height: 30px;
            background-image: url(./dot_red.gif);
            background-repeat: no-repeat;
            background-position: 0 15px;/* 调整图片上下的位置 */
            padding-left: 12px; /* 调整图片左右的位置 */
        }

        /* 雪碧图使用 */
        .miaosha{
            width: 40px;
            height: 40px;
            background: transparent url(zhekouicon_bg.gif) no-repeat -126px -343px;
            /* css sprite 的background-position一定是负值或0 */
        }
        .other{
            width: 40px;
            height: 40px;
            background: transparent url(zhekouicon_bg.gif) no-repeat -85px -343px;
        }

        .img,.img2{
            width: 300px;
            height: 300px;
            border: 1px solid #c00;
            background: url(zhekouicon_bg.gif);
        }
        .img{
            /* 属性值为一个值则为宽度，高度随着宽度等比例变化 */
            /* background-size: contain; */
            block-size: 100%;
        }

        .img2{
            background-size: cover;
            background-clip: content-box;/* 只为内容加背景图片，padding部分不加 */
            padding: 20px;
        }
    </style>
</head>
<body>
    <!-- 1.电脑端：css sprite 雪碧图，css精灵 -->
    <!-- 将多张辅助(背景)合并为一张图片 -->
    <!-- 2.移动端 -->
    <!-- 图像软件：fireworks、photoshop、画图 -->
    <!-- 做设计图，切图 -->
    <ul class="tlist">
        <li><a href="#">这里是列表的内容</a></li>
        <li><a href="#">这里是列表的内容</a></li>
        <li><a href="#">这里是列表的内容</a></li>
        <li><a href="#">这里是列表的内容</a></li>
    </ul>
    <div class="miaosha">
    </div>
    <div class="other">

    </div>

    <div class="img">

    </div>
    <div class="img2"></div>
</body>
</html>
阅读全文 »