vue初始化、數據處理、組件傳參、路由傳參、全局定義CSS與JS、組件生命週期

時間  2020-02-15
標籤 vue 初始化 數據處理 組件 路由 全局 定義 css 生命週期 欄目 大數據 简体版
原文   原文鏈接

目錄css

項目初始化

1.跟組件: App.vuehtml

<template>
  <div id="app">
    <router-view />
  </div>
</template>

2.路由配置：router--index.jsvue

只保留home主頁，刪除about頁，刪除views中About組件node

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },

];

3.組件：views和components文件夾python

1）刪除除Home.vue之外的全部組件npm

2）初始化Home.vue瀏覽器

<template>
  <div class="home">
    <h1>主頁</h1>
  </div>
</template>

3)刪除logo和HollWorld.vueapp

4)在assets中新建css、img、js三個文件夾函數

若是要修改頁面標籤圖標
    替換public文件夾下的favicon.ico圖片文件

組件數據局部化處理

"""
1）無論頁面組件仍是小組件，均可能會被屢次複用
2）複用組件的緣由，其實就是複用組件的 頁面結構、頁面樣式、頁面邏輯
3）可是頁面上的數據須要區分（被複用的兩個組件數據多少是有區別的），因此組件的數據要作局部化處理
4）藉助函數能夠產生局部做用域的特色，爲每一次複用組件產生一個獨立的做用域
語法:
data () {
    return {
        // 數據們
    }
}
"""

子組件

<template>
    <div class="beat" @click="count += 1">
        {{ count }}下
    </div>
</template>

<script>
    export default {
        name: "Beat",
        // 無論是頁面組件仍是小組件，均可能被複用，頁面結構與樣式均可以採用一套，可是數據必定要相互獨立
        data () {
            return {
                count: 0
            }
        }
    }
</script>

<style scoped>
    .beat {
        width: 100px;
        height: 100px;
        background-color: orange;
        text-align: center;
        line-height: 100px;
        border-radius: 50%;
    }
</style>

父組件

<template>
    <div class="home">
        <Beat/>
        <Beat/>
    </div>
</template>
<script>
    import Beat from '@/components/Beat'
    export default {
        components: {
            Beat,
        }
    }
</script>

路由邏輯跳轉

"""
1）不少時候，咱們須要經過普通按鈕的邏輯，或是直接在某些邏輯中完成頁面的跳轉
2）能夠經過在邏輯中用 this.$router.push() 來完成前往目標頁，兩種語法以下
    this.$router.push('路徑')
    this.$router.push({name: '路由名'})
3）在作移動端項目時，沒有像瀏覽器那樣的前進後臺鍵，頁能夠用 this.$router.go() 來完成前進後退，語法以下
    前進後退：this.$router.go(正負整數)，正式表明前進，負數表明後臺，數值就是步長
"""

案例

<template>
    <div class="home">
        <Nav/>
        <h1>主頁</h1>
        <button @click="goPage('/first')">前往第一頁</button>
        |
        <button @click="goPage('/second')">前往第二頁</button>
        |
        <button @click="goBack(-1)">後退一頁</button>
        |
        <button @click="goBack(-2)">後退二頁</button>
        |
        <button @click="goBack(1)">前進一頁</button>
    </div>
</template>

<script>
    import Nav from '@/components/Nav'

    export default {
        methods: {
            goPage(path) {
                // 能夠經過 this.$router 完成邏輯跳轉
                this.$router.push();
            },
            goBack(num) {
                // 通常在移動端項目上運用
                this.$router.go(num);  
            }
        },
        components: {
            Nav,
        }
    }
</script>

組件傳參

父傳子

"""
1、組件傳參 - 父傳子
1）在子組件內部經過props設置組件的自定義屬性
    props: ['abc', 'goods']
2）在父組件渲染子組件是對自定義屬性賦值便可
    <GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods"/>
"""

子組件

<template>
    <div class="goods-box">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </div>
</template>

<script>
    export default {
        name: "GoodsBox",
        // 在組件內部經過props定義組件的自定義屬性
        props: ['abc', 'goods'],
    }
</script>

<style scoped>
    .goods-box {
        width: 260px;
        height: 300px;
        border: 1px solid black;
        border-radius: 5px;
        margin: 20px;
        float: left;
        overflow: hidden;
        text-align: center;
    }
    img {
        width: 260px;
        height: 260px;
    }
</style>

父組件

