Vue进阶

1 slot插槽 (内容分发)

1
2
3
4
 
a. 单个slot 
b. 具名slot
	*混合父组件的内容与子组件自己的模板-->内容分发
	*父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。

1.1 基本使用

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <!-- 不使用插槽写的aaa不会显示,使用就会显示-->
    <child1>aaa</child1>

</div>
</body>
<script>
    var bus = new Vue() //new一个vue的实例，就是中央事件总线
    Vue.component('child1', {
        template: `<div>
          首页
          <slot></slot>
        </div>`,

    })
 var vm = new Vue({
        el: '#box',

    })
</script>
</html>

1.2 插槽应用场景1

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<!--    写了一个轮播组件，用户想轮播什么就放什么-->
    <swiper>
        <p v-for="data in 4">{{data}}</p>
    </swiper>

       <swiper>
           <img :src="data" v-for="data in 5">
    </swiper>

</div>
</body>
<script>
    var bus = new Vue() //new一个vue的实例，就是中央事件总线
    Vue.component('swiper', {
        template: `<div>
          <slot></slot>
        </div>`,

    })
 var vm = new Vue({
        el: '#box',

    })
</script>
</html>

1.3 插槽应用场景2

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <!--通过插槽实现在一个组件中控制另一个组件的显示隐藏-->
    <navbar> <button @click="isShow=!isShow">点我显示隐藏</button></navbar>

    <swiper v-if="isShow"></swiper>
</div>
</body>
<script>
    Vue.component('navbar', {
        template: `<div>
          navbar
          <slot></slot>
        </div>`,

    })
    Vue.component('swiper', {
        template: `<div>
          <p>111</p>
          <p>222</p>
          <p>333</p>
        </div>`,

    })
    var vm = new Vue({
        el: '#box',
        data:{
            isShow:true
        }

    })
</script>
</html>

1.4 具名插槽

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<!--    具名插槽，把p标签给a插槽，div标签给b插槽-->
    <navbar>
        <p slot="a">pppp</p>
        <div slot="b">bbbb</div>
    </navbar>
</div>
</body>
<script>
    Vue.component('navbar', {
        template: `<div>
        <slot name="a"></slot>
          navbar
          <slot name="b"></slot>
        </div>`,

    })
var vm = new Vue({
        el: '#box',
        data:{

        }

    })
</script>
</html>

2 transition过渡

1
2
3
4
5
6
7
8
9
 
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
(1)单元素/组件过渡  * css过渡  * css动画  * 结合animate.css动画库
(2) 多个元素过渡(设置key) 
	 *当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。  
	  mode:in-out ; out-in
(3)多个组件过渡
(4)列表过渡(设置key) 
	 *<transition-group>不同于 transition， 它会以一个真实元素呈现：默认为一个 <span>。你也可以通过tag 特性更换为其他元素。  
	 * 提供唯一的 key 属性值

3 生命周期

1
2
 
i. 生命周期各个阶段https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
ii. 生命周期钩子函数的触发条件与作用

 

4 swiper学习

​ https://www.swiper.com.cn/

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <!--    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">  -->
    <!--<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>  -->
    <style>
        .swiper-container {
            width: 80%;
            height: 600px;
        }
    </style>

</head>
<body>
<div id="box">

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="data in datalist">

                {{data}}
                <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg" alt="">
            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            datalist: [],
        },
        mounted() {
            setTimeout(() => {
                this.datalist = ['111', '222', '333']
            }, 2000)
            //轮播图初始化不是放在这，因为数据变化和dom更新是异步的
            //需要放在updated中
        },
        updated() {
            var mySwiper = new Swiper('.swiper-container', {
// direction: 'vertical', // 垂直切换选项
                loop: true, // 循环模式选项
// 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },
// 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },

// 如果需要滚动条
                scrollbar: {
                    el: '.swiper-scrollbar',
                },

            })
        },


    })
</script>
</html>

5 自定义组件的封装

​ 自定义封装swiper组件（基于swiper）
​ 注意： 防止swipe初始化过早

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <!--    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">  -->
    <!--<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>  -->
    <style>
        .swiper-container {
            width: 80%;
            height: 600px;
        }
    </style>

</head>
<body>
<div id="box">
    {{name}}
<!--    diff算法检测到key变化了，会把swipper删掉，重新创建，触发组件的mounted执行，完成swipper实例化，不在updated中初始化-->
<!--    子组件的mounted在根组件的mounted之前执行，所有组件挂载完成后，根组件才挂载-->
    <swipper :key="datalist.length">
<!--    <swipper>-->
        <div class="swiper-slide" v-for="data in datalist">
            <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg" alt="">
        </div>
    </swipper>
