Vue.js要点记录（二）

从 1.x 到 2.x 重要变化

(1) 在每个组件模板，不在支持片段代码

    组件中模板:
        之前:
            <template>
                <h3>我是组件</h3><strong>我是加粗标签</strong>
            </template>
        现在:  必须有根元素，包裹住所有的代码
            <template id="aaa">
                    <div>
                        <h3>我是组件</h3>
                        <strong>我是加粗标签</strong>
                    </div>
            </template>
 
 
1
2
3
4
5
6
7
8
9
10
11
12
 
 
1
2
3
4
5
6
7
8
9
10
11
12

(2) 关于组件定义

    Vue.extend  这种方式，在2.0里面可以使用，但有些改动

    Vue.component(组件名称,{    在2.0继续能用，但不推荐，推荐使用简洁写法
        data(){}
        methods:{}
        template:
    });

    2.0 推出一个组件，简洁定义方式：
    var Home={
        template:''     ->   Vue.extend()
    };
 
 
1
2
3
4
5
6
7
8
9
10
11
12
 
 
1
2
3
4
5
6
7
8
9
10
11
12

(3) 生命周期

    1.x 版本:
        init    
        created
        beforeCompile
        compiled
        ready       √   ->     mounted
        beforeDestroy   
        destroyed
    2.x 版本:
        beforeCreate    组件实例刚刚被创建,属性都没有
        created 实例已经创建完成，属性已经绑定
        beforeMount 模板编译之前
        mounted 模板编译之后，代替之前ready  *
        beforeUpdate    组件更新之前
        updated 组件更新完毕  *
        beforeDestroy   组件销毁前
        destroyed   组件销毁后
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

(4) 循环

    2.0 里面默认就可以添加重复数据，无需 track by

    去掉了隐式一些变量
        $index	$key

    1.x 版本:
        v-for="(index,val) in array"
    2.x 版本:
        v-for="(val,index) in array"    //==>类似原生JS的forEach()函数
 
 
1
2
3
4
5
6
7
8
9
 
 
1
2
3
4
5
6
7
8
9

(5) track-by=”id”

    2.0 可以直接添加重复数据，所以直接删掉，但是如果还想要提高性能，
    变成
        <li v-for="(val,index) in list" :key="index">
 
 
1
2
3
 
 
1
2
3

(6) 自定义键盘指令

    1.x 版本：Vue.directive('on').keyCodes.f1=17;  

    2.x 版本:  Vue.config.keyCodes.ctrl=17
 
 
1
2
3
 
 
1
2
3

(7) 过滤器

    1.x 版本:
        系统就自带很多过滤
        {{msg | currency}}
        {{msg | json}}
        ....
        limitBy
        filterBy
        .....
    一些简单功能，自己通过js实现

    2.x 版本， 内置过滤器全部删除

        可以自己使用原生JS实现，或者使用 `lodash` 等工具库，例如自定义延迟过滤器：`_.debounce(fn,200)`

        自定义过滤器——还有
            但是,自定义过滤器传参

            1.x 版本:     {{msg | toDou '12' '5'}}
            2.x 版本:     {{msg | toDou('12','5')}}
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

(8) 组件通信:

    vm.$emit()
    vm.$on();

    父组件和子组件:

    子组件想要拿到父组件数据:
        通过  props

    1.x 版本，子组件可以更改父组件信息，并且可以是父子组件同步更改(使用sync)：<child :msg.sync='aa'></child>
    2.x 版本，不允许直接给父级的数据，也就是不允许直接给父级的数据进行赋值操作(this.msg='newMsg')

    如果希望进行更改：
        a). 父组件每次传一个 `对象` (而不是单个的String或者Number类型的数据)给子组件, 对象之间互相引用，
            并没有直接对整个对象赋值，而是对 对象 的属性值进行复制, 并且对象是引用类型。
        b). 只是不报错, 使用mounted()钩子函数进行中转,不过只能更改子组件本身数据。
                mounted(){
                    this.b=this.parentData
                }
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

(9) 单一事件管理组件通信: 
var Event=new Vue();

    Event.$emit(事件名称, data)

    Event.$on(事件名称,function(data){
        //data
    }.bind(this));