<template>
    <div class="goods">
        <div class="main">
            <!-- 在使用子組件是對自定義屬性賦值便可 -->
            <GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods" />
        </div>
    </div>
</template>
<script>
    import GoodsBox from "../components/GoodsBox";

    let goods_list = [
        {
            img: require('@/assets/img/001.jpg'),
            title: '小貓',
        },
        {
            img: require('@/assets/img/002.jpg'),
            title: '小貓兒',
        },
        {
            img: require('@/assets/img/003.jpg'),
            title: '小狗',
        },
        {
            img: require('@/assets/img/004.jpg'),
            title: '小狗兒',
        },
    ];

    export default {
        name: "Goods",
        data () {
            return {
                goods_list,
            }
        },
        components: {
            GoodsBox,
        },
    }
</script>

子傳父

"""
2、組件傳參 - 子傳父
前提：子組件是被父組件渲染的，因此子組件渲染要晚於父組件
1）子組件必定要知足一個條件，才能對父組件進行傳參（某個時間節點 === 某個被激活的方法）
    eg：i）子組件剛剛加載成功，給父組件傳參 ii）子組件某一個按鈕被點擊的時刻，給父組件傳參 iii）子組件要被銷燬了，給父組件傳參

2）在子組件知足條件激活子組件的方法中，對父組件發生一個通知，並將數據攜帶處理（自定義組件事件）
    <div class="goods-box" @click="boxClick"></div>
    methods: {
        boxClick () { this.$emit('receiveData', this.goods.title, '第二個數據', '第三個數據') }
    }

3）在父組件渲染子組件時，爲自定義事件綁定方法
    <GoodsBox @receiveData="recFn"/>

4）在父組件實現綁定方法時，就能夠拿到子組件傳參的內容（接收到了通知並在父組件中相應）
    recFn(title, data2, data3) {
        console.log('接收到了' + title);
    }

組件標籤不能綁定系統定義的事件，沒有意義，子組件的事件都是在本身內部完成
"""

子組件

<template>
    <div class="goods-box" @click="boxClick">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </div>
</template>

<script>
    export default {
        props: ['abc', 'goods'],
        methods: {
            boxClick () {
                // 通知父級 - 自定義組件的事件
                this.$emit('receiveData', this.goods.title)
            }
        }
    }
</script>

父組件

<template>
    <div class="goods">
        <div class="main">
            <!-- 實現自定義事件，接收子組件通知的參數 -->
            <GoodsBox v-for="goods in goods_list" @receiveData="recFn"/>
        </div>
    </div>
</template>
<script>
    import GoodsBox from "../components/GoodsBox";
    export default {
        name: "Goods",
        data () {
            return {
                goodsTitle: '哪一個',
            }
        },
        methods: {
            recFn(title) {
                console.log('接收到了' + title);
                this.goodsTitle = title;
            }
        },
        components: {
            GoodsBox,
        },
    }
</script>

組件的生命週期鉤子

"""
1、組件的生命週期：一個組件從建立到銷燬的整個過程
2、生命週期鉤子：在一個組件生命週期中，會有不少特殊的時間節點，且每每會在特定的時間節點完成必定的邏輯，特殊的事件節點能夠綁定鉤子
注：鉤子 - 提早爲某個事件綁定方法，當知足這個事件激活條件時，方法就會被調用 | 知足特色條件被回調的綁定方法就稱之爲鉤子
"""
<template>
    <div class="goods">
        <Nav />
    </div>
</template>
<script>
    import Nav from "../components/Nav";
    export default {
        name: "Goods",
        components: {
            Nav,
        },
        beforeCreate() {
            console.log('該組件要被加載了')
        },
        created() {
            console.log('該組件要被加載成功了')
        },
        updated() {
            console.log('數據更新了')
        },
        destroyed() {
            console.log('該組件銷燬了')
        }
    }
</script>

路由傳參

"""
路由傳參:
1、經過url正則傳遞數據
i）設置
    路由: path: '/goods/detail/:pk'   |   '/goods/:pk/detail/:xyz'
    請求: '/goods/detail/任意字符'    |    '/goods/任意字符/detail/任意字符'
ii）如何傳
    <router-link :to="`/goods/detail/${pk}`"></router-link>
    this.$router.push(`/goods/detail/${pk}`)

iii）如何取
    this.$route對象是管理路由參數的，傳遞的參數會在this.$route.params字典中
    this.$route.params.pk

2、經過url參數傳遞數據
i）設置
    路由: path: '/goods/detail'
    請求: '/goods/detail?pk=數據'
ii）如何傳
    <router-link :to="`/goods/detail?pk=${pk}`"></router-link>
    <router-link :to="{name:'GoodsDetail', query:{pk: pk}}"></router-link>

    this.$router.push(`/goods/detail?pk=${pk}`)
    this.$router.push({name:'GoodsDetail', query:{pk: pk}})

iii）如何取
    this.$route對象是管理路由參數的,傳遞的參數會在this.$route.query字典中
    this.$route.query.pk
"""