</div>
</body>
<script>

    Vue.component('swipper',{
        template:`
        <div class="swiper-container">
        <div class="swiper-wrapper">
          <slot></slot>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-scrollbar"></div>
    </div>
        `,
        mounted(){
            console.log('子组件mounted')
            var mySwiper = new Swiper('.swiper-container', {
// direction: 'vertical', // 垂直切换选项
                loop: true, // 循环模式选项
// 如果需要分页器
                pagination: {
                    el: '.swiper-pagination',
                },
// 如果需要前进后退按钮
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },

// 如果需要滚动条
                scrollbar: {
                    el: '.swiper-scrollbar',
                },

            })
        },

// updated(){//如果跟组件中有数据变化，就会导致swipper组件触发update(vm.name='ss'测试一下),导致多次执行，影响效率，所以使用key+mounted方式
//     console.log('子组件update')
//     var mySwiper = new Swiper('.swiper-container', {
//         // direction: 'vertical', // 垂直切换选项
//         loop: true, // 循环模式选项
//         // 如果需要分页器
//         pagination: {
//             el: '.swiper-pagination',
//         },
//         // 如果需要前进后退按钮
//         navigation: {
//             nextEl: '.swiper-button-next',
//             prevEl: '.swiper-button-prev',
//         },
//
//         // 如果需要滚动条
//         scrollbar: {
//             el: '.swiper-scrollbar',
//         },
//
//     })
// }


    })
var vm = new Vue({
        el: '#box',
        data: {
            name:'lqz',
            datalist: [],
        },
        mounted() {
            setTimeout(() => {
this.datalist = ['111', '222', '333']
            }, 2000)
//轮播图初始化不是放在这，因为数据变化和dom更新是异步的
//需要放在updated中
        },



    })
</script>
</html>

6 自定义指令

1
2
3
4
5
6
 
(1)自定义指令介绍 directives
(2)钩子函数* 参数 el,binding,vnode(vnode.context)* bind,inserted,update,componentUpdated,unbind
(3)函数简写
(4)自定义指令-轮播
	*inserted 插入最后一个元素时调用(vnode.context.datalist.length-1)
	*this.$nextTick()

6.1 基本使用

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>

</head>
<body>
<div id="box">
    <div v-mystyle>divdiv我是div</div>
</div>
</body>
<script>
    //自定义指令，以后用的时候必须 v-指令名，即v-mystyle
Vue.directive('mystyle',{
    //当被改指令修饰的标签插入到dom中会执行
    inserted(){
        console.log('我执行了')
    },
})
 var vm = new Vue({
        el: '#box',
        data: {
        },



    })
</script>
</html>

6.2 让所有使用自定义指令的标签背景都变红色

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>

</head>
<body>
<div id="box">
    <div v-mystyle>divdiv我是div</div>
    <p v-mystyle>我是p，用了自定义指令，会变红</p>
</div>
</body>
<script>
    //自定义指令，以后用的时候必须 v-指令名，即v-mystyle
Vue.directive('mystyle',{
    //当被改指令修饰的标签插入到dom中会执行
    inserted(el){
        //el就是被修饰标签的dom
        console.log(el)
        //所以我们直接操作dom
        el.style.background='red'
    },
})
 var vm = new Vue({
        el: '#box',
        data: {
        },



    })
</script>
</html>

6.3 用户指定自定义指令的背景色,修改变量，背景变化

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>

</head>
<body>
<div id="box">
    <!--放js的变量，所以用'red'-->
    <div v-mystyle="'red'">divdiv我是div</div>
    <p v-mystyle="mycolor">我是p，用了自定义指令，会变红</p>
</div>
</body>
<script>
    //自定义指令，以后用的时候必须 v-指令名，即v-mystyle
Vue.directive('mystyle',{
    //当被改指令修饰的标签插入到dom中会执行
    inserted(el,input){ //该方法，如果更新变量mycolor，并不会变化，所以需要重写update方法  vm.mycolor='yellow'
        //el就是被修饰标签的dom
        console.log(el)
        console.log(input) //input的value属性是传入的变量
        //所以我们直接操作dom
        // el.style.background='red'
        el.style.background=input.value
    },
    update(el,input){
        el.style.background=input.value

    }
})
 var vm = new Vue({
        el: '#box',
        data: {
            mycolor:'green',
        },



    })
</script>
</html>

6.4 通过指令控制swipper初始化

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">
    <title>Title</title>
    <script src="js/vue.js"></script>

    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <!--    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css">  -->
    <!--<script src="https://unpkg.com/swiper/swiper-bundle.js"> </script>  -->
    <style>
        .swiper-container {
            width: 80%;
            height: 600px;
        }
    </style>

</head>
<body>
<div id="box">

    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!--v-comp把当前索引值和数组总长度传入，如果索引等于数组总长度减一说明都加载完了，完成swipper初始化-->
            <div class="swiper-slide" v-for="(data,i) in datalist" v-comp="{index:i,length:datalist.length}">

                {{data}}

            </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
</div>
</body>
<script>
    Vue.directive('comp', {
        inserted(el, input) {
            console.log(input.value)
            //只要校验到传入的是最后一个插入了，就初始化swipper
            if (input.value.index === input.value.length - 1) {
                var mySwiper = new Swiper('.swiper-container', {
                    // direction: 'vertical', // 垂直切换选项
                    loop: true, // 循环模式选项
                    // 如果需要分页器
                    pagination: {
                        el: '.swiper-pagination',
                    },
                    // 如果需要前进后退按钮
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },

// 如果需要滚动条
                    scrollbar: {
                        el: '.swiper-scrollbar',
                    },

                })
            }

        },
    })
var vm = new Vue({
        el: '#box',
        data: {
            datalist: [],
        },
        mounted() {
            setTimeout(() => {
this.datalist = ['111', '222', '333']
            }, 2000)
        },


    })
