vue 起步小白學習筆記

2021-09-23 14:34:00 字數 1506 閱讀 9191

1.安裝vue-cli

cnpm install --global vue-cli

2.初始化專案

vue init webpack my-project

3.進入專案

cd my-project

4.安裝依賴

npm install

5.啟動專案

npm run dev

index.html:專案根檢視

.postcssrc.js:postcss配置檔案

static:靜態檔案目錄

vue元件:

包含三個部分

template:檢視

script:邏輯

style:樣式

mustache:模板

表現形式:}

} }}}

}vue基本指令:

v-html:渲染文字

v-text:渲染文字

v-bind:繫結

v-bind的簡寫:(:)

條件渲染:

v-if

v-else

v-else-if

v-show

問題:v-if與v-show有什麼區別?

v-if 是「真正」的條件渲染,因為它會確保在切換過程中條件塊內的事件***和子元件適當地被銷毀和重建。

v-if 也是惰性的:如果在初始渲染時條件為假,則什麼也不做——直到條件第一次變為真時,才會開始渲染條件塊。

相比之下,v-show 就簡單得多——不管初始條件是什麼,元素總是會被渲染,並且只是簡單地基於 css 進行切換。

一般來說,v-if 有更高的切換開銷,而 v-show 有更高的初始渲染開銷。因此,如果需要非常頻繁地切換,則使用 v-show 較好;如果在執行時條件很少改變,則使用 v-if 較好。

列表渲染:

v-for

每個列表都要新增key

事件監聽:

v-on:

methods:

事件引數

修飾符簡寫方法:@代替v-on

陣列更新檢測:

變異方法:引起檢視更新

替換陣列:不會引起檢視更新

顯示過濾/排序結果:

filter

計算屬性和觀察者

computed

計算屬性和methods區別

我們可以將同一函式定義為乙個方法而不是乙個計算屬性。兩種方式的最終結果確實是完全相同的。然而,不同的是計算屬性是基於它們的依賴進行快取的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這就意味著只要 message 還沒有發生改變,多次訪問 reversedmessage 計算屬性會立即返回之前的計算結果,而不必再次執行函式。

表單輸入繫結

v-model:雙向資料繫結

修飾符:lazy、trim、number

class 與 style 繫結

繫結 html class

陣列語法

vue學習起步 了解下

有這麼一句話,vue是漸進式框架。抽取 漸進式框架 和 自底向上增量開發的設計 這兩個概念是什麼?中的解釋 漸進式代表的含義是 主張 主張指使用時的硬性要求 最少。來個對比就知道什麼叫主張最少 比如說,angular,它兩個版本都是強主張的,如果你用它,必須接受以下東西 在生活中含義是為了保證各施工...

vue小白學習筆記0 購物車

第乙個實戰 寫乙個購物車例項 為了從零開始學習,vue.js檔案是用引入的。用兩個v for實現兩個商品組 htmlv cloak v if list.length type checkbox name id checked checkedall click checkall th 序號th 商品名...

學習筆記 Golang起步之HelloWord

進入官網 以mac終端為 zsh為例,輸入下面命令 vi zshrc在最後追加下面 users quaint study golang study 為你的golang 工作空間,該空間下應該包含3個資料夾 src pkg bin root 為go安裝目錄 path 為go工作空間 export go...