首頁 web前端 前端問答 vuejs是API嗎

vuejs是API嗎

Sep 27, 2021 pm 07:15 PM
api vuejs

vuejs不是API。 vuejs是一套用於建立使用者介面的漸進式JavaScript框架,旨在更好地組織與簡化Web開發。而API是指應用程式介面,是一些預先定義的函數,目的是提供應用程式與開發人員基於某軟體或硬體得以存取一組例程的能力。

vuejs是API嗎

本教學操作環境:windows7系統、vue2.9.6版,DELL G3電腦。

vuejs不是API。

Vue (讀音 /vjuː/,類似 view) 是一套用於建立使用者介面的漸進式JavaScript框架,旨在更好地組織與簡化Web開發。與其它大型框架不同的是,Vue 被設計為可以自底向上逐層應用。

Vue 的核心函式庫只專注於視圖層,不僅易於上手,也方便與第三方函式庫或既有專案整合。另一方面,當與現代化的工具鏈以及各種支援類別庫結合使用時,Vue 也完全能夠為複雜的單頁應用(SPA)提供驅動。

Vue.js 還提供了MVVM 資料綁定和一個可組合的元件系統,具有簡單、靈活的API,其目標是透過盡可能簡單的API 實現響應式的資料綁定和可組合的視圖組件。

API(Application Programming Interface,應用程式介面)是一些預先定義的函數,目的是提供應用程式與開發人員基於某軟體或硬體得以存取一組例程的能力,而又無需存取原始碼,或理解內部工作機制的細節。

vuejs中的一些API

#vm指new Vue取得的實例

(1)當dom標籤裡的值和data裡的值綁定後,更改data對應的值可以即時更新標籤裡的值;

但後續新增的值是無效的(綁定失敗)。

(2)將可以將物件直接作為data的一個屬性,是有效的(因為物件按值傳遞);

所以該屬性和該物件是全等的;

(3)vm的介面有:

vm.$data是vm的data屬性;

vm.$el是el屬性所指向的dom結點;

vm.$watch是監視屬性變化(例如data裡的值)(參考(九))

(4)vue實例的宣告週期,有幾個關鍵函數:

created:事件綁定結束後,函數直接在宣告vue實例的時候,作為vue實例中的一個屬性,下同。

vm.$mount:掛載dom結點;

beforeCompile:載入範本之前;

compiled:載入範本之後;

ready:完成之後(我猜的);

beforeDestroy:摧毀之前;

destroyed:摧毀之後;

(5)vm.$mount(掛載的id或類別名)

在new Vue實例的時候,不加el,則表示不掛載只生成,生成之後,可以透過該方法來手動掛載到某個地方,如果符合條件的有多個,則掛載到第一個地方;

(6)v-for遍歷數組、對象,可以創建多個標籤;例如用於創建表格;

(7)轉義: {{}} 兩個大括號,不會轉義值的html標籤;

{{{}}}  三個大括號,會將數值的html標籤轉義,也就是變成html文字;

不能在值內再放入綁定資料(除非使用partials,但我還不會);

(8)在插值的大括號內,可以放入表達式(不能放函數);

