原创 50. Vue名稱案例-使用keyup事件監聽

需求 在日常開發中，經常會有計算或者拼接輸入框內容，然後在另一個輸入框呈現的場景，例如：計算器、拼接名稱等等。 那麼假定本次的需求是一個填寫名稱的需求，具有三個文本框： 姓氏 名稱 姓名 其中 姓名 由 姓氏 + 名稱，下面來實現一下。

2020-07-29 17:36:25

原创 49. Vue使用axios發送Ajax請求

需求 在Vue.js的框架中，如果要發送ajax請求是需要藉助外部庫的。在vue1.0版本官方推薦的vue-resource、vue2.0版本官方推薦的axios，或者也可以使用jquery來發送ajax請求。 那麼本篇章主要來介紹使用ax

2020-07-23 17:24:26

原创 48. Vue路由-使用命名視圖實現經典佈局

需求 在前面的路由篇章中，我在寫router-view的時候並沒有什麼特徵標識，也就是所有路由映射的組件都可以顯示出來。但是在一些經典後臺佈局中，一般什麼組件在哪裏顯示是需要固定好的，如下： 那麼這時候就需要命名視圖了，基本語法：<rou

2020-07-22 17:24:23

原创 47. Vue使用children屬性實現路由嵌套

前言 前面基本演示完了vue-router的基本用法，但是當組件之間嵌套子組件，這個嵌套的路由該怎麼寫呢？ 可能這一句話不能夠直接說明情況，下面來直接看例子。 嵌套路由示例 1.首先寫三個組件，一個account組件，另外兩個子組件logi

2020-07-22 17:24:23

原创 46. Vue路由傳參的基本使用

前言 上一章節講解了vue-router的基本使用，本章節來開始看看如何在路由中設置參數。 那麼其中路由傳遞的參數有兩種方式，如下： 使用query的方式傳遞參數，例如：/login?id=1 使用params的方式傳遞參數, 例如：/

2020-07-21 17:22:58

原创 45. Vue路由vue-router的基本使用

前言 在使用vue-router之前，首先要認識一下前端路由和後端路由的區別概念。 什麼是路由 後端路由:對於普通的網站，所有的超鏈接都是URL地址，所有的URL地址都對應服務器上對應的資源； 例如：https://www.ximala

2020-07-20 17:26:59

原创 42. Vue組件傳值-子組件通過事件調用向父組件傳值

前言 上一篇章講解了使用props將父組件的值傳遞到子組件中，那麼子組件如果反過來傳遞給父組件呢？ 這就需要父組件傳遞事件方法，提供子組件調用，通過子組件調用父組件的函數，傳入相關參數，來進行逆向傳遞。 而子組件如果想要調用父組件的函數，則

2020-07-17 18:11:57

原创 43. Vue組件案例-評論列表

需求 爲了更好看看父子組件之間的傳值，本章來一個評論列表的小案例。 編寫這個案例步驟大致如下： 編寫一個基本的樣式頁面，頁面內容有兩部分：提交評論信息表單、展示評論信息的列表 那麼提交評論信息表單可以寫爲一個子組件，而評論信息列表爲父組件

2020-07-17 18:11:57

原创 44. Vue使用ref獲取dom元素以及組件引用

ref的官網介紹 https://cn.vuejs.org/v2/api/#ref 需求 在普通的js操作中，一般都是直接操作dom元素，但是對於Vue.js框架來說，一般是不允許直接操作dom元素的。 那麼其實Vue.js框架提供了ref

2020-07-17 18:11:57

原创 41. Vue組件傳值-父組件向子組件傳值

前言 前面寫了組件的創建、切換等等篇章，主要講述了組件自身如何在父組件app中如何渲染使用。這裏存在一個問題，就是父組件的數據如何傳遞到子組件中。 這是一個很常見的情況，如果是jQuery那麼都是直接傳參數就是了，而在Vue框架中，這裏就要

2020-07-08 22:16:15

原创 40. Vue組件切換動畫以及mode效果設置

前言 上一篇使用component元素實現組件切換，但是沒有切換的動畫效果。那麼可以參考官網的例子，實現一下組件切換的動畫，以及mode效果設置。 官網說明：多個組件的過渡 多個組件的過渡簡單很多 - 我們不需要使用 key attribu

2020-07-02 19:43:04

原创 39. Vue組件切換-使用component元素實現組件切換

需求 上一篇章使用v-if和v-else結合一個flag屬性值來控制組件之間的切換。本章節使用components元素來更加直接的切換組件。 使用示例如下： <!-- Vue提供了 component ,來展示對應名稱的組件 --> <!-

2020-07-02 19:43:04

原创 14. css3 media響應式樣式示例

需求 在日常的樣式編寫中，對於瀏覽器寬度變化的時候，我們爲了增加體驗，總是需要根據變化進行響應式的樣式設置。 本篇章編寫一個 media 的瀏覽器寬度響應示例。 media 使用說明 @media 類型 and (條件1)

2020-06-30 20:28:49

原创 38. Vue組件切換 使用v-if、v-else結合flag進行切換

需求 在登陸頁面的需求中，一般都會有登陸、註冊兩個按鈕，然後點擊不同的按鈕顯示不同的頁面。在這裏對應的頁面可以是一個組件。 那麼通過點擊不同的按鈕，切換不同的組件頁面。 下面使用v-if、v-else結合flag來實現這個頁面的切換需求。

2020-06-24 14:22:08

原创 PyCharm採用SSH連接Docker鏡像搭建Python開發環境

1. 需求 在Python開發中經常會碰到一些棘手的環境問題，例如：如果開發環境是windows，那麼在開發ansible模塊的時候，而ansible模塊又一般都是安裝在linux系統，這時候在windows開發就不好處理了。 此時，可以考

2020-06-21 14:28:40