Vue learning 入門 第一彈

2021-10-02 07:28:43 字數 3765 閱讀 3379

個人部落格:

src=

"">

script

>

>

}div>

newvue(}

)<

/script>

條件判斷式,根據表示式的真偽進行頁面處理

v-if

="seen"

>

2017最新發賣div

>

處理陣列迴圈,將資料迴圈顯示到頁面時
>

>

遊戲列表h3

>

v-if

="seen"

>

2017最新發賣div

>

>

v-for

="game in games"

>

} / }元li

>

ol>

div>

>

newvue(,

,],}

})script

>

為頁面輸入框進行資料繫結(繫結乙個模型乙個變數,讓變數自動反應使用者輸入的內容),例如:
input

select

textarea

components(元件)

>

>

你最喜歡的遊戲是:}p

>

div>

>

newvue(}

)script

>

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-rpcddr1l-1579448851147)(d:\desktop\繫結.png)]]1

v-on

為頁面元素繫結各種事件:keydown, keyup, click, dbclick, load, etd

>

>

你最喜歡的遊戲是:}p

>

我的世界button

>

勇者鬥惡龍button

>

塞爾達傳說button

>

魔界戰記button

>

div>

>

newvue(,

methods:},

})script

>

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-jhfdd0kq-1579448851150)(d:\desktop\按鈕事件.png)]]2

component

定義頁面的區域性區域塊,完成單獨的頁面小功能。示例:

>

>

v-for

="item in games"

v-bind:game

="item"

>

game-item

>

ol>

div>

>

/*元件定義:game-item 定義了乙個html標籤,拓展了標準的html語言 */

vue.

component

('game-item',}'

});new

vue(,,

],},

})script

>

標籤中穿了乙個 props: [『game』]屬性,v-bind:game繫結上game屬性

game-item標籤還被定義了乙個模板,這個非標準的html標籤在網頁渲染時應該渲染成模板中所顯示的內容(template裡面的內容)即:

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-zxcr8iug-1579448851152)(d:\desktop\元件.png)]]3

filters

格式化變數內容的輸出。(日期格式化,字母大小寫,數字再計算等)

>

>

}p>

>

}p>

>

>

現在的vue.js學習進度是} (})p

>

div>

>

newvue(,

filters:

, topercenter:

function

(value)},

})script

>

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-epvtzc7p-1579448851154)(d:\desktop\filters.png)]]4

computed

處理元資料(從資料庫中取出的資料),便於進行二次利用(比如:消費稅自動計算功能)

>

原**:}含稅價:}折合人民幣}

div>

>

newvue(,

computed:

, pricechinarmb:

function()

},})

script

>

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-nlwvwk8p-1579448851155)(d:\desktop\計算屬性.png)]]5

$watch

與computed屬性類似,用於觀察變數的變化。然後進行相應的處理。

>

原**:}含稅價:}折合人民幣}

>

加價1000button

>

div>

>

newvue(,

watch:,}

, methods:,}

,});

script

>

與計算屬性區分:計算屬性中priceintax、pricechinarmb是與methods類似的兩個個方法,而在觀察屬性中作為整個vue例項中的兩個成員的乙個屬性(在計算屬性作為計算屬性,在watch的實現方式裡需定義成data的屬性)

實現:

watch: ,
watch盯住price變數,當price發生變化時呼叫函式:變數名price需與屬性名一致

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-skvo9cpg-1579448851156)(d:\desktop\觀察屬性前.png)]]6

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-3spwahdh-1579448851157)(d:\desktop\觀察屬性加價後.png)]]7

注意到,初始化的時候,含稅價與人民幣都為0,在進行一次加價後,含稅價與人民幣才變化,與**實現邏輯一致,要解決含稅價與人民幣初始**為:在例項化完物件後再進行賦值操作

>

newvue(,

watch:,}

, methods:,}

,});

2998

;script

>

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-bg9iu1dc-1579448851158)(d:\desktop\觀察屬性更改後.png)]]8

Linux入門第一講

linux最大的特點 開放原始碼 由於原始碼的開放,linux開發是世界性的,大佬們更改完linux的bug再傳到網上 世界上最優秀的程式設計師開發出來的 為什麼大佬們喜歡用linux系統?因為大佬們的水平比較高,它們更多的是面向檔案,面向系統,另外圖形介面的控制,速度和其他的一些配置都比字元介面要...

Cmake入門第一課

2011 01 07 14 38 17 分類 cmake 標籤 cmake 字型大小 訂閱 本節介紹cmake裡最常用的三個命令,分別是cmake minimum required project add executable等。cmake是個好東西,在使用vtk,itk,igstk,opencv,...

Python入門第一課

程式設計的本質是什麼?改變記憶體的狀態 1.python是強型別語言,python變數的定義是不需要指定資料型別的 注意 宣告變數時 要注意 變數名不能和python本身自帶的方法名一致,否則會覆蓋掉python自帶的方法 導致專案出錯 具體檢視幫助文件 如 python的基本資料型別 counte...