</script>
</html>

7 过滤器

1
2
 
https://cn.vuejs.org/v2/guide/filters.html
ele图片转换，猫眼电影图片转换
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <!--猫眼数据：https://m.maoyan.com/#movie-->
    <ul>
        <li v-for="data in datalist">
            <h2>{{data.nm}}</h2>
            <br>
<!--            <img :src="data.img" alt="">-->
<!--            <img :src="changePath(data.img)" alt="">-->
<!--            过滤器-->
            <img :src="data.img | myChange" alt="">
        </li>
    </ul>
</div>
</body>
<script>
    //定义过滤器
    Vue.filter('myChange',function (url) {
        return url.replace('w.h','128.180')
    })
    var vm = new Vue({
        el: '#box',
        data: {
            datalist: [],
        },
        methods:{
            changePath(url){
                return url.replace('w.h','128.180')
            }
        },
        mounted() {
            //http://p0.meituan.net/w.h/movie/b16c1c0d5ac9e743c6ffbbf7eba900522725807.jpg
            //http://p0.meituan.net/128.180/movie/b16c1c0d5ac9e743c6ffbbf7eba900522725807.jpg
            axios.get("./json/test.json").then(res => {
                console.log(res.data.coming) // axios 自动包装data属性 res.data
                this.datalist = res.data.coming
            }).catch(err => {
                console.log(err);
            })
        },

    })
</script>
</html>

一：生命周期图

1.官网原图

img

3.我理解的图

img

二：生命周期

钩子函数描述
beforeCreate 创建Vue实例之前调用
created 创建Vue实例成功后调用（可以在此处发送异步请求后端数据）
beforeMount 渲染DOM之前调用
mounted 渲染DOM之后调用
beforeUpdate 重新渲染之前调用（数据更新等操作时，控制DOM重新渲染）
updated 重新渲染完成之后调用
beforeDestroy 销毁之前调用
destroyed 销毁之后调用

create

1
 
let vm = new Vue()

mount

挂载，把div挂载到组件中

img

update

1
2
3
4
5
6
7
8
9
10
11
 
let vm = new Vue({
    el: '#box',
    data: {
        isShow: true    // 修改这个内容
    },
    methods: {
        handleClick() {
            console.log('我是根组件')
        }
    }
})

1.bedoreCreate

2.created

3.beforeMount

4.mounted（用得最多）

这时候可以向后端发送数据了

5.beforeUpdate

6.updated

7.beforeDestroy

8.destroyed

组件销毁 - 给组件写一个定时器

1
2
 
setTimeout()    // 延迟3s干什么事
setInterval()    // 延迟3s干什么事

测试代码

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
</head>
<body>
<div id="box">
    <child v-if="isShow"></child>
    <br>
    <button @click="terminate">删除子组件</button>
    <button @click="reborn">显示子组件</button>
