二十七 python學習之前端 十 Vue入門

2021-08-28 23:04:33 字數 1860 閱讀 6648

##1. vue.js的概述:

每個 vue 應用都是通過例項化乙個新的 vue物件開始的:

}: mustache語法; 鬍子語法! -->

其中,el屬性對應乙個標籤,當vue物件建立後,這個標籤內的區域就被vue物件接管,在這個區域內就可以使用vue物件中定義的屬性和方法。

當乙個 vue 例項被建立時,它向 vue 的響應式系統中加入了其data物件中能找到的所有的屬性。當這些屬性的值發生改變時,檢視將會產生「響應」,即匹配更新為新的值。還可以在vue例項中定義方法,通過方法來改變例項中data物件中的資料,資料改變了,檢視中的資料也改變。

vue的鬍子語法中,放入的是js程式(變數/短語句): }

}性別: }

屬性繫結簡寫

vue事件繫結

不執行函式

vue事件繫結

使用v-bind指令來設定元素的class屬性,它們的屬性值可以是表示式,vue.js在這一塊做了增強,表示式結果除了是字串之外,還可以是物件或者陣列。

物件值語法:

陣列值語法:

案例:vue實現選項卡功能:

**:

class屬性單個值傳遞

class屬性值傳遞物件:方法1

class屬性值傳遞物件:方法2

class屬性值傳遞陣列值:方法1

class屬性值傳遞陣列值:方法2

**:

按鈕一對應的內容

按鈕二對應的內容

按鈕三對應的內容

按鈕四對應的內容

按鈕五對應的內容

放陣列:

**:

放物件1

放物件2

放陣列

通過條件指令可以控制元素的建立(顯示)或者銷毀(隱藏),常用的條件指令如下:

1.v-if語句,是true就顯示,否則隱藏

2.1.v-if v-else語句,二選一(1)

2.2.v-if v-else語句,二選一(2)

3.1 v-if v-else-if v-else多選一(一)

3.2 v-if v-else-if v-else多選一(二)

3.3 v-if v-else-if v-else多選一(三)

3.4 v-if v-else-if v-else多選一(四)

show

v-for的功能:生成多個標籤

...

表單屬性,vue用v-model設定乙個變數,和表單屬性時時同步。

表單屬性的值(value/checked/selected):都會同步到v-model的變數值裡面去。

**:

...

input中的值是:}

性別: 女

男單選按鈕的值是:}

多選按鈕: 琴棋書

畫多選框的值:}

北京上海廣州

深圳 下拉列表的值:}

**:

}說:}

a說:b說:

實現效果:

實現效果:

二十七 javaWeb前端除錯

前端除錯有三種方法 1 通過alert 方法 在前端文字js 塊適當位置填寫alert 變數名 執行程式便可以在瀏覽器中檢視結果 2 通過console.log 方法 在前端文字js 塊適當位置填寫console.log 變數名 執行程式便可以在瀏覽器 開發者模式 source console控制台...

OpenGL學習二十七 混合

混合步驟 1.設定混合模式 2.啟用混合 glcolor4f 1.0f,1.0f,1.0f,0.5f 全亮度,50 alpha 混合 glblendfunc gl src alpha,gl one 基於源象素alpha通道值的半透明混合函式 glenable gl blend 開啟混合 opengl...

十月二十七日

想想兩年前的自己 每天只忙於玩樂,安于享福,想想此時此刻的自己,每天奔波於全站和稜鏡之間,為了未來的生活努力奮鬥,努力做好每一件事,只是因為年輕,只是因為我還有未來。想想曾經陪在自己身邊每天說說笑笑,打打鬧鬧的朋友,在看看現在每天陪在自己身邊陪自己吃飯 開心的朋友,一切都變了,不知是什麼讓我們從熟悉...