(10) vue动画

    1) transition 
        1.x 版本 transition 是属性：
            <p transition="fade">transition</p>

            .fade-transition{}
            .fade-enter{}
            .fade-leave{}

        2.x 版本 transition 是组件：
            <transition name="fade">
                <p>transition</p>
            </transition>

            class定义:
            .fade-enter{}   //初始状态
            .fade-enter-active{}  //变化成什么样  ->  当元素出来(显示)

            .fade-leave{}
            .fade-leave-active{} //变成成什么样   -> 当元素离开(消失)

    2) 使用
        <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight">
            <p v-show="show"></p>
        </transition>

        多个元素运动,需要放在一个 <transition-group>标签中:
            <transition-group enter-active-class="" leave-active-class="">
                <p :key=""></p>
                <p :key=""></p>
            </transition-group>

            //这一行是必须有的，定义了进入动画和离开动画的持续时间
            .fade-enter-active,.fade-leave-active {
                transition:1s all ease;
            }
            //这一行表示进入动作被激活，将要朝着这个样式进行变化
            .fade-enter-active{
                opacity: 1;
                width:300px;
                height: 300px;
            }
            //.fade-enter表示刚刚进入时的初始状态，动画将以这个样式状态作为起点进行进入的变化，
            //需要注意与.fade-enter-active的先后次序，如果放在.fade-enter-active上面，可能导致动画不起作用
            //.fade-leave没实质性的意义，不过官方建议加上，作为动画刚开始离开时刻的状态，动画将以这个样式状态作为起点进行离开的变化，一般与.fade-enter相同
            .fade-enter,.fade-leave {
                opacity: 0;
                width:100px;
                height: 100px;
            }
            //这一行表示离开动作被激活的状态，将要朝着这个样式进行变化
            .fade-leave-active{
                opacity: 0;
                width:100px;
                height: 100px;
            }
    3) 运动事件
        <transition name="fade"
            @before-enter="beforeEnter"
            @enter="enter"
            @after-enter="afterEnter"

            @before-leave='beforeLeave'
            @leave='leave'
            @after-leave='afetrLeave'>
            <p v-if="show">hello</p>
        </transition>

    4) 配合animate.css
        注意：使用animate.css 需要使用 class="animated" 指定需要运动的元素，有以下两种指定的形式：
            <transition enter-active-class="bounceInLeft" leave-active-class="bounceOutRight">
                <p v-if="show" class="animated">hello</p>
            </transition>
            或者
            <transition enter-active-class="bounceInLeft animated" leave-active-class="bounceOutRight animated">
                <p v-if="show">hello</p>
            </transition>
 
 
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
 
 
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

(11) vue2.0 路由:

    http://router.vuejs.org/zh-cn/index.html

    1) 布局
        <router-link to="/home">主页</router-link>
        <router-view></router-view>

    2) 路由具体写法
        //组件
        var Home={
            template:'<h3>我是主页</h3>'
        };
        var News={
            template:'<h3>我是新闻</h3>'
        };

        //配置路由
        const routes=[
            {path:'/home', componet:Home},
            {path:'/news', componet:News},
        ];

        //生成路由实例
        const router=new VueRouter({
            routes
        });

        //最后挂到vue上
        new Vue({
            router,
            el:'#box'
        });
    3) 重定向
        之前  router.rediect  废弃了
        {path:'*', redirect:'/home'}

    4) 路由嵌套:
        /user/username

        const routes=[
            {path:'/home', component:Home},
            {
                path:'/user',
                component:User,
                children:[  //核心
                    {path:'username', component:UserDetail}
                ]
            },
            {path:'*', redirect:'/home'}  //404
        ];

    5) 传值
        /user/strive/age/10

        :id
        :username
        :age
    6) 路由实例方法:
        router.push({path:'home'});  //直接添加一个路由,表现切换路由，本质往历史记录里面添加一个
        router.replace({path:'news'}) //替换路由，不会往历史记录里面添加

    7) 路由切换可以与animate.css配合，产生页面切换动画的效果，类似swiper

    8) 脚手架:  vue-loader
        1.0  -> 
            new Vue({
                el: '#app',
                components:{App}
            })  

        2.0->
            new Vue({
                el: '#app',
                render: h => h(App)
            })

 
 
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
 
 
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

---

5. 组件样式

(1) MintUI:适应于移动端
(2) elementUI:适应于PC端