</div>
</body>
<script>
    Vue.component('child', {
        template: `
            <div>
                {{name}}
                <button @click="name='Darker1'">更新数据1</button>
                <button @click="name='Darker2'">更新数据2</button>
            </div>`,
        data() {
            return {
                name: 'Darker1',
            }
        },
        beforeCreate() {
            console.group('当前状态：beforeCreate')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        created() {
            console.group('当前状态：created')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        beforeMount() {
            console.group('当前状态：beforeMount')
            console.log('当前el状态：', this.$el)
            console.log('当前data状态：', this.$data)
            console.log('当前name状态：', this.name)
        },
        mounted() {
console.group('当前状态：mounted')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
//用的最多，向后端加载数据，创建定时器等
console.log("页面已被vue实例渲染, data, methods已更新");
console.log('mounted')
this.t = setInterval(function(){
console.log('daada')
            }, 3000)

        },
        beforeUpdate() {
console.group('当前状态：beforeUpdate')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
        },
        updated() {
console.group('当前状态：updated')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
        },
        beforeDestroy() {
console.group('当前状态：beforeDestroy')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
        },
        destroyed() {
console.group('当前状态：destroyed')
console.log('当前el状态：', this.$el)
console.log('当前data状态：', this.$data)
console.log('当前name状态：', this.name)
//组件销毁，清理定时器
            clearInterval(this.t)
this.t = null
console.log('destoryed')
        },


    })
let vm = new Vue({
        el: '#box',
        data: {
            isShow: true
        },
        methods: {
            terminate() {
this.isShow = false
            },
            reborn() {
this.isShow = true
            }
        }
    })
</script>
</html>

##############################

表示一个vue实例从创建到销毁的这个过程,将这个过程的一些时间节点赋予了对应的钩子函数
钩子函数: 满足特点条件被回调的方法

8个生命周期函数

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <child v-if="isShow"></child>
</div>
</body>
<script>
    Vue.component('child', {
        template: `<div>
            child-->div
            <button @click="name='egon'">点我变egon</button>
            <button @click="name='lqz'">点我变lqz</button>
            <br>
            {{name}}
        </div>`,
        data() {
            return {
                name: 'lqz',
                t: null,
            }
        },
        beforeCreate() {
            console.log('beforeCreate')
        },
        created() {
            console.log('created')
        },
        beforeMount() {
            console.log('beforeMount')
        },
        mounted() {
            //用的最多，向后端加载数据，创建定时器等
            console.log("页面已被vue实例渲染, data, methods已更新");
            console.log('mounted')
            this.t = setInterval(function () {
                console.log('daada')
            }, 3000)
        },
        beforeUpdate() {
            console.log('beforeUpdate')
        },
        updated() {
            console.log('updated')
        },
        beforeDestroy() {
            console.log('created')
        },
        destroyed() {
            //组件销毁，清理定时器
            clearInterval(this.t)
            this.t = null
            console.log('destoryed')
        },


    })
    var vm = new Vue({
        el: '#box',
        data: {
            isShow: true
        }

    })
</script>
</html>

组件

1 fetch和axios

axios与fetch实现数据请求

(1)fetch（不是所有浏览器都支持，谷歌浏览器支持）
XMLHttpRequest 是一个设计粗糙的 API，配置和调用方式非常混乱，而且基于事件的异步模型写起来不友好。 兼容性不好
polyfill: https://github.com/camsong/fetch-ie8

1.1 fetche使用

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
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>fetch</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">

    <button @click="handleClick()">获取影片信息</button>
    <ul>
        <li v-for="data in datalist">
            <h3>{{data.name}}</h3>
            <img :src="data.poster"/>
        </li>
    </ul>
</div>
<script type="text/javascript">
    new Vue({
        el: "#box",
        data: {
            datalist: []
        },
        methods: {
            handleClick() {
                //https://m.maizuo.com/v5/?co=mzmovie#/films/nowPlaying
                fetch("./json/test.json").then(res => res.json()).then(res => {
                    console.log(res.data.films)
                    this.datalist = res.data.films
                })
            }
        }
    })

    /*
     // post-1
      fetch("**",{
          method:'post',
          headers: {
             "Content‐Type": "application/x‐www‐form‐urlencoded"
          },
         body: "name=kerwin&age=100",
         credentials:"include"
     }).then(res=>res.json()).then(res=>{console.log(res)});

     // post-2
      fetch("**",{
          method:'post',
          headers: {
             "Content‐Type": "application/json"
          },
         body: JSON.stringify({
             myname:"kerwin",
             myage:100
         })
     }).then(res=>res.json()).then(res=>{console.log(res)});
    */

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

1.2 axios的使用

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
 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>axios</title>
<script type="text/javascript" src="js/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="box">
       <button @click="handleClick()">正在热映</button>

        <ul>
            <li v-for="data in datalist">
                <h3>{{data.name}}</h3>
                <img :src="data.poster"/>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
       
      new Vue({
          el:"#box",
          data:{
              datalist:[]
          },
          methods:{
            handleClick(){
                axios.get("./json/test.json").then(res=>{
                    console.log(res.data.data.films) // axios 自动包装data属性 res.data
                    this.datalist = res.data.data.films
                }).catch(err=>{
                    console.log(err);
                })
            }
          }
      })
    </script>
</body>
</html>

2 计算属性

1
2
3
4
5
 
复杂逻辑,模板难以维护
(1) 基础例子
(2) 计算缓存 VS methods-计算属性是基于它们的依赖进行缓存的。-计算属性只有在它的相关依赖发生改变时才会重新求值
(3) 计算属性 VS watch
	- v-model3

2.1 通过计算属性实现名字首字母大写

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <!--大段的代码写在这里不好，使用计算属性-->
    {{mytext.substring(0,1).toUpperCase()+mytext.substring(1)}}
    <p>计算属性：{{getname}}</p>
    <!--普通方法要加括号-->
    <p>普通方法：{{getNameMethod()}}</p>
    <!--区别是在同一个页面中使用多次计算属性，不会多次执行-->
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            mytext:'lqz',
        },
        computed:{
            getname(){//依赖的状态改变了，会重新计算
                console.log('计算属性')
                return this.mytext.substring(0,1).toUpperCase()+this.mytext.substring(1)
            }
        },
        methods:{
            getNameMethod(){
                console.log('普通方法')
                return this.mytext.substring(0,1).toUpperCase()+this.mytext.substring(1)
            }
        }
    })
</script>
</html>

2.2 通过计算属性重写过滤案例

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <p><input type="text" v-model="mytext" @input="handleChange"></p>
    <ul>
        <li v-for="data in newlist">{{data}}</li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            mytext: '',
            datalist: ['aaa', 'abc', 'abcde', 'abcdef', 'bbb', 'bac'],

        },
        computed: {
            newlist() {
                var newlist = this.datalist.filter(item => {
                    return item.indexOf(this.mytext) > -1
                })
                return newlist
            },
        },

    })
</script>
</html>

3 Mixins

1
 
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

4 虚拟dom与diff算法 key的作用

4.1 Vue2.0 v-for 中 :key 有什么用呢？

1
2
3
4
5
6
7
8
 
其实呢不只是vue，react中在执行列表渲染时也会要求给每个组件添加key这个属性。
key简单点来说就是唯一标识，就像ID一样唯一性
要知道，vue和react都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。


只做同层级的对比
按照key值比较，出现新的key就插入
通组件对比

4.2 虚拟DOM的diff算法

image-20201214225437290

4.3 具体实现

4.3.1 把树按照层级分解

image-20201214225736585

4.3.2 同key值比较

image-20201214225827633

