Vue筆記（四）——Vue動畫&路由

過渡效果

過渡效果應用場景

• 條件渲染（使用v-if）
• 條件展現（使用v-show）
• 動態組件（使用:is）
• 組件根節點

過渡狀態

• opacity:0 ==> 1

enter ==>enter-active

• opacity:1 ==> 0

leave ==> leave-active

CSS過渡

使用vue組件 transition 屬性：name

• style

.fade-enter{opacity:0;}
.fade-enter-active{transition:all 1s;}
.fade-leave-active{opacity:0;transition:all 1s;}

• html

<transition name="fade">
    <!-- 須要過渡的元素 -->
</transition>

CSS動畫

• 格式：@keyframes 動畫名{from{}to{}}
• 使用：

style

.fade-enter-active{animation:fade-in .5s}
@keyframes fade-in{
    from{}to{}
}

html

<transition name="fade"></transition>

初始渲染的過渡

• 格式：

<transition name='fade' appear appear-class appear-class-active></transition>

多個元素的過渡效果

• in-out:先過渡再隱藏
• out-in:先隱藏再過渡

列表的過渡效果

使用：v-for生成列表過渡效果要用使用組件 transition-group,組件提供屬性 tag表示該組件將會渲染成對對應的DOM節點，其餘的使用和transition同樣

腳手架Vue-cli

基於webpack 構建工具下的一個vue的腳手架

webpack-simple簡單版

• 首先須要全局安裝vue

$ npm install vue-cli -g

• 初始化 vue 項目

$ vue init webpack-simple 項目名稱(simple-爲簡單腳手架，webpack-爲完整腳手架)

• 切換到項目路徑

$ cd 項目名稱

• 安裝插件

$ npm install

• 啓動服務器

$ npm run dev

webpack完整版

• 全局安裝 vue-cli

$ npm install --global vue-cli

• 初始化項目

$ vue init webpack 項目名

• 安裝依賴插件

$ npm install

• 運行項目

$ npm run dev

路由

• 定義：經過url映射到對應的功能實現，Vue的路由使用要先引入vue-router

npm install vue-router

基本路由

• 定義組件

// 組件模板
<template>
    <div>
        <h1>這是組件</h1>
    </div>
</tempalte>
// 暴露組件
<script>
    export default{}
</script>

• 定義路由規則

在主入口程序app.js裏面定義規則

// 導入模塊
import Vue from 'vue'
import VueRouter from 'vue-router'
// 全局使用 
Vue.use(VueRouter);

// 導入首頁組件
import app form './app.vue'
// 導入功能組件
import 組件名 from './'

// 路由命名規則
const router = new VueRouter({
    // 配置路由
    routes:[
        {
            path:'/路由',component:組件名,
            // 路由嵌套
            children:[
                {path:'子路由',component:組件名}
            ]
        }
    ]
})

// 獲取vue實例
new Vue({
    el:'#app',
    router,
    render:h =>h(app);
});

路由傳參

• 方式一：使用路由路徑傳參

定義：在路由規則處定義參數屬性

const router = new VueRouter({
    routes:[
        {path:'/user/:id/:pwd',component:組件名}
    ]
})

傳參：在對應的路由下傳參

<router-link to="/user/admin/1234"></router-link>

獲取：在對應的路由文件（組件）下經過 $route.params.屬性名 來獲取參數

let user = {id:{{$.route.params.id},pwd:{{$.route.params.pwd}}

• 方式二：經過params屬性來傳參

$router.push({name:'user',params:{id:fhj,pwd:1234}})

編程式導航

使用JavaScript 跳轉路由

$router.push({path:'/user'})

命名路由

在路由映射規則中添加屬性：name,用於對該路由映射規則命名，在編程式導航跳轉路由時能夠用router.push({name:'名稱'})

命名視圖

給<router-view name='視圖名'></router-view>
分別添加不一樣的id，用於顯示不一樣的組件

• 組件

<template>
    <div>
        <router-view name="default"></router-view>
        <router-view name="a"></router-view>
    </div>
</template>

• 命名規則

cosnt router = new VueRouter({
    routes:[
        {path:'/',components:{
            default:..,
            a:..
        },
        {}
    ]
})
new Vue({
    el:'#app',
    <!-- 初始化路由對象 -->
    router
})