3、vueJs基础知识03

vue过渡(动画)

　　本质走的css3: transtion ,animation

　　<div id="div1" v-show="bSign" transition="fade"></div>

    动画:
        .fade-transition{

        }
        进入：
        .fade-enter{
            opacity: 0;
        }
        离开：
        .fade-leave{
            opacity: 0;
            transform: translateX(200px);
        }

    也可以使用animation.css动画库，并且vue实例还有一个transition配置项

    <div class="animated" transition="bounce" v-show="bSign"></div>

    new Vue({
        el:'',
        data:{},
        methods:{},
        transitions:{
            bounce:{
                enterClass:'zoonInLeft',
                leaveClass:'zoomOutRight'
            }
        }

    })

vue组件

　　组件：一个大对象，定义一个组件

var Aaa=Vue.extend({
    template:'<h3>我是标题3</h3>'
});

　　注册组件：　　

　　1、全局组件，通过Vue的方法component注册到全局类Vue上

Vue.component('aaa',Aaa); //挂在全局Vue对象上的
//全局组件可以在以后的通过new出来的vue实例中使用

    *组件里面放数据:
        组件里面的data必须是函数的形式，函数必须返回一个对象(json数据)

　　　　2、局部组件

　　　　放到某个组件内部，通过components配置项，注册到（组件）实例中

var vm=new Vue({
    el:'#box',
    data:{
        bSign:true
    },
    components:{ //局部组件 挂在vue实例内的
        aaa:Aaa
    }
});

　　另一种定义注册方式.（推荐）；上面是定义和注册分步进行，这种方式是定义和注册合为一步了

      全局：
    Vue.component('my-aaa',{
        template:'<strong>好</strong>'
    });

    局部：
    var vm=new Vue({
        el:'#box',
        components:{
            'my-aaa':{
                template:'<h2>标题2</h2>'
            }
        }
    });    

组件配合模板使用

　　将组件中的模板字符串，抽出模板（多个标签）到html中

　　 1. template:'<h2 @click="change">标题2->{{msg}}</h2>'

    2. 单独放到某个地方
        a). <script type="x-template" id="aaa">
            <h2 @click="change">标题2->{{msg}}</h2>
            </script>

        b). 推荐
　　　　　　　<template id="aaa">
              <h1>标题1</h1>
              <ul>
                <li v-for="val in arr">
                {{val}}
                </li>
              </ul>
            </template>

　　动态组件：（可以做选择卡）

<component :is="组件名称"></component>

　组件间通信

　　　vue默认情况下，子组件也没法访问父组件数据　

1. 子组件就想获取父组件data
    a、在调用子组件：绑定属性
        <bbb :m="数据"></bbb>

    b、子组件之内:通过props获取以上绑定的属性
        props:['m','myMsg']

        也可以指定类型的props
        props:{
            'm':String,
            'myMsg':Number
        }
　　 c、之后就可以在子组件的methods里面或者html插值里面使用了
2. 父级获取子级数据
    *子组件实例主动把自己的数据，发送到父级，父级通过v-on:自定义事件监听，捕获到发送的事件触发，并接收到数据

    vm.$emit(事件名,数据);

    v-on:   @事件名=“自己的方法”

　　　　另外还有一种传值方法（2.0中已经废除）：

　　　　　　vm.$dispatch(事件名,数据) 子级向父级发送数据
　　　　　　vm.$broadcast(事件名,数据) 父级向子级广播数据
　　　　　　配合: event:{}

vue中的slot

　　位置、插槽；作用就是占个位置

　　就是在使用组件时，为组件里面的内容能留有渲染的位置
　　多个slot可以是用name进行区分

　　类似ng里面 transclude （指令）

vue路由

　　vue--->单页面（SPA）应用，是根据不同的路由（url地址），展示不同的效果（组件）

　　用到插件vue-router

html:
    <a v-link="{path:'/home'}">主页</a>    跳转链接

    展示内容:
    <router-view></router-view>
js:
    //1. 准备一个根组件
    var App=Vue.extend();

    //2. Home News组件都准备
    var Home=Vue.extend({
        template:'<h3>我是主页</h3>'
    });

    var News=Vue.extend({
        template:'<h3>我是新闻</h3>'
    });

    //3. 准备路由
    var router=new VueRouter();

    //4. 关联(将组件名与定义的组件关联，之后就可以在html中通过v-link使用了)
    router.map({
        'home':{
            component:Home
        },
        'news':{
            component:News
        }
    });

    //5. 启动路由
    router.start(App,'#box');

　　 跳转（路由重定向）:
    router.redirect({
        ‘/’:'/home'
    });

　　路由多层嵌套：在map关联的路由名称后的配置项subRoutes里进行配置次级路由

    主页    home
        登录    home/login
        注册    home/reg
    新闻页    news

    subRoutes:{
        'login':{
            component:{
                template:'<strong>我是登录信息</strong>'
            }
        },
        'reg':{
            component:{
                template:'<strong>我是注册信息</strong>'
            }
        }
    }　　

　　　　路由其他信息:可以通过路由后面的参数传递，并在当前路由组件的模板中使用
　　　　/detail/:id/age/:age

　　　　{{$route.params | json}} -> 当前参数

　　　　{{$route.path}} -> 当前路径

　　　　{{$route.query | json}} -> 查询字符串数据

vue-loader（.vue文件加载器）

　　　　通过路由实现页面切换，项目实现单文件组件，即使用.vue文件，.vue文件的编译需要vue-loader处理

　　　　其他loader->  css-loader、url-loader、html-loader、file-loader.....

　　　　后台: nodeJs ->  require  exports

　　　　browserify  模块加载，只能加载js

　　　　webpack   模块加载器， 一切东西都是模块, 最后打包到一块了 （包括图片、css）

　　　　require('style.css'); ->   css-loader、style-loader

　　　　vue-loader基于webpack

.vue文件

　　vue单文件组件，放置的是vue组件代码，结构包括三部分

　　　　　<template>
            html
        </template>

        <style>
            css
        </style>

        <script>
            //js    （平时代码、ES6）    babel-loader（编译es6）
　　　　　　　export default{
　　　　　　　　//里面像组件使用一样的
　　　　　　　　data(){
　　　　　　　　　　return {
　　　　　　　　　　　　msg:'welcome Vue'
　　　　　　　　　　}
　　　　　　　　}
　　　　　　　}
        </script>