4.3.3 通组件对比

image-20201214225913886

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<div id="box">
    <div v-if="isShow">111</div>
    <p v-else>222</p>
    <!--    
    {tag:div,value:111}
    {tag:p,value:222}
    直接不比较，直接删除div，新增p
    -->

    <div v-if="isShow">111</div>
    <div v-else>222</div>
    <!--    
    {tag:div,value:111}
    {tag:div,value:222}
    比较都是div，只替换文本内容
    -->
</div>

https://segmentfault.com/a/1190000020170310

5 组件化开发基础

5.1 组件是什么？有什么用

1
2
3
 
扩展 HTML 元素，封装可重用的代码，目的是复用
	-例如：有一个轮播，可以在很多页面中使用，一个轮播有js，css，html
	-组件把js，css，html放到一起，有逻辑，有样式，有html

6 组件注册方式

1
2
3
 
1 全局组件
	Vue.component
2 局部组件

6.1 定义全局组件，绑定事件，编写样式

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<navbar></navbar>
</div>
</body>
<script>
    //没有代码提示，语法检查，目前这么用
    //后面会使用webpack打包，直接定义成 xx.vue文件，通过webpack打包
    Vue.component('navbar',{
        template:`
        <div>
            <button @click="handleClick">返回</button>
            我是NavBar
            <button style="background: red">主页</button>
        </div>
        `,
        methods:{
            handleClick(){
                console.log('nav nav')
            }
        }
    })
    var vm = new Vue({
        el: '#box',
        data: {
        },

    })
</script>
</html>

6.2 定义局部组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
Vue.component('navbar', {
    template: `
        <div>
            <button @click="handleClick">返回</button>
            我是NavBar
            <button style="background: red">主页</button>
            <br>
            <child></child>
        </div>
    `,
    methods: {
        handleClick() {
            console.log('nav nav')
        },
    },
    components: {
            child: {
                template: `<button>儿子</button>`,
            }

        }
})

7 组件编写方式与Vue实例的区别

1
2
3
 
1 自定义组件需要有一个root element，一般包裹在一个div中
2 父子组件的data是无法共享
3 组件可以有data，methods,computed....,但是data 必须是一个函数
 
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
 
Vue.component('navbar', {
    template: `
        <div>
            <button @click="handleClick">返回</button>
            我是NavBar{{aa}}
            <button style="background: red">主页</button>
            <br>
            <child></child>
        </div>
    `,
    methods: {
        handleClick() {
            console.log('nav nav')
        },
    },
    components: {
            child: {
                template: `<button>儿子</button>`,
            }

        },
    data(){
        return {
            aa:'lqz'
        }
    },
})

8 组件通信

1
2
3
4
5
 
1 父子组件传值 (props down, events up)
2 父传子之属性验证props:{name:Number}Number,String,Boolean,Array,Object,Function,null(不限制类型)
3 事件机制a.使用 $on(eventName) 监听事件b.使用 $emit(eventName) 触发事件
4 Ref<input ref="mytext"/>  this.$refs.mytext
5 事件总线var bus = new Vue();* mounted生命周期中进行监听

8.1 父子通信之父传子

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <!--保证属性名和props中的属性名和变量名一致即可-->
    <navbar myname="lqz"></navbar>
    <navbar myname="egon"></navbar>
    <!--注意数据绑定-->
    <navbar :myname="egon"></navbar>
    <!--可以传多个,但是注意，传入的isshow是字符串，可以使用数据绑定变成布尔-->
    <navbar :myname="egon" isshow="false"></navbar>
    <navbar :myname="egon" :isshow="false"></navbar>
</div>
</body>
<script>
    //没有代码提示，语法检查，目前这么用
    //后面会使用webpack打包，直接定义成 xx.vue文件，通过webpack打包
    Vue.component('navbar', {
        template: `
            <div>
                <button>返回</button>
                父组件传递的内容是:{{myname}}
                <button>主页</button>
                <br>
            </div>
        `,
        props:['myname']
    })
    var vm = new Vue({
        el: '#box',
        data: {},

    })
</script>
</html>

属性验证

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <navbar myname="egon" :isshow="false"></navbar>
    <!--报错-->
    <navbar myname="egon" isshow="false"></navbar>
</div>
</body>
<script>
    Vue.component('navbar', {
        template: `
            <div>
                <button>返回</button>
                父组件传递的内容是:{{myname}}
                传入的布尔是{{isshow}}
                <button>主页</button>
                <br>
            </div>
        `,
        // props:['myname'],
        props:{
            myname:String,
            isshow:Boolean,
        },
    })
    var vm = new Vue({
        el: '#box',
        data: {},

    })
</script>
</html>

8.2 父子通信之子传父(通过事件)

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    子组件中监听自定义事件，随便起名
<!--    <navbar @myevent="handleClick"></navbar>-->
    <navbar @myevent="handleClick($event)"></navbar>
</div>
</body>
<script>
    Vue.component('navbar', {
        template: `
            <div>
                <button>返回</button>
                组件
                <button @click="handleEvent">点击按钮把子组件数据传递到父组件</button>
                <br>
            </div>
        `,
        data(){
            return {
                name:'lqz'
            }
        },
        methods:{
            handleEvent(){
                // this.$emit('myevent') //myevent:子组件中监听自定义事件
                this.$emit('myevent',100) //100表示传递的参数
            }
        }
    })
    var vm = new Vue({
        el: '#box',
        data: {},
        methods:{
            handleClick(ev){
                console.log('点击子组件，我会执行')
                console.log(ev)

            }
        }

    })
