Vue-CLI 項目中相關操作

来源:https://www.cnblogs.com/pythonywy/archive/2019/08/30/11433111.html
-Advertisement-
Play Games

0830總結 Vue CLI 項目中相關操作 一.前臺路由的基本工作流程 目錄結構 App.vue：根組件 Nav.vue：小組件 PageFirst.vue：頁面組件 PageSecond.vue：頁面組件 router.js：路由配置 二.配置全局樣式文件 目錄結構 global.css mai ...


0830總結

Vue-CLI 項目中相關操作

一.前臺路由的基本工作流程

目錄結構

|vue-proj
|   |src
|   |   |components
|   |   |   |Nav.vue
|   |   |views
|   |   |   |PageFirst.vue
|   |   |   |PageSecond.vue
|   |   |App.vue
|   |   |router.js

App.vue：根組件

<template>
    <div id="app">
        <!--根組件只需要書寫router-view-->
        <!--router-view就是vue-router插件路由占位標簽-->
        <router-view></router-view>
    </div>
</template>

<template>
    <div class="nav">
        <!--router-link就是vue-router插件路由頁面轉跳的標簽，頁面載入後會被解析為a標簽-->
        <!--router-link不同於a標簽，路由轉跳之後更換組件，不會發送頁面轉跳，用to屬性設置轉跳路徑-->
        <router-link to="/page-first">first</router-link>
        <router-link :to="{name: 'page-second'}">second</router-link>
        <router-link to="/course">課程</router-link>
        <!-- to後跟路由路徑 | :to後可以用name設置路由別名 -->
    </div>
</template>

<script>
    export default {
        name: "Nav"
    }
</script>

<style scoped>
    .nav {
        height: 100px;
        background-color: rgba(0, 0, 0, 0.4);
    }
    .nav a {
        margin: 0 20px;
        font: normal 20px/100px '微軟雅黑';
    }
    .nav a:hover {
        color: red;
    }
</style>

PageFirst.vue：頁面組件

<template>
    <div class="page-first">
        <Nav></Nav>
        <h1>page-first</h1>
    </div>
</template>

<script>
    // 使用
    import Nav from '@/components/Nav'
    export default {
        name: "PageFirst",
        components: {
            Nav
        }
    }
</script>

<style scoped>
    .page-first {
        width: 100%;
        height: 800px;
        background: orange;
    }
    h1 {
        text-align: center;
    }
</style>

PageSecond.vue：頁面組件

<template>
    <div class="page-second">
        <Nav></Nav>
        <h1 @click="printTitle">{{ title }}</h1>
        <input type="text" v-model="title">
    </div>
</template>

<script>
    import Nav from '@/components/Nav'
    export default {
        name: "PageSecond",
        data() {
            return {
                title: 'page-second'
            }
        },
        methods: {
            printTitle() {
                console.log(this.title)
            }
        },
        components: {
            Nav
        },
    }
</script>

<style scoped>
    .page-second {
        width: 100%;
        height: 800px;
        background: pink;
    }
    h1 {
        text-align: center;
    }
</style>

router.js：路由配置

import Vue from 'vue'
import Router from 'vue-router'
import PageFirst from './views/PageFirst'
import PageSecond from './views/PageSecond'

Vue.use(Router);

export default new Router({
    mode: 'history',  // 組件更換模擬頁面轉跳形成瀏覽器歷史記錄
    base: process.env.BASE_URL,
    routes: [
        // 路由就是 url路徑 與 vue組件 的映射關係
        // 映射出的組件會替換 根組件 中的 router-view 標簽
        // 通過 router-link 標簽完成 url路徑 的切換
        {  
            path: '/page-first',
            name: 'page-first',
            component: PageFirst
        },
        {
            path: '/page-second',
            name: 'page-second',
            component: PageSecond
        },
    ]
})

二.配置全局樣式文件

目錄結構

|vue-proj
|   |src
|   |   |assets
|   |   |   |css
|   |   |   |   |global.css
|   |   |main.js

global.css

html, body, h1, ul {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: black;
}

/* router-link標簽激活狀態擁有的類名 */
.router-link-exact-active.router-link-active {
    color: greenyellow;
    border-bottom: 2px solid greenyellow;
}

