成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

遇見Vue.js——第一個Vue.js程序

wmui / 1072人閱讀

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

遇見Vue Vue.js是什么

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

Vue.js 的目標(biāo)

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

Vue.js的特性

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

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

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

輕量：
~24kb min+gzip，無依賴。

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

模塊友好：
通過 NPM 或 Bower 安裝，無縫融入你的工作流。

第一個Vue.js程序 安裝

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

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

頁面輸出：

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


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

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

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

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

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

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

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

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/83400.html

相關(guān)文章

  • 小程序的初次遇見,使用mpvue搭建模板

    摘要：最后寫一個公用的樣式就可以使用了。現(xiàn)在我們可以愉快的使用其開發(fā)了，如果對開發(fā)比較熟悉的話，完全遷移過來是沒有問題的。 由于公司業(yè)務(wù)需求的需要，在這一周需要開發(fā)小程序，加急看了下小程序的文檔，發(fā)現(xiàn)用其原生來編寫程序不是很順手，公司前端用的技術(shù)棧是vue， 詢問了谷哥和度娘發(fā)現(xiàn)大部分推薦了 wepy和 mpvue，對比了兩個框架，還是選用了 mpvue, 因為 mpvue 繼承自 vue....

    MangoGoing 評論0 收藏0

  • 最近遇到的前端面試題(2017.03.08更新版)

    摘要：通過管理組件通信通過驅(qū)動視圖比較差異進(jìn)行更新操作作者第七頁鏈接來源知乎著作權(quán)歸作者所有，轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)。達(dá)到無刷新的效果。對象的狀態(tài)不受外界影響。對象代表一個異步操作，有三種狀態(tài)進(jìn)行中已完成，又稱和已失敗。 以下問題解釋非本人原創(chuàng)，是根據(jù)面試經(jīng)驗整理后覺得更容易理解的解釋版本，歡迎補(bǔ)充。 一. 輸入url后的加載過程 從輸入 URL 到頁面加載完成的過程中都發(fā)生了什么 計算機(jī)...

    linkFly 評論0 收藏0

  • 最近遇到的前端面試題(2017.03.08更新版)

    摘要：通過管理組件通信通過驅(qū)動視圖比較差異進(jìn)行更新操作作者第七頁鏈接來源知乎著作權(quán)歸作者所有，轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)。達(dá)到無刷新的效果。對象的狀態(tài)不受外界影響。對象代表一個異步操作，有三種狀態(tài)進(jìn)行中已完成，又稱和已失敗。 以下問題解釋非本人原創(chuàng)，是根據(jù)面試經(jīng)驗整理后覺得更容易理解的解釋版本，歡迎補(bǔ)充。 一. 輸入url后的加載過程 從輸入 URL 到頁面加載完成的過程中都發(fā)生了什么 計算機(jī)...

    Nosee 評論0 收藏0

  • 最近遇到的前端面試題(2017.03.08更新版)

    摘要：通過管理組件通信通過驅(qū)動視圖比較差異進(jìn)行更新操作作者第七頁鏈接來源知乎著作權(quán)歸作者所有，轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)。達(dá)到無刷新的效果。對象的狀態(tài)不受外界影響。對象代表一個異步操作，有三種狀態(tài)進(jìn)行中已完成，又稱和已失敗。 以下問題解釋非本人原創(chuàng)，是根據(jù)面試經(jīng)驗整理后覺得更容易理解的解釋版本，歡迎補(bǔ)充。 一. 輸入url后的加載過程 從輸入 URL 到頁面加載完成的過程中都發(fā)生了什么 計算機(jī)...

    劉東 評論0 收藏0

  • 看一下從 new Vue()開始到頁面看到真實(shí)dom都經(jīng)歷了什么？

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

    hiyayiji 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<