</script>
</html>

8.3 通过子传父控制字组件显示隐藏

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    普通方式
    <button @click="isShow=!isShow">点击隐藏显示</button>
    <navbar v-show="isShow"></navbar>

    <hr>
    字传父方式
    <mybutton @myevent="handleShow"></mybutton>
    <navbar v-show="isShow"></navbar>
</div>
</body>
<script>
    Vue.component('mybutton', {
        template: `
            <div>
              <button @click="handleClick">点我隐藏显示</button>
            </div>
        `,
        methods: {
            handleClick() {
                this.$emit('myevent')
            }
        }
    })

    Vue.component('navbar', {
        template: `
            <div>
                <ul>
                    <li>111</li>
                    <li>222</li>
                    <li>333</li>
                </ul>
            </div>
        `,
        data() {
            return {
                name: 'lqz'
            }
        },
        methods: {
            handleEvent() {
                // this.$emit('myevent') //myevent:子组件中监听自定义事件
                this.$emit('myevent', 100) //100表示传递的参数
            }
        }
    })
    var vm = new Vue({
        el: '#box',
        data: {
            isShow: true
        },
        methods: {
            handleShow() {
this.isShow=!this.isShow

            }
        }

    })
</script>
</html>

8.4 ref属性

1
2
3
4
 
ref放在标签上，拿到的是原生节点
ref放在组件上，拿到的是组件对象,
	通过这种方式实现子传父（this.$refs.mychild.text）
  通过这种方式实现父传子（调用子组件方法传参数）
 
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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
<!--    通过ref，获取input的值-->
    <input type="text" ref="mytext">
    <button @click="handleClick">点我</button>
    <child ref="mychild"></child>
</div>
</body>
<script>
    Vue.component('child',{
        template:`<div>child</div>`,
        data(){
            return {
                text:'子组件数据'
            }
        },
        methods:{
            add(){
               console.log('子组件的add方法')
            }
        }
    })
 var vm = new Vue({
        el: '#box',
        data: {

        },
        methods: {
            handleClick() {
                console.log(this)
                //this.$refs.mytext 获取到input控件，取出value值
                console.log(this.$refs.mytext.value)
                console.log(this.$refs.mychild.text)
                // this.$refs.mychild.add()
                this.$refs.mychild.add('传递参数')

            }
        }

    })
</script>
</html>

8.5 事件总线(不同层级的不通组件通信)

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <child1></child1>
    <child2></child2>
</div>
</body>
<script>
    var bus=new Vue() //new一个vue的实例，就是中央事件总线
    Vue.component('child1', {
        template: `<div>
            <input type="text" ref="mytext">
            <button @click="handleClick">点我</button>
        </div>`,
        methods:{
            handleClick(){
                bus.$emit('suibian',this.$refs.mytext.value) //发布消息，名字跟订阅消息名一致
            }
        }
    })
    Vue.component('child2', {
        template: `<div>
                    <div>收到的消息 {{msg}}</div>
                    </div>`,
        data(){
            return {msg:''}
        },
        mounted(){
            //生命周期，当前组件dom创建完后悔执行
            console.log('当前组件dom创建完后悔执行')
            //订阅消息
            bus.$on('suibian',(item)=>{
                console.log('收到了',item)
                this.msg=item
            })
        }
    })
    var vm = new Vue({
        el: '#box',
        data: {},
        methods: {
            handleClick() {
                console.log(this)
                //this.$refs.mytext 获取到input控件，取出value值
                console.log(this.$refs.mytext.value)
                console.log(this.$refs.mychild.text)
                // this.$refs.mychild.add()
                this.$refs.mychild.add('传递参数')

            }
        }

    })
</script>
</html>

9 动态组件

1
2
 
1 <component> 元素，动态地绑定多个组件到它的 is 属性
2 <keep-alive> 保留状态，避免重新渲染

9.1 基本使用

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <ul>
        <li><a @click="who='child1'">首页</a></li>
        <li><a @click="who='child2'">商品</a></li>
        <li><a @click="who='child3'">购物车</a></li>
    </ul>
 <component :is="who"></component>
</div>
</body>
<script>
    var bus = new Vue() //new一个vue的实例，就是中央事件总线
    Vue.component('child1', {
        template: `<div>
          首页
        </div>`,

    })
    Vue.component('child2', {
        template: `<div>
                   商品
                    </div>`,
    })
    Vue.component('child3', {
        template: `<div>
                   购物车
                    </div>`,
    })
    var vm = new Vue({
        el: '#box',
        data: {
            who:'child1'
        },

    })
</script>
</html>

9.2 keep-alive使用

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
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="box">
    <ul>
        <li><a @click="who='child1'">首页</a></li>
        <li><a @click="who='child2'">商品</a></li>
        <li><a @click="who='child3'">购物车</a></li>
    </ul>
    <keep-alive>
         <component :is="who"></component>
    </keep-alive>