main.js

// 新增內容
// 配置全局css
import '@/assets/css/global.css'

三.組件生命周期鉤子

概念

一個組件從創建到銷毀，整個過程中的特殊的時間節點回調的方法，稱之為生命周期鉤子

如：一個組件創建成功就會回調 created方法，內部數據要更新和更新完畢分別調用 beforeUpdate方法與updated方法

案例

<template>
    <div class="page-second">
        <Nav></Nav>
        <h1 @click="printTitle">{{ title }}</h1>
        <input type="text" v-model="title">
    </div>
</template>

<script>
    import Nav from '@/components/Nav'
    export default {
        name: "PageSecond",
        data() {
            return {
                title: 'page-second'
            }
        },
        methods: {
            printTitle() {
                console.log(this.title)
            }
        },
        components: {
            Nav
        },
        beforeCreate() {
            console.log('開始創建組件');
            console.log(this.title);
            console.log(this.printTitle);
            this.title = '呵呵';
        },
        created() {  // 重點
            console.log('組件創建成功');
            console.log(this.title);
            console.log(this.printTitle);
            // 請求後臺數據，完成數據的更新
            this.title = '嘿嘿';
        },
        beforeMount() {
            console.log('組件開始渲染');
        },
        mounted() {
            console.log('組件渲染成功');
            this.title = '嘻嘻';
        },
        beforeUpdate() {
            console.log('數據開始更新');
        },
        updated() {
            console.log('數據更新完畢');
        },
        activated() {
            console.log('組件激活');
        },
        deactivated() {
            console.log('組件停用');
        },
        destroyed() {
            console.log('組件銷毀成功');
        }
    }
</script>

<style scoped>
    .page-second {
        width: 100%;
        height: 800px;
        background: pink;
    }
    h1 {
        text-align: center;
    }
</style>

四.路由重定向

router.js

import Vue from 'vue'
import Router from 'vue-router'
import PageFirst from './views/PageFirst'
import PageSecond from './views/PageSecond'
import Course from './views/Course'

Vue.use(Router);

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/page-first',
            name: 'page-first',
            component: PageFirst
        },
        {  // 重定向路由的兩種方式
            path: '/page/first',
            // redirect: {'name': 'page-first'},
            redirect: '/page-first'
        },
    ]
})

五.頁面組件小組件綜合案例

目錄結構

|vue-proj
|   |src
|   |   |components  小組件
|   |   |   |CourseCard.vue
|   |   |views  頁面組件
|   |   |   |Course.vue
|   |   |router.js

CourseCard.vue

<template>
    <div class="course-card">
        <div class="left" :style="{background: card.bgColor}"></div>
        <div class="right">{{ card.title }}</div>
    </div>
</template>

<script>
    export default {
        name: "CourseCard",
        props: ['card']
    }
</script>

<style scoped>
    .course-card {
        margin: 10px 0 10px;
    }
    .course-card div {
        float: left;
    }
    .course-card:after {
        content: '';
        display: block;
        clear: both;
    }
    .left {
        width: 50%;
        height: 120px;
        background-color: blue;
    }
    .right {
        width: 50%;
        height: 120px;
        background-color: tan;
        font: bold 30px/120px 'STSong';
        text-align: center;
    }
</style>

CourseCard.vue

<template>
    <div class="course">
        <Nav></Nav>
        <h1>課程主頁</h1>
        <CourseCard :card="card" v-for="card in card_list" :key="card"></CourseCard>
    </div>
</template>

<script>
    import Nav from '@/components/Nav'
    import CourseCard from '@/components/CourseCard'
    export default {
        name: "Course",
        data() {
            return {
                card_list: []
            }
        },
        components: {
            Nav,
            CourseCard
        },
        created() {
            let cards = [
                {
                    id: 1,
                    bgColor: 'red',
                    title: 'Python基礎'
                },
                {
                    id: 3,
                    bgColor: 'blue',
                    title: 'Django入土'
                },
                {
                    id: 8,
                    bgColor: 'yellow',
                    title: 'MySQL刪庫高級'
                },
            ];
            this.card_list = cards;
        }
    }
