成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

遇見(jiàn)Vue.js——第一個(gè)Vue.js程序

wmui / 1123人閱讀

摘要：遇見(jiàn)是什么讀音類(lèi)似于是一套構(gòu)建用戶(hù)界面的漸進(jìn)式框架。是一個(gè)用于創(chuàng)建交互界面的庫(kù)。第一個(gè)程序安裝我們可以在的官網(wǎng)上直接下載并用標(biāo)簽引入。會(huì)被注冊(cè)為一個(gè)全局變量。重要提示在開(kāi)發(fā)時(shí)請(qǐng)用開(kāi)發(fā)版本，遇到常見(jiàn)錯(cuò)誤它會(huì)給出友好的警告。

遇見(jiàn)Vue Vue.js是什么

Vue.js（讀音 /vju?/, 類(lèi)似于 view） 是一套構(gòu)建用戶(hù)界面的 漸進(jìn)式框架。
與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。
Vue 的核心庫(kù)只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。
另一方面，Vue 完全有能力驅(qū)動(dòng)采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)的復(fù)雜單頁(yè)應(yīng)用。

Vue.js 的目標(biāo)

是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。
Vue.js 是一個(gè)用于創(chuàng)建 Web 交互界面的庫(kù)。它讓你通過(guò)簡(jiǎn)單而靈活的 API 創(chuàng)建由數(shù)據(jù)驅(qū)動(dòng)的 UI 組件。

Vue.js的特性

簡(jiǎn)潔：
HTML 模板 + JSON 數(shù)據(jù)，再創(chuàng)建一個(gè) Vue 實(shí)例，就這么簡(jiǎn)單。

數(shù)據(jù)驅(qū)動(dòng)：
自動(dòng)追蹤依賴(lài)的模板表達(dá)式和計(jì)算屬性。

組件化：
用解耦、可復(fù)用的組件來(lái)構(gòu)造界面。

輕量：
~24kb min+gzip，無(wú)依賴(lài)。

快速：
精確有效的異步批量 DOM 更新。

模塊友好：
通過(guò) NPM 或 Bower 安裝，無(wú)縫融入你的工作流。

第一個(gè)Vue.js程序 安裝

我們可以在 Vue.js 的官網(wǎng)上直接下載 vue.min.js 并用 

預(yù)覽：https://91jack.github.io/Vue-...

頁(yè)面輸出：

第一個(gè)Hello Vue代碼詳解 
1.將vue.js文件引入到當(dāng)前頁(yè)面


只要將vue.js文件引入頁(yè)面，在當(dāng)前環(huán)境就會(huì)多出一個(gè)全局變量：Vue

2.通過(guò)全局構(gòu)造函數(shù)：Vue ，實(shí)例化一個(gè)Vue應(yīng)用程序接管的元素（包括所有的子元素）


3.代碼執(zhí)行流程解析


1.瀏覽器從上到下依次進(jìn)行解析


瀏覽器對(duì)于id=app 的div 內(nèi)部的 {{message}}不認(rèn)識(shí)，直接作為普通文本渲染到網(wǎng)頁(yè)上


2.瀏覽器繼續(xù)往后解析執(zhí)行


發(fā)現(xiàn)有一個(gè)js外鏈腳本，發(fā)起請(qǐng)求進(jìn)行下載
當(dāng)當(dāng)前頁(yè)面環(huán)境拿到j(luò)s腳本之后，vue.js就會(huì)執(zhí)行，執(zhí)行結(jié)束，就向全局暴露出了一個(gè)對(duì)象：Vue


3.當(dāng)解析執(zhí)行到咱們自己的Script的時(shí)候，開(kāi)始解析執(zhí)行咱們自己的代碼


通過(guò) el 屬性 指定  Vue程序 的接管范圍
通過(guò) data 向Vue 實(shí)例的應(yīng)用程序中初始化了一個(gè) message 成員
Vue 程序通過(guò) el 屬性指定id為 #app 的div
開(kāi)始解析執(zhí)行 Vue 能識(shí)別的語(yǔ)法
{{message}} 在Vue 中被稱(chēng)為雙花括號(hào)插值表達(dá)式
在雙括號(hào)插值表達(dá)式中可以使用 當(dāng)前元素 所屬Vue程序 接管范圍的data中的數(shù)據(jù)
           
               
                                           
                       
                 

            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/83400.html

               

                      
               
              

              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    小程序的初次遇見(jiàn),使用mpvue搭建模板
    
                                                     
    摘要：最后寫(xiě)一個(gè)公用的樣式就可以使用了。現(xiàn)在我們可以愉快的使用其開(kāi)發(fā)了，如果對(duì)開(kāi)發(fā)比較熟悉的話(huà)，完全遷移過(guò)來(lái)是沒(méi)有問(wèn)題的。