(9)在插值的大括號內,加入管道符號|,可以使用過濾器;

       capitalize就是將首字母大寫的過濾器;

       過濾器只能放在表達式最後,且無法成為表達式的一部分;

       過濾器可加為參數;

       過濾器可自訂(但目前仍不知道自訂自訂(但目前仍不知道自訂已定義的方法);

(10)指令:

v-if=」變數名稱」           當某值為true時存在;

      名=」變數名稱」             將等號後的變數名稱(指向vm的data屬性中的同名屬性),與該標籤的html屬性綁定在一起。

       v-on:事件類型=」函數名稱」            觸發事件類型時,執行methods裡的函數;

##  : v.冒號);

(11)計算屬性computed

       這裡的屬性,可以當做data屬性裡的使用;優點是data裡的數值變更時,這裡會跟著一起改變;

       可以使用較複雜的表達式(內插只能用簡單的表達式);

(12)計算屬性的setter和getter

###########

預設是getter(物件的get屬性),也就是當某個值改變時,觸發回呼函數(或get方法);

當計算屬性改變時,需要改變某些值(例如改變10個值,在其他地方寫監聽這個值就不好),那麼則需要設定setter(物件的set屬性),也就是當計算屬性改變時,觸發set方法;

(13)監視屬性vm.$watch(被監視的屬性, 回呼函數)

       監視的是data屬性;

回呼函數的第一個參數是改變後的值,第二個參數是改變前的值;

       屬性的值改變時觸發;

(14)class綁定:

       用v-bind:class#  物件形式,key為class類別名,值表示是否顯示這個class類別;

       可以直接將一個object物件放置在v-bind:class的值中,並將這個物件放置在data屬性中,這樣設定這個object物件的屬性即可;

       class的陣列寫法:陣列裡的成員為變數名,如果該變數不是object對象,則變數的值為類別名稱;如果是物件時,物件的key是類別名稱,數值表示是否顯示;

(15)style綁定:

       以v-bind:style

      形式為物件,物件的key是樣式名稱(如fontSize,注意樣式名需要採用駝峰式而不是css式),值是樣式的值;

       可以直接將物件名稱放在v-bind:style的等式右邊;

       物件的數值改變,將即時影響內嵌樣式;

       某些樣式,則可針對瀏覽器加上前綴(但某些無法為所有瀏覽器相容);

#相關推薦:《

vue.js教學

以上是vuejs是API嗎的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆樹的耳語 - 如何解鎖抓鉤
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1665
14
CakePHP 教程
1424
52
Laravel 教程
1322
25
PHP教程
1270
29
C# 教程
1249
24
如何使用Vue實現仿QQ聊天氣泡特效 如何使用Vue實現仿QQ聊天氣泡特效 Sep 20, 2023 pm 02:27 PM

如何使用Vue實現仿QQ聊天氣泡特效在現今的社交時代,聊天功能已成為了手機應用程式和網頁應用程式的核心功能之一。而聊天介面中最常見的元素之一就是聊天氣泡,它可以清楚地將發送者和接收者的訊息區分開來,有效地提高了訊息的可讀性。本文將介紹如何使用Vue實現仿QQ聊天氣泡特效,以及提供具體的程式碼範例。首先,我們需要建立一個Vue元件來表示聊天氣泡。組件包含兩個主要部分

如何在PHP專案中透過呼叫API介面來實現資料的爬取與處理? 如何在PHP專案中透過呼叫API介面來實現資料的爬取與處理? Sep 05, 2023 am 08:41 AM

如何在PHP專案中透過呼叫API介面來實現資料的爬取與處理?一、介紹在PHP專案中,我們經常需要爬取其他網站的數據,並對這些數據進行處理。而許多網站提供了API接口,我們可以透過呼叫這些接口來取得資料。本文將介紹如何使用PHP來呼叫API接口,實現資料的爬取與處理。二、取得API介面的URL和參數在開始之前,我們需要先取得目標API介面的URL以及所需的

Oracle API使用指南:探索資料介面技術 Oracle API使用指南:探索資料介面技術 Mar 07, 2024 am 11:12 AM

Oracle是一家全球知名的資料庫管理系統供應商,其API(ApplicationProgrammingInterface,應用程式介面)是一種強大的工具,可協助開發人員輕鬆地與Oracle資料庫互動和整合。在本文中,我們將深入探討OracleAPI的使用指南,向讀者展示如何在開發過程中利用資料介面技術,同時提供具體的程式碼範例。 1.Oracle

Oracle API整合策略解析:實現系統間無縫通信 Oracle API整合策略解析:實現系統間無縫通信 Mar 07, 2024 pm 10:09 PM

OracleAPI整合策略解析:實現系統間無縫通信,需要具體程式碼範例在當今數位化時代,企業內部系統之間需要相互通信和資料共享,而OracleAPI就是幫助實現系統間無縫通信的重要工具之一。本文將從OracleAPI的基本概念和原則入手,探討API整合的策略,最終給出具體的程式碼範例幫助讀者更好地理解和應用OracleAPI。一、OracleAPI基本

如何使用PHP和Vue.js實現圖表上的資料篩選和排序功能 如何使用PHP和Vue.js實現圖表上的資料篩選和排序功能 Aug 27, 2023 am 11:51 AM

如何使用PHP和Vue.js實現圖表上的資料篩選和排序功能在網頁開發中,圖表是一種非常常見的資料展示方式。使用PHP和Vue.js可以輕鬆實現圖表上的資料篩選和排序功能,使用戶能夠自訂查看圖表上的數據,提高資料的視覺化效果和使用者體驗。首先,我們需要準備一組資料供圖表使用。假設我們有一個資料表格,包含姓名、年齡和成績三列,資料如下:姓名年齡成績張三1890李

React API呼叫指南:如何與後端API互動和資料傳輸 React API呼叫指南:如何與後端API互動和資料傳輸 Sep 26, 2023 am 10:19 AM

ReactAPI呼叫指南:如何與後端API進行互動和資料傳輸概述:在現代的Web開發中,與後端API進行互動和資料傳輸是一個常見的需求。 React作為一個流行的前端框架,提供了一些強大的工具和功能來簡化這個過程。本文將介紹如何使用React來呼叫後端API,包括基本的GET和POST請求,並提供具體的程式碼範例。安裝所需的依賴:首先,確保在專案中安裝了Axi

開發建議:如何利用ThinkPHP框架進行API開發 開發建議:如何利用ThinkPHP框架進行API開發 Nov 22, 2023 pm 05:18 PM

開發建議:如何利用ThinkPHP框架進行API開發隨著網際網路的不斷發展,API(ApplicationProgrammingInterface)的重要性也日益凸顯。 API是不同應用程式之間進行通訊的橋樑,它可以實現資料共享、功能呼叫等操作,為開發者提供了相對簡單且快速的開發方式。而ThinkPHP框架作為一款優秀的PHP開發框架,具有高效能、可擴展且易用

如何處理Laravel API報錯問題 如何處理Laravel API報錯問題 Mar 06, 2024 pm 05:18 PM

標題:如何處理LaravelAPI報錯問題,需要具體程式碼範例在進行Laravel開發時,常會遇到API報錯的情況。這些報錯可​​能來自於程式碼邏輯錯誤、資料庫查詢問題或是外部API請求失敗等多種原因。如何處理這些報錯是一個關鍵的問題,本文將透過具體的程式碼範例來示範如何有效處理LaravelAPI報錯問題。 1.錯誤處理在Laravel

See all articles