</script>

<style scoped>
    h1 {
        text-align: center;
        background-color: brown;
    }
</style>

router.js

import Vue from 'vue'
import Router from 'vue-router'
import PageFirst from './views/PageFirst'
import PageSecond from './views/PageSecond'
import Course from './views/Course'

Vue.use(Router);

export default new Router({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        {
            path: '/page-first',
            name: 'page-first',
            component: PageFirst
        },
        {
            path: '/page/first',
            // redirect: {'name': 'page-first'},
            redirect: '/page-first'
        },
        {
            path: '/page-second',
            name: 'page-second',
            component: PageSecond
        },
        {
            path: '/course',
            name: 'course',
            component: Course
        },
    ]
})

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 2019 年了，為什麼我還在用 jQuery？
    許多人都在提倡: “直接用原生的 JavaScript 就好了，不需要 jQuery 了”。 You might not need jQuery嘗試告訴我們，擺脫 jQuery 是一件很容易的事情。但是，它的第一個例子恰恰告訴我們用 jQuery 其實也不錯，因為我們寫了 10 行原生的 JavaS ...
  • nodeJS從入門到進階二（網路部分）
    一、網路伺服器 1、http狀態碼 1xx: 表示普通請求，沒有特殊含義 2xx：請求成功 + 200：請求成功 3xx:表示重定向 + 301 永久重定向 + 302 臨時重定向 + 303 使用緩存（伺服器沒有更新過） 4xx:無法訪問 + 403：無法訪問 + 404：資源找不到 5xx：服務 ...
  • 06. 對象高級-對象創建模式
    01. Object構造函數模式 方式一: Object構造函數模式 * 套路: 先創建空Object對象, 再動態添加屬性/方法 * 適用場景: 起始時不確定對象內部數據 * 問題: 語句太多 02. 對象字面量 方式二: 對象字面量模式 * 套路: 使用{}創建對象, 同時指定屬性/方法 * 適 ...
  • JavaScript（js）筆記一
    js註釋 JavaScript註釋與Java註釋相同 js五大基本類型：   number（數值型）、string（字元串性）、boolean（布爾型）、undefined類型、null類型 number 包括：數值類型、包含整型、浮點型、NaN和Infinity（無窮大）。 關 ...
  • HTML+CSS常用代碼（筆記）
    註釋標簽：對代碼進行說明 常用格式標簽 標題標簽 列表標簽 無序列表： 有序列表： 自定義列表：圖文混排 CSS樣式   內嵌樣式:放在``標簽之間 語法： 所有標簽（ ） 文本屬性 字體標簽及屬性 背景相關的屬性 超鏈接: 郵件超鏈接 圖片標簽 錨點鏈接 圖片滾動 分隔視窗 塊 ...
  • formSelects-v4.js 基於Layui的多選解決方案
    v3傳送門 v3文檔其實思考了很久, 還是放棄了v3, 因為開發v3的時候很粗暴, 按照編程角度來看就是硬擼, 也怪自己實力有限, 所以反思了一下, 嘗試著繼續前行... 2、交流學習 QQ號: 707200833 QQ群: 769620939 重要的事情說三遍, 看文檔, 看文檔, 看文檔, 文檔 ...
  • 自學web前端達到什麼水平，才能滿足求職的標準？
    大多數野生程式員最棘手的問題就是如何依靠技術解決溫飽，通俗來講就是技術折現的問題。 如果是單純出於興趣，或者只是為了突擊某一階段或者某一項目技術壁壘，不跟就業掛鉤的自學倒也是無關痛癢。但是當上崗成為自學的終極目標和結果時，一切都就另當別論了。 前端自學者存在的學習誤區： 1、所學東西可能已過時 奉為 ...
  • 20個常用的JavaScript字元串方法
    摘要： 玩轉JS字元串。 原文： "JS 前20個常用字元串方法及使用方式" 譯者：前端小智 "Fundebug" 經授權轉載，版權歸原作者所有。 本文主要介紹一些最常用的 字元串函數。 1. charAt(x) 返回字元串中 位置的字元，下標從 開始。 2. charCodeAt(x) js 返回 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類