由于公司業(yè)務(wù)需求的需要，在這一周需要開(kāi)發(fā)小程序，加急看了下小程序的文檔，發(fā)現(xiàn)用其原生來(lái)編寫(xiě)程序不是很順手，公司前端用的技術(shù)棧是vue， 詢(xún)問(wèn)了谷哥和度娘發(fā)現(xiàn)大部分推薦了 wepy和 mpvue，對(duì)比了兩個(gè)框架，還是選用了 mpvue, 因?yàn)?mpvue 繼承自 vue....
    
                                                   
                          
    
                                
    
                                    MangoGoing
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    最近遇到的前端面試題(2017.03.08更新版)
    
                                                     
    摘要：通過(guò)管理組件通信通過(guò)驅(qū)動(dòng)視圖比較差異進(jìn)行更新操作作者第七頁(yè)鏈接來(lái)源知乎著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。達(dá)到無(wú)刷新的效果。對(duì)象的狀態(tài)不受外界影響。對(duì)象代表一個(gè)異步操作，有三種狀態(tài)進(jìn)行中已完成，又稱(chēng)和已失敗。

以下問(wèn)題解釋非本人原創(chuàng)，是根據(jù)面試經(jīng)驗(yàn)整理后覺(jué)得更容易理解的解釋版本，歡迎補(bǔ)充。

一. 輸入url后的加載過(guò)程
從輸入 URL 到頁(yè)面加載完成的過(guò)程中都發(fā)生了什么
計(jì)算機(jī)...
    
                                                   
                          
    
                                
    
                                    linkFly
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    最近遇到的前端面試題(2017.03.08更新版)
    
                                                     
    摘要：通過(guò)管理組件通信通過(guò)驅(qū)動(dòng)視圖比較差異進(jìn)行更新操作作者第七頁(yè)鏈接來(lái)源知乎著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。達(dá)到無(wú)刷新的效果。對(duì)象的狀態(tài)不受外界影響。對(duì)象代表一個(gè)異步操作，有三種狀態(tài)進(jìn)行中已完成，又稱(chēng)和已失敗。

以下問(wèn)題解釋非本人原創(chuàng)，是根據(jù)面試經(jīng)驗(yàn)整理后覺(jué)得更容易理解的解釋版本，歡迎補(bǔ)充。

一. 輸入url后的加載過(guò)程
從輸入 URL 到頁(yè)面加載完成的過(guò)程中都發(fā)生了什么
計(jì)算機(jī)...
    
                                                   
                          
    
                                
    
                                    Nosee
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    最近遇到的前端面試題(2017.03.08更新版)
    
                                                     
    摘要：通過(guò)管理組件通信通過(guò)驅(qū)動(dòng)視圖比較差異進(jìn)行更新操作作者第七頁(yè)鏈接來(lái)源知乎著作權(quán)歸作者所有，轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)。達(dá)到無(wú)刷新的效果。對(duì)象的狀態(tài)不受外界影響。對(duì)象代表一個(gè)異步操作，有三種狀態(tài)進(jìn)行中已完成，又稱(chēng)和已失敗。

以下問(wèn)題解釋非本人原創(chuàng)，是根據(jù)面試經(jīng)驗(yàn)整理后覺(jué)得更容易理解的解釋版本，歡迎補(bǔ)充。

一. 輸入url后的加載過(guò)程
從輸入 URL 到頁(yè)面加載完成的過(guò)程中都發(fā)生了什么
計(jì)算機(jī)...
    
                                                   
                          
    
                                
    
                                    劉東
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    看一下從 new Vue()開(kāi)始到頁(yè)面看到真實(shí)dom都經(jīng)歷了什么？
    
                                                     
    摘要：從開(kāi)始看運(yùn)行流程本篇文章不會(huì)具體分析很多每個(gè)方法內(nèi)部具體邏輯，只為了研究一下瀏覽器加載文件后以及我后，都調(diào)用了哪些方法，這些方法都是做什么的等等。

從 new Vue()開(kāi)始看vue運(yùn)行流程
本篇文章不會(huì)具體分析很多每個(gè)方法內(nèi)部具體邏輯，只為了研究一下瀏覽器加載vuejs文件后以及我new Vue后，都調(diào)用了哪些方法，這些方法都是做什么的等等。以便對(duì)vue的執(zhí)行流程有個(gè)大致了解，方便遇...
    
                                                   
                          
    
                                
    
                                    hiyayiji
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評(píng)論

                   
               

              

                

                  
0條評(píng)論
   
                
 
                      

              

           

           
        

      
 
    

    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    












<