</div>
</body>
<script>
    var bus = new Vue() //new一个vue的实例，就是中央事件总线
    Vue.component('child1', {
        template: `<div>
          首页
        </div>`,

    })
    Vue.component('child2', {
        template: `<div>
                   商品
                   <input type="text">
                    </div>`,
    })
    Vue.component('child3', {
        template: `<div>
                   购物车
                    </div>`,
    })
    var vm = new Vue({
        el: '#box',
        data: {
            who:'child1'
        },

    })
</script>
</html>

Vue-CLI 项目搭建

1 单文件组件

https://cn.vuejs.org/v2/guide/single-file-components.html#ad

2 Vue-CLI 项目搭建

2.1 环境搭建

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 

- 安装node

官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

- 安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

- 安装脚手架

cnpm install -g @vue/cli


- 清空缓存处理

npm cache clean --force

2.2 项目的创建

创建项目

1
2
3
4
5
 
vue create 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目，选取Router, Vuex插件
//标准eslint，自动修复（ESlint+Standard config--》lint on save+Lint and fix on commit）
vue ui 使用图形界面创建项目

启动/停止项目

1
2
 
npm run serve / ctrl+c
// 要提前进入项目根目录

打包项目

1
2
 
npm run build
// 要在项目根目录下进行打包操作

package.json中

1
2
3
4
5
 
"scripts": {
    "serve": "vue-cli-service serve",  # 运行项目
    "build": "vue-cli-service build",  # 编译项目成html，css，js
    "lint": "vue-cli-service lint"     # 代码格式化
},

2.3 认识项目

项目目录

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖(删掉，不上传git，使用npm install重新安装)
public: 共用资源
	--favicon.ico
	--index.html:项目入口页面，单页面
src: 项目目标,书写代码的地方
	-- assets:资源
	-- components:组件
	-- views:视图组件
	-- App.vue:根组件
	-- main.js: 入口js
	-- router.js: 路由文件
	-- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)
package.json：项目配置依赖（等同于python项目的reqirement.txt）

配置文件：vue.config.js

1
2
3
4
5
6
7
 
//https://cli.vuejs.org/zh/config/ 配置参考
module.exports={
	devServer: {
		port: 8888
	}
}
// 修改端口,选做

main.js 整个项目入口文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
//es6 模块导入规范，等同于python导包
//commonJs的导入规范：var Vue=require('vue')
import Vue from 'vue'
import App from './App.vue'  //根组件
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')


/*
new Vue({
	el:'#app' //原来是用el:'#app'，现在是new出Vue对象，挂载到#app上---》.$mount('#app')
  render: h => h(App) //原来是在页面上div中写样式，现在组件化开发 把根组件（import App from './App.vue'），通过render渲染上，渲染组件的方式
}).$mount('#app')
*/

vue文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<template>
    <!-- 模板区域 -->
</template>
<script>
    // 逻辑代码区域
    // 该语法和script绑定出现
  	//export default-->es6的默认导出（导出一个对象），模拟commonJS的导出方式制定的
    export default {
        
    }