第一種

配置：router/index.js

const routes = [
    {
        path: '/goods/detail/:pk',
        name: 'GoodsDetail',
        component: GoodsDetail
    },
]

傳遞：GoodsBox.vue

<router-link class="goods-box" :to="`/goods/detail/${goods.pk}`">
    <img :src="goods.img" alt="">
    <p>{{ goods.title }}</p>
</router-link>

<!------------------- 或者 ------------------->

<div class="goods-box" @click="goDetail(goods.pk)">
    <img :src="goods.img" alt="">
    <p>{{ goods.title }}</p>
</div>
<script>
    export default {
        name: "GoodsBox",
        methods: {
            goDetail (pk) {
                this.$router.push(`/goods/detail/${pk}`);
            }
        }
    }
</script>

接收：GoodsDetail.py

<script>
    export default {
        name: "GoodsDetail",
        data () {
            return {
                pk: '未知',
            }
        },
        // 一般都是在鉤子中獲取路由傳遞的參數
        created() {
            this.pk = this.$route.params.pk || this.$route.query.pk;
        }
    }
</script>

第二種

配置：router/index.js

const routes = [
    {
        path: '/goods/detail',
        name: 'GoodsDetail',
        component: GoodsDetail
    },
]

傳遞：GoodsBox.vue

<router-link class="goods-box" :to="`/goods/detail?pk=${goods.pk}`">
    <img :src="goods.img" alt="">
    <p>{{ goods.title }}</p>
</router-link>

<!------------------- 或者 ------------------->

<div class="goods-box" @click="goDetail(goods.pk)">
    <img :src="goods.img" alt="">
    <p>{{ goods.title }}</p>
</div>
<script>
    export default {
        name: "GoodsBox",
        methods: {
            goDetail (pk) {
                // this.$router.push(`/goods/detail?pk=${goods.pk}`);
                
                // 或者
                this.$router.push({
                    name: 'GoodsDetail',
                    query: {
                        pk,
                    }
                });
            }
        }
    }
</script>

接收：GoodsDetail.py

<script>
    export default {
        name: "GoodsDetail",
        data () {
            return {
                pk: '未知',
            }
        },
        // 一般都是在鉤子中獲取路由傳遞的參數
        created() {
            this.pk = this.$route.params.pk || this.$route.query.pk;
        }
    }
</script>

全局配置自定義css與js

global.css

html, body {
    margin: 0;
}

a {
    color: black;
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
}

settings.js

export default {
    base_url: 'https://127.0.0.1:8000'
}

main.js

//1) 配置全局css
import '@/assets/css/global.css'
// import global_css from '@/assets/css/global.css'  // 資源須要用變量保存,方便之後使用
// require('@/assets/css/global.css')
// let global_css = require('@/assets/css/global.css')  // 資源須要用變量保存,方便之後使用


// 2) 配置自定義js設置文件
import settings from '@/assets/js/settings.js'
Vue.prototype.$settings = settings;
// 在任何一個組件中的邏輯,能夠經過 this.$settings訪問settings.js文件的{}數據

小結

"""
項目：
    環境；node -> npm -> cnpm -> vue/cli
    建立：vue create proj
    配置：配置npm啓動項
    項目目錄結構：依賴、環境、入口、核心代碼們
    
組件：
    構成：template + script + style
    導入：import 別名 from '路徑'
    父加子：1）導入 2）註冊 3）使用
    組件數據：組件化處理 data(){ return {} }
    傳參：父傳子 - 自定義組件屬性  |  子傳父 - 自定義組件事件
    生命週期鉤子：created() { //完成後臺請求等 }

路由：
    根組件中的頁面佔位：<router-view />
    導航欄中的頁面跳轉：<router-link to=""></router-link>
    代碼中的邏輯跳轉：this.$router.push() | this.$router.go()
    路由傳參：兩種方式
    兩個路由對象：
        this.$router - 控制路由跳轉
        this.$route - 控制路由數據
"""
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程