vue今日總結

2022-04-28 02:06:08 字數 3119 閱讀 9738

'''

複習'''

"""

1、vue框架的優勢

中文api

資料的雙向繫結 - 變數全域性通用

資料驅動 - 只用考慮資料,不需要在意dom結構

虛擬dom - 快取機制

2、vue如何在頁面中引入

1)通過script標籤引入vue.js環境

2)建立vue例項

3)通過el進行掛載

new vue()

3、插值表示式

} }4、文字指令

} | v-text | v-html | v-once

5、方法指令

v-on:事件="變數" | @事件="變數" | @事件="變數()" | @事件="變數($event, ...)"

@click='btnclick'

btnclick(ev) {}

@click='btnclick(1, 2, $event)'

btnclick(n1, n2, ev) {}

btnclick(...args) {}

6、屬性指令

v-bind:屬性="變數" | :屬性="變數"

:title="t1"

:class="c1" | :class="[c1, c2]" | :class=""

:style="s1" | :style=""

s1是字典變數,c1和f1變數分別控制字型顏色和大小

7、js補充

function可以作為類,內部會有this

箭頭函式內部沒有this

{}裡面出現的函式稱之為方法: 方法名(){}

function fn(name)

let f1 = new fn('bob')

let f2 = ()=>{}

}"""

總結內容

"""

1、表單指令:

v-model="變數" 變數與value有關

普通:變數就代表value值

單選框:變數為多個單選框中的某乙個value值

單一核取方塊:變數為布林,代表是否選中

多核取方塊:變數為陣列,存放選中的選項value

2、條件指令:

v-show: display:none

v-if: 不渲染

v-if | v-else-if | v-else

3、迴圈指令:

v-for="(v, i) in str|arr"

v-for="(v, k, i) in dic"

4、sessionstorage | localstorage

5、分隔符:delimiters: ['}'],

6、過濾器: }

filters: ,

f2(f1的res) ,

}7、計算屬性:

computed:

}8、監聽屬性:

watch: }

9、氣泡排序:

for (let i=0; istus[j + 1]引數) }}

"""

v-show="布林變數" 隱藏時,採用display:none進行渲染

v-if="布林變數" 隱藏時,不再頁面中渲染(保證不渲染的資料洩露)

-----------------------------

v-if | v-else-if | v-else

-->

紅藍綠

v-for="ele in string|array|obj"

-->

}} }:}

}}:}

}} - }:}

| }:}

總結: 1、在filters成員中定義過濾器方法

2、可以對多個值進行過濾,過濾時還可以額外傳入輔助引數

3、過濾的結果可以再進行下一次過濾(過濾的串聯)

-->

}}

'''

1、按照上方 知識點總結 模組,總結今天所學知識點;

2、先有一下成績單資料

scores = [,,

,,,]

用table**標籤渲染以上資料,**第一列是學生總分排名,最後一列是學生總分;

3、還是採用上方相同的資料,採用相同的渲染規則,只渲染所有科目都及格了的學生。

'''

姓名數學

語文英語

總分

}}

姓名數學

語文英語

總分

=60&&score.chinese>=60&&score.english>=60">

}}

'''

1、還是採用上方相同的資料,新增篩選規則:

i)有三個按鈕:語文、數學、外語,點選誰誰高亮,且當前篩選規則採用哪門學科

ii)兩個輸入框,【】~【】,前面天最小分數,後面填最大分數,全部設定完畢後,**的資料會被更新只渲染滿足所有條件的結果

舉例:點選語文,輸入~,那就只會渲染jerry和ben兩條資料

'''

語文英語

~

排名姓名

數學語文

英語總分

=min && score.math<=max || (!min || !max)">

}}

=min && score.chinese<=max || (!min || !max)">

}}

=min && score.english<=max || (!min || !max)">

}} }}

今日課程總結

動感英語第八集筆記 詞彙 actor 演員 actress 女演員 star 主演員 句子 短語 pass 1,pass give pass st to sb pass sb st could you pass me that joe is tirsty,pass him a drink.2,pas...

Arduino 今日總結

char word void setup void loop 選擇串列埠監視器的波特率為9600bps,在傳送框裡填上字母a,點send傳送,下面的顯示框裡就會顯示返回的資料,如果傳送的是字母a,則顯示字串,否則無返回。配置串列埠通訊資料位 校驗位 停止位 通常我們使用serial.begin sp...

今日知識總結

語法 border border width border style border color 常用屬性 none 沒有邊框即忽略所有邊框的寬度 預設值 solid 邊框為單實線 最為常用的 dashed 邊框為虛線 dotted 邊框為點線 double 邊框為雙實線 綜合寫法 border s...