vue初步介紹

2021-09-23 09:39:18 字數 1967 閱讀 2905

vue.js(讀音類似於view) 是一套構建使用者介面的漸進式框架。與其他重量級框架不同的是,vue 採用自底向上增量開發的設計。vue 的核心庫只關注檢視層,它不僅易於上手,還便於與第三方庫或既有專案整合。另一方面,當與單檔案元件和 vue 生態系統支援的庫結合使用時,vue 也完全能夠為複雜的單頁應用程式提供驅動

vue.js 的核心是乙個允許採用簡潔的模板語法來宣告式的將資料渲染進 dom:

現在資料和 dom 已經被繫結在一起,所有的元素都是響應式的

除了文字插值,我們還可以採用這樣的方式繫結 dom 元素屬性:

滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊!

這裡我們遇到點新東西。你看到的 v-bind 屬性被稱為指令。指令帶有字首 v-,以表示它們是 vue 提供的特殊屬性。可能你已經猜到了,它們會在渲染的 dom 上應用特殊的響應式行為。簡言之,這裡該指令的作用是:「將這個元素節點的 title 屬性和 vue 例項的 message 屬性保持一致」

控制切換乙個元素的顯示也相當簡單:

滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊!

現在你看到我了

這個例子演示了我們不僅可以繫結 dom 文字到資料,也可以繫結 dom 結構到資料。而且,vue 也提供乙個強大的過渡效果系統,可以在 vue 插入/更新/刪除元素時自動應用過渡效果

還有其它很多指令,每個都有特殊的功能。例如,v-for 指令可以繫結陣列的資料來渲染乙個專案列表:

滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊!

現在你看到我了

}為了讓使用者和你的應用進行互動,我們可以用 v-on 指令繫結乙個事件***,通過它呼叫我們 vue 例項中定義的方法:

滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊!

現在你看到我了

} 逆轉訊息

注意在 reversemessage 方法中,我們更新了應用的狀態,但沒有觸碰 dom —— 所有的 dom 操作都由 vue 來處理,我們編寫**只需要關注底層邏輯

vue 還提供了 v-model 指令,它能輕鬆實現表單輸入和應用狀態之間的雙向繫結

滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊!

現在你看到我了

} 逆轉訊息

元件系統是 vue 的另乙個重要概念,因為它是一種抽象,允許我們使用小型、自包含和通常可復用的元件構建大型應用。仔細想想,幾乎任意型別的應用介面都可以抽象為乙個元件樹:

在 vue 裡,乙個元件本質上是乙個擁有預定義選項的 vue 例項,在 vue 中註冊元件很簡單:

vue.component('todo-item', )
現在你可以用它構建另乙個元件模板:

但是這樣會為每個待辦項渲染同樣的文字,這看起來並不炫酷,我們應該能將資料從父作用域傳到子元件。讓我們來修改一下元件的定義,使之能夠接受乙個屬性:

滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊!

現在你看到我了

} 逆轉訊息

這只是乙個假設的例子,但是我們已經設法將應用分割成了兩個更小的單元,子單元通過 props 介面實現了與父單元很好的解耦。我們現在可以進一步為我們的 todo-item 元件實現更複雜的模板和邏輯的改進,而不會影響到父單元

在乙個大型應用中,有必要將整個應用程式劃分為元件,以使開發可管理。在後續教程中我們將詳述元件,不過這裡有乙個(假想的)使用了元件的應用模板是什麼樣的例子:

vue 元件非常類似於自定義元素——它是 web 元件規範的一部分,這是因為 vue 的元件語法部分參考了該規範。例如 vue 元件實現了 slot api 與 is 特性。但是,還是有幾個關鍵差別:

1.web 元件規範仍然處於草案階段,並且尚無瀏覽器原生實現。相比之下,vue 元件不需要任何補丁,並且在所有支援的瀏覽器(ie9 及更高版本)之下表現一致。必要時,vue 元件也可以包裝於原生自定義元素之內。

2.vue 元件提供了純自定義元素所不具備的一些重要功能,最突出的是跨元件資料流,自定義事件通訊以及構建工具整合。

vue初步介紹

摘要 vue.js 讀音類似於view 是一套構建使用者介面的漸進式框架。與其他重量級框架不同的是,vue 採用自底向上增量開發的設計。vue 的核心庫只關注檢視層,它不僅易於上手,還便於與第三方庫或既有專案整合。vue.js 讀音類似於view 是一套構建使用者介面的漸進式框架。與其他重量級框架不...

初步使用VUE

基於個人的理解 vue是乙個前端框架,最基本的用途就是新增在html元素中特定的指令,把dom元素的屬性和js中的資料繫結,這樣省略了很多js與介面顯示的資料互動 例如 就關聯了vue中的資料hasprevpage和方法toprev vue會檢測資料的變動,並且週期性的把變動反映在頁面上。最簡單的使...

HTTPS 初步介紹

非對稱加密 基於數學方法,生成乙個公鑰 金鑰對,來對資料做加密 解密,被公鑰加密的資料只能被私鑰解密,同樣,被私鑰加密的資料也只能被公鑰解密。所以可以用別人公開的公鑰加密一段資訊然後傳送出去,只有擁有對應金鑰的那個人才能解密。但是缺點是加密 解密的計算成本高,比較占用cpu資源 對稱加密 和非對稱加...