</script>
<style scoped>
    /* 样式区域 */
    /* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
</style>

定义组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
#1 新建xx.vue
components-->HelloWorld.vue
#2 引入使用
<script>
	# es6的引入import from 
  import HelloWorld from '@/components/HelloWorld.vue'
  import Vue from 'vue'
  Vue.component('HelloWorld',HelloWorld) # 全局组件
  export default {
     components: { # 局部组件
   		 HelloWorld:HelloWorld
  		},
        
}
</script>

ESLint

1
2
3
4
5
6
7
8
9
10
 
ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas 于2013年6月创建。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。

JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。

ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖于同样的模式。为了便于人们使用，ESLint 内置了一些规则，当然，你可以在使用过程中自定义规则。

ESLint 使用 Node.js 编写，这样既可以有一个快速的运行环境的同时也便于安装
js语法规范性检查，类似于PEP8规范
官网
https://eslint.bootcss.com/docs/about/

1、使用vue-cli：

在vue-cli在init初始化时会询问是否需要添加ESLint，确认之后在创建的项目中就会出现.eslintignore和.eslintrc.js两个文件。

.eslintignore类似Git的.gitignore用来忽略一些文件不使用ESLint检查。
.eslintrc.js是ESLint配置文件，用来设置插件、自定义规则、解析器等配置。

执行：npm run lint 会自动修复代码

2、配置ESLint：

Vue的项目配置eslint还是很简单的。它属于依赖插件中的一种，可以像安装其他插件一样在命令行用npm install eslint -g安装，也可以修改package.json文件去更新项目的依赖包，重新跑一遍npm install就可以了。 eslint常用的依赖有很多，我贴出我用的一些。在package.jsonde 的dependencies或者devDependencies中添加下列属性即可：

1
2
3
4
5
6
7
 
"babel-eslint": "^7.1.1",  
"eslint-config-standard": "^6.2.1",  
"eslint-friendly-formatter": "^2.0.7",  
"eslint-loader": "^1.6.1",  
"eslint-plugin-html": "^2.0.0",  
"eslint-plugin-promise": "^3.4.0",  
"eslint-plugin-standard": "^2.0.1",

但是有可能项目没有生成 eslintrc.js，码友可以去网上搜eslintrc.js然后放在项目根目录下即可。

3 vue项目中关闭ESLint

时候会被ESLint的报错阻止程序的运行，这时候我们就想关闭这个ESLint了。在vue项目中关闭ESLint方法：

image-20201217235753547

4 配置示例

在package.json中通过eslintConfig配置，示例：

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
 
"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "rules": {
      "eol-last": [0],
      "semi": [2, "always"], // 强制语句分号结尾
      "indent": [2, 4], // 强制缩进4 spaces
      "no-new": [0], // 不允许new一个实例后不赋值或不比较
      "no-debugger": [0], // 不允许出现debugger语句
      "camelcase": [0, {"properties": "never"}] // 关闭驼峰命名规则
    },
    "parserOptions": {
      "parser": "babel-eslint"
    }
 },
 "eslintIgnore": [
    "dist/*",
    "node_modules/*",
    "build/*",
    "*.md"
 ],

项目功能插件

1、vue-router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
{
    path: '/',
    name: 'home',
    // 路由的重定向
    redirect: '/home'
}

{
    // 一级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签
    path: '/one-view',
    name: 'one',
    component: () => import('./views/OneView.vue')
}

{
    // 多级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签
    path: '/one-view/one-detail',
    component: () => import('./views/OneDetail.vue'),
    // 子路由, 在所属路由指向的组件中被渲染, 替换该组件(OneDetail)的<router-view/>标签
    children: [{
        path: 'show',
        component: () => import('./components/OneShow.vue')
    }]
}
 
1
2
3
4
5
6
7
 
<!-- router-link渲染为a标签 -->
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link :to="{name: 'one'}">One</router-link> |

<!-- 为路由渲染的组件占位 -->
<router-view />
 
1
2
3
 
a.router-link-exact-active {
    color: #42b983;
}
 
1
2
3
4
5
 
// router的逻辑转跳
this.$router.push('/one-view')

// router采用history方式访问上一级
this.$router.go(-1)

2、vuex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
// 在任何一个组件中,均可以通过this.$store.state.msg访问msg的数据
// state永远只能拥有一种状态值
state: {
    msg: "状态管理器"
},
// 让state拥有多个状态值
mutations: {
    // 在一个一个组件中,均可以通过this.$store.commit('setMsg', new_msg)来修改state中的msg
    setMsg(state, new_msg) {
        state.msg = new_msg
    }
},
// 让mutations拥有多个状态值
actions: {

}

3、vue-cookies

1
2
3
4
5
6
 
// 安装cookie的命令
// npm install vue-cookies --save
// 为项目配置全局vue-cookie
import VueCookies from 'vue-cookies'
// 将插件设置给Vue原型,作为全局的属性,在任何地方都可以通过this.$cookie进行访问
Vue.prototype.$cookies = VueCookies
 
1
2
3
4
5
6
 
// 持久化存储val的值到cookie中
this.$cookies.set('val', this.val, 300)
// 获取cookie中val字段值
this.$cookies.get('val')
// 删除cookie键值对
this.$cookies.remove('val')

4、axios

1
2
3
 
import axios from 'axios' # 安装的模块不用加相对路径

axios.get().then()
 
1
2
3
4
5
 
// 安装 axios(ajax)的命令
// npm install axios--save
// 为项目配置全局axios
import Axios from 'axios'
Vue.prototype.$ajax = Axios
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
let _this = this
this.$ajax({
    method: 'post',
    url: 'http://127.0.0.1:5000/loginAction',
    params: {
        usr: this.usr,
        ps: this.ps
    }
}).then(function(res) {
    // this代表的是回调then这个方法的调用者(axios插件),也就是发生了this的重指向
    // 要更新页面的title变量,title属于vue实例
    // res为回调的对象,该对象的data属性就是后台返回的数据
    _this.title = res.data
}).catch(function(err) {
    window.console.log(err)
})
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
# 用pycharm启动该文件模拟后台
from flask import Flask, request, render_template
from flask_cors import CORS
app = Flask(__name__)
CORS(app, supports_credentials=True)

@app.route('/')
def index():
    return "<h1>主页</h1>"

@app.route('/loginAction', methods=['GET', 'POST'])
def test_action():
    # print(request.args)
    # print(request.form)
    # print(request.values)
    usr = request.args['usr']
    ps = request.args['ps']
    if usr != 'abc' or ps != '123':
        return 'login failed'
    return 'login success'


if __name__ == '__main__':
    app.run()

5、跨域问题解决

1
2
3
4
5
 
# http://www.mei.com/silo/women 响应头中Access-Control-Allow-Origin: * 允许所有的域访问
# 以猫眼电影为例 ：https://m.maoyan.com/#movie

# devServer.proxy
# https://cli.vuejs.org/zh/config/#devserver-proxy

vue.config.js

1
2
3
4
5
6
7
8
9
10
 
module.exports = {
  devServer: {
    proxy: {
      '/ajax': {
        target: 'https://m.maoyan.com/',
        changeOrigin: true
      }
    }
  }
}

组件中

1
2
3
4
5
6
7
 

import axios from 'axios'
mounted () {
  axios.get('ajax/moreClassicList?sortId=1&showType=3').then(res => {
    console.log(res.data)
  })
}
posted @ 2021-05-07 20:05  silencio。  阅读(79)  评论(0)    收藏  举报