PHP程式設計師初學Vue

2021-10-02 16:46:38 字數 1185 閱讀 1972

筆者是php開發出身,前端掌握的技術只有基礎的html/css/js/jq,之前一直以為vue就是另乙個jquery,就沒有去認真了解這門技術。最近組裡乙個前端大佬在專案中引入了vue並封裝了一些元件,為了推廣使用新技術,筆者這才去菜鳥教程認認真真學了一遍vue基礎,在學習過程中慢慢體驗到vue和jquery是截然不同的,jquery僅僅是乙個js類庫,只是封裝簡化了js的一些常用操作,在使用jq時的開發思路依然是和使用原生js一樣是面向過程的,幾乎每個動作都要先獲取節點元素再對它的一些屬性進行操作,而vue才是真正的前端框架,它將dom節點抽象為乙個個物件,在初始化時只需要將節點和物件繫結一次,就可以通過操作物件來操作節點了,開發思路是物件導向的。

學習vue,首先要做的就是忘記jq的那種圍繞dom節點的開發模式,以下示例為乙個普通列表頁面,本來專案裡使用php+html混合開發的,同事用vue進行了改寫:

id姓名 }}

顯示開始 } 到 } 共 } (總}頁)

<?php 

// 模擬介面

$page = $_get['page'] ?? 1;

$json = ['data'=>,'total'=>110,'retcode'=>200];

$pagesize = 20;

for ($i=($page-1)*$pagesize+1; $i <= min($page*$pagesize,$json['total']); $i++)

echo json_encode($json);

?>

繫結dom元素和vue物件 new vue()例項化乙個vue物件,el:'#content'將物件與id="content"的元素繫結,元素內部就可以使用物件的資料(data)和方法(method)了。

使用指令繫結data與元素相關屬性

渲染資料 用雙大括號}渲染資料,當大括號內的物件資料傳送改變時,被繫結的dom節點屬性也會一同改變。

提取資料,實現方法 主方法為getlist,http請求介面資料,修改物件資料。

實現生命週期鉤子函式 created在物件初始化完成後呼叫,mounted在物件與元素繫結後呼叫。

自定義指令 v-loading為自定義指令,可以控制在http請求時控制列表顯示載入時的樣式,element ui中有現成的輪子,可以引入使用。

如何面試php程式設計師,如何面試PHP程式設計師

乙個包含中英文的字串如何獲得它的自然長度 看看ta是否有encoding的知識和意識 問一問什麼是orm,有時候會問這個詞的英文全稱是什麼,問問ta對於orm有什麼個人的看法?看看ta學習細不細,有沒有技術判斷,php開發人員應該知道什麼時候使用orm 問一問假如ta要自己去實現乙個framewor...

php(黑馬程式設計師)

設定中文編碼 header content type text html charset utf 8 多有語句要加 輸出的關鍵字 echo 你好 變數 資料型別 字串 name 吳京 數字 num 123 換行 echo 小數 pi 3.1415926 bool male false 邏輯語句 if...

程式設計師初學機器學習演算法

英文原文 4 self study machine learning projects 學習機器學習有很多方法,大多數人選擇從理論開始。如果你是個程式設計師,那麼你已經掌握了把問題拆分成相應組成部分及設計小專案原型的能力,這些能力能幫助你學習新的技術 類庫和方法。這些對任何乙個職業程式設計師來說都是...