三、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>'
});

　　註冊組件：　　

　　一、全局組件，經過Vue的方法component註冊到全局類Vue上

Vue.component('aaa',Aaa); //掛在全局Vue對象上的
//全局組件能夠在之後的經過new出來的vue實例中使用

    *組件裏面放數據:
        組件裏面的data必須是函數的形式，函數必須返回一個對象(json數據)

　　　　二、局部組件

　　　　放到某個組件內部，經過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>