整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
query 沒有雙向數據綁定，但是很多需求確實需要我們從后臺接收到數組或者對象循環顯示在前臺頁面上，這時我們可以用字符串拼接，元素添加的方法去實現。
js部分如下：
這里對子元素點擊事件傳入的this作出了打印，供新手去學習，靈活使用。以便下一步的業務處理。注意：你們會發現，重復點擊會不斷添加元素，所以需要在循環前添加
$("#shu").empty()；清空父元素
div標簽：
<div id="da" style="width: 300px;height:200px ; background: #CCCCCC; ">
<div id='come' style="height: 20px; background: #e6a475;"> 點擊觸發</div>
<div id="shu">
</div>
</div>
頁面效果如下：
點擊子元素1aa效果如下：
廣東優就業
更多IT精彩內容推薦：http://www.ujiuye.com/guangdong/?wt.mc_id=17009338
為一個使用了jQuery很多年 的人，最近，我成為了一個Vue的皈依者，我認為從一個框架到另一個框架的遷移過程將是一個值得討論的有趣的話題。
在我開始之前，我想清楚地說明一點。我并沒有以任何方式告訴任何人去停止使用jQuery。jQuery最近相當流行，而且見鬼，我幾年前也寫過類似的東西(“我如何(不)使用jQuery”)。如果你使用jQuery完成了你的項目，并且你的最終用戶成功地使用了你的站點，那么你將獲得更多的動力去繼續使用對你有用的東西。
本指南更適合那些可能具有多年jQuery經驗并希望了解如何使用Vue來完成工作的人?？紤]到這一點，我將重點介紹我所認為的“核心”jQuery用例。我不會涵蓋每一個可能的特性，而是用“我經常使用jQuery來完成 [X]”的方式來代替，這種方式可能更適合那些考慮學習Vue的人。(順便提一句，請注意，我編寫示例的方式只是執行一個任務的一種方式。jQuery和Vue都提供了多種方法來實現相同的目標，這是一件很棒的事情!)
記住了這一點，我們來思考一些可以使用jQuery完成的高級的東西:
當然，jQuery還有更多的功能，但是這些用途(至少在我看來)涵蓋了最常見的用例。還要注意，在上面的列表中有很多異花授粉現象。那么，我們應該從簡單的一一對應的比較開始嗎?不，沒那么快。我們先從介紹Vue應用程序中的主要差異開始。
#定義Vue的使用場景
當我們將jQuery加入到頁面上時，我們基本上是在JavaScript代碼中添加一把瑞士軍刀來處理常見的web開發任務。我們可以按照我們認為合適的順序來處理任何一個用例。例如，今天客戶可能會要求表單驗證，然后在一個月左右后，又要求在站點的頭部添加一個基于Ajax的搜索表單。
Vue在這方面有一個顯著的不同。當使用Vue開始一個項目時，我們首先會在DOM中定義一個我們希望Vue專用的“區域”。因此，我們來考慮一個簡單的原型web頁面:
在一個典型的jQuery應用程序中，我們可以編寫代碼來處理頭部、側邊欄和登錄表單等。這很簡單:
而在一個Vue應用程序中，我們首先需要指定要處理的內容。假設我們的客戶首先要求我們向loginForm元素添加驗證，那么我們的Vue代碼就要指定這一點:
這意味著，如果客戶后來決定讓我們在側邊欄中添加一些內容，那我們通常會添加第二個Vue應用程序:
這是件壞事嗎?絕對不是。我們馬上就會得到封裝的好處。如果我們不小心使用了一個具有泛型名稱的變量(我們都這樣做過)，我們不必擔心它與代碼的其他部分發生沖突。過后，當客戶端增加了另一個要求時，像這樣將我們獨特的、邏輯化的Vue代碼集區分開就會確保每一個Vue應用程序不會相互干擾。
所以，是的，這是一件好事。但當我第一次開始使用Vue時，它絕對讓我停了下來?，F在，進入我們的用例。
#在DOM中查找東西
你會發現另一個有趣或可怕的方面是如何“在DOM中查找東西”。這有點模糊，但我們來考慮一個強有力的例子。我們有一個按鈕，當它被點擊時，我們讓一些事情發生。下面是一個簡短的例子，展示了它是怎樣的:
現在我們來將這個例子與用Vue的實現方式進行比較:
這個Vue應用程序有點冗長，但是請注意標記是如何在操作(“click”)和將要調用的函數之間建立一個直接連接的。Vue的代碼并沒有與DOM進行向后綁定(我們在el部分之外定義了它需要運行的地方)。這是Vue最吸引我的地方之一——它能很容易地告訴你將要發生什么。此外，我不需要過多地擔心ID值和選擇器。如果我更改了按鈕的類或ID，我不需要返回代碼中去更新選擇器。
我們來考慮另一個例子:在DOM中查找和更改文本。想象一下那個按鈕，單擊它，現在會更改DOM的另一部分的文本。
我已經添加了一個新的span，現在，當按鈕被單擊時，我們使用另一個選擇器來查找它，并使用一個jQuery工具方法來更改其中的文本?，F在我們來考慮一下Vue版本:
在本例中，我們使用Vue的模板語言(突出顯示的行)來指定我們希望在span中呈現的一個變量，在本例中是resultText。現在，當按鈕被單擊時，我們更改該值，span的內部文本將會自動更改。
順便說一句，Vue支持v-on屬性的簡寫，因此示例中的按鈕可以用@click=“ doSomething"代替。
#讀寫表單變量
處理表單可能是我們可以用JavaScript做的最常見也是最有用的事情之一。甚至在JavaScript之前，我早期的“web開發”大部分都是通過編寫Perl腳本來處理表單提交。作為接受用戶輸入的主要方式，表單對web來說一直都是很重要的，而且很可能會在相當長一段時間內保持不變。我們來考慮一個簡單的jQuery例子，它將讀取幾個表單字段并設置另一個:
這段代碼演示了jQuery如何通過val( )方法讀寫表單。最后，我們從DOM中獲取四個項目(所有的三個表單字段和一個按鈕)，并使用簡單的數學方法來生成一個結果?，F在我們來考慮一下Vue版本:
這里介紹了一些有趣的Vue快捷方法。首先，v-model是Vue如何在DOM和JavaScript中的值之間創建雙向數據綁定。data塊變量將自動與表單字段同步。更改數據，表單就會更新。更改表單，數據就會更新。.number是Vue的一個標志，用于將表單字段的繼承字符串值視為數字。如果我們不做這一步，按原樣做加法，我們會看到字符串加法，而不是算術。我已經使用JavaScript處理了將近一個世紀了，但還是搞砸了。
另一個簡單的“技巧”是@click.prevent。首先，@click為按鈕定義了一個單擊處理程序，然后.prevent部分會阻止瀏覽器提交表單的默認行為(相當于event.preventDefault( ))。
最后一個是綁定到該按鈕的doSum方法進行的相加操作。注意，它只處理數據變量(Vue在this作用域內允許對這些變量進行操作)。
雖然這主要是我個人的感覺，但我非常喜歡在用Vue編寫腳本時，腳本中沒有查詢選擇器，以及HTML如何更清楚地顯示它在做什么。
最后，我們甚至可以完全去掉按鈕:
Vue的一個更酷的特性是computed properties（計算屬性）。它們是虛擬值，可以識別其派生值何時被更新。在上面的代碼中，只要兩個表單字段中的任何一個發生更改，總和就會更新。這也適用于表單字段之外。我們可以這樣渲染其總和:
#使用Ajax
值得稱贊的是，jQuery使Ajax的使用變得非常簡單。事實上，我可以說我已經以一種“普通”的方式完成了Ajax，可能總共只有一次（如果你對此很好奇，你可以查看XMLHttpRequest規范，并且你可能會為你已經避免了它而感到高興）。jQuery簡單的$.get(…)方法在很多情況下都能工作，并且當它需要在更復雜的東西中使用時，$.ajax()也能使它變得簡單。jQuery做得很好的另一件事是它處理JSONP請求的方式。雖然現在使用CORS基本上沒有必要，但JSONP是一種處理向不同域中的API發出請求的方法。
那么，Vue如何讓Ajax變得更簡單呢?沒有什么!
好吧，聽起來很嚇人，但其實并不可怕。有許多處理HTTP請求的選項，而Vue.js采用了一種更不可知的方式，讓我們開發人員決定如何處理它。所以，是的，這確實意味著更多的工作，但我們有一些不錯的選擇。
首先應該考慮的是Axios，這是一個Promise-based庫，在Vue社區中非常流行。下面是一個使用它的簡單的例子(摘自它們的README文件):
Axios支持POST請求，當然，它也允許我們在許多其他選項中指定頭文件。
雖然Axios在Vue開發人員中非常流行，但我并不是真心喜歡它。(至少現在還沒有。)相反，我更喜歡Fetch。Fetch不是一個外部庫，而是執行HTTP請求的一種web標準方法。Fetch在大約90%的瀏覽器
上都有很好的支持，雖然這意味著使用它并不完全安全，但是我們總是可以使用一個我們需要的polyfill。
雖然這完全超出了我們在這里討論的范圍，但是Kingsley Silas寫了一本關于在React中使用Axios和Fetch的優秀指南。
和Axios一樣，Fetch也是Promise-based的，并且有一個友好的API:
Axios和Fetch都涵蓋了所有類型的HTTP請求，所以它們都能滿足任意數量的需求。讓我們看一個簡單的比較。下面是一個使用了星球大戰API的簡單jQuery演示。
在上面的示例中，我使用$.get調用該API并返回一個電影列表。然后我用這些數據生成一個標題列表作為 li 標記元素，并將其全部插入到一個ul塊中。
現在，讓我們考慮一個使用Vue的例子:
其中最好的部分可能是使用v-for模板。注意Vue是如何做到與布局無關的(至少與JavaScript無關)。數據是從該API中獲取的。它被分配了一個變量。布局處理如何顯示它。我一直討厭在我的JavaScript中使用HTML，但是jQuery提供了解決方案，把它嵌入到Vue中看起來就很自然很合適。
#一個完整的（在某種程度上有點瑣碎）例子
為了更好地理解它，讓我們考慮一個更真實的例子。我們的客戶要求我們為一個產品API構建一個支持Ajax的前端搜索接口。功能列表包括:
我們從jQuery版本開始。首先, HTML部分如下:
有一個帶有兩個過濾器和兩個div的表單。一個用做搜索或報告錯誤時的臨時狀態，另一個用于呈現結果?，F在，檢查代碼。
代碼首先為要處理的每個DOM項(表單字段、按鈕和div)創建一組變量。代碼的邏輯核心在按鈕的點擊處理程序中。我們進行驗證，如果一切正常，就對該API執行一個POST請求。當請求返回時，我們要么呈現結果
，要么在沒有匹配的情況下顯示消息。
你可以使用下面的CodePen來運行這個演示的完整版本。
現在讓我們考慮Vue版本。同樣，我們先從布局開始:
從頂部看，其中的變化包括:
現在讓我們看看代碼。
值得調用的第一個塊是data字段集。有些映射到表單字段，有些映射到結果、狀態消息等等。searchProducts方法處理的內容與jQuery版本大致相同，但通常直接綁定到DOM的代碼要少得多。例如，即使我們知道結果是以一個無序列表列出的，但代碼本身并不關心這一點。它只是進行賦值，標記才處理呈現值?？偟膩碚f，與jQuery代碼相比，JavaScript代碼更關心邏輯，jQuery代碼“感覺”是更好的分離了關注點。
和以前一樣，這里有一個CodePen可以讓你自己試試:
#jQuery將死! Vue萬歲!
好吧，這有點過分了。正如我在開始時所說的，如果你喜歡使用jQuery并且它對你有用的話，那我覺得你完全沒必要更改任何東西。
不過，我想說的是，對于習慣使用jQuery的人來說，Vue似乎是一個很好的“下一步”。Vue支持復雜的應用程序，并為搭建和構建項目提供了一個非常棒的命令行工具。但是對于更簡單的任務來說，Vue是一個很棒的“現代jQuery”的替代品，它已經成為我開發的可選工具!
有關使用Vue替代jQuery的另一個觀點，請查看Sarah Drasner的“使用Vue.js替換jQuery:無需構建步驟”，因為它包含了其他一些超級有用的例子。
英文原文：https://css-tricks.com/making-the-move-from-jquery-to-vue/
譯者：浣熊君( ????? )
前面一篇文章：「高頻面試題」瀏覽器從輸入url到頁面展示中間發生了什么 中，我們有對瀏覽器的渲染流程做了一個概括性的介紹，今天這篇文章我們將深入學習這部分內容。
對于很多前端開發來說，平常做工主要專注于業務開發，對瀏覽器的渲染階段可能不是很了解。實際上這個階段很重要，了解瀏覽器的渲染過程，能讓我們知道我們寫的HTML、CSS、JS代碼是如何被解析，并最終渲染成一個頁面的，在頁面性能優化的時候有相應的解決思路。
我們先來看一個問題：
HTML、CSS、JS文件在瀏覽器中是如何轉化成頁面的？
如果你回答不上來，那就往下看吧。
按照渲染的時間順序，渲染過程可以分為下面幾個子階段：構建DOM樹、樣式計算、布局階段、分層、柵格化和合成顯示。
下面詳細看下每個階段都做了哪些事情。
HTML文檔描述一個頁面的結構，但是瀏覽器無法直接理解和使用HTML，所以需要通過HTML解析器將HTML轉換成瀏覽器能夠理解的結構——DOM樹。
HTML文檔中所有內容皆為節點，各節點之間有層級關系，彼此相連，構成DOM樹。
構建過程：讀取HTML文檔的字節(Bytes)，將字節轉換成字符(Chars)，依據字符確定標簽(Tokens)，將標簽轉換成節點(Nodes)，以節點為基準構建DOM樹。參考下圖：
打開Chrome的開發者工具，在控制臺輸入 document 后回車，就能看到一個完整的DOM樹結構，如下圖所示：
在控制臺打印出來的DOM結構和HTML內容幾乎一樣，但和HTML不同的是，DOM是保存在內存中的樹狀結構，可以通過JavaScript來查詢或修改其內容。
樣式計算這個階段，是為了計算出DOM節點中每個元素的表現樣式。
CSS樣式可以通過下面三種方式引入：
和HTML一樣，瀏覽器無法直接理解純文本的CSS樣式，需要通過CSS解析器將CSS解析成 styleSheets 結構，也就是我們常說的 CSSOM樹。
styleSheets結構同樣具備查詢和修改功能：
document.styleSheets屬性值標準化看字面意思有點不好理解，我們通過下面一個例子來看看什么是屬性值標準化：
在寫CSS樣式的時候，我們在設置color屬性值的時候，經常會用white、red等，但是這種值瀏覽器的渲染引擎不容易理解，所以需要將所有值轉換成渲染引擎容易理解的、標準化的計算值，這個過程就是屬性值標準化。
white標準化后的值為 rgb(255, 255, 255)
完成樣式的屬性值標準化后，就需要計算每個節點的樣式屬性，這個階段CSS有兩個規則我們需要清楚：
樣式計算階段是為了計算出DOM節點中每個元素的具體樣式，在計算過程中需要遵守CSS的繼承和層疊兩個規則。
該階段最終輸出的內容是每個DOM節點的樣式，并被保存在 ComputedStyle 的結構中。
經過上面的兩個步驟，我們已經拿到了DOM樹和DOM樹中元素的樣式，接下來需要計算DOM樹中可見元素的幾何位置，這個計算過程就是布局。
在DOM樹中包含了一些不可見的元素，例如 head 標簽，設置了 display:none 屬性的元素，所以我們需要額外構建一棵只包含可見元素的布局樹。
構建過程：從DOM樹的根節點開始遍歷，將所有可見的節點加到布局樹中，忽略不可見的節點。
到這里我們就有了一棵構建好的布局樹，就可以開始計算布局樹節點的坐標位置了。從根節點開始遍歷，結合上面計算得到的樣式，確定每個節點對象在頁面上的具體大小和位置，將這些信息保存在布局樹中。
布局階段的輸出是一個盒子模型，它會精確地捕獲每個元素在屏幕內的確切位置與大小。
現在我們已經有了布局樹，也知道了每個元素的具體位置信息，但是還不能開始繪制頁面，因為頁面中會有像3D變換、頁面滾動、或者用 z-index 進行z軸排序等復雜效果，為了更方便實現這些效果，渲染引擎還需要為特定的節點生成專用的圖層，并生成一棵對應的圖層樹(LayerTree)。
在Chrome瀏覽器中，我們可以打開開發者工具，選擇 Elements-Layers 標簽，就可以看到頁面的分層情況，如下圖所示：
瀏覽器的頁面實際上被分成了很多圖層，這些圖層疊加后合成了最終的頁面。
到這里，我們構建了兩棵樹：布局樹和圖層樹。下面我們來看下這兩棵樹之間的關系：
正常情況下，并不是布局樹的每個節點都包含一個圖層，如果一個節點沒有對應的圖層，那么這個節點就從屬于父節點的圖層。
那節點要滿足什么條件才會被提升為一個單獨的圖層？只要滿足下面其中一個條件即可：
構建好圖層樹之后，渲染引擎就會對圖層樹中的每個圖層進行繪制。
渲染引擎實現圖層繪制，會把一個圖層的繪制拆分成很多小的繪制指令，然后將這些指令按照順序組成一個繪制列表。
繪制一個圖層時會生成一個繪制列表，這只是用來記錄繪制順序和繪制指令的列表，實際上繪制操作是由渲染引擎中的合成線程來完成的。
通過下圖來看下渲染主線程和合成線程之間的關系：
當圖層的繪制列表準備好后，主線程會把該繪制列表提交給合成線程，合成線程開始工作。
首先合成線程會將圖層劃分為圖塊(tile)，圖塊大小通常是 256256 或者 512512。
然后合成線程會按照視口附近的圖塊來優先生成位圖，實際生成位圖的操作是由柵格化來執行的。所謂柵格化，是指將圖塊轉換為位圖。而圖塊是柵格化執行的最小單位。渲染進程維護了一個柵格化的線程池，所有的圖塊柵格化都是在線程池內執行的，運行方式如下圖所示：
一旦所有圖塊都被光柵化，合成線程就會生成一個繪制圖塊的命令——“DrawQuad”，然后將該命令提交給瀏覽器進程。
瀏覽器進程里面有一個名字叫做 viz 的組件，用來接收合成線程發過來的 DrawQuad 命令，然后根據命令執行。 DrawQuad 命令，將其頁面內容繪制到內存中，最后再將內存顯示在屏幕上。
多年開發老碼農福利贈送：網頁制作，網站開發，web前端開發，從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Vue、React、Ajax，node，angular框架等到移動端小程序項目實戰【視頻＋工具＋電子書＋系統路線圖】都有整理，需要的伙伴可以私信我，發送“前端”等3秒后就可以獲取領取地址，送給每一位對編程感興趣的小伙伴
一個完整的渲染流程可以總結如下：
渲染過程中還有兩個我們經常聽到的概念：重排和重繪。在這篇文章中就不細說了，下一篇文章再詳細介紹。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
