五分鐘帶你玩轉vue(一)簡介與指令

2021-10-01 19:50:28 字數 2107 閱讀 2893

main.js為主入口

import vue from 'vue'

import router from './router'

vue.config.productiontip = false

/* eslint-disable no-new */

new vue()

}與v-html

}}

v-bind就是用於繫結資料和元素屬性的

}  

class的繫結方式

aaa

1?true:false,test:true }" >bbb

ccc1},'test']" >ddd

eee

method和computed區別:

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

函式執行需要 資料屬性裡面的 message 值作為引數。

● 如果使用 methods 執行函式,vue 每次都要重新執行一次函式,不管msg的值是否有變化;

● 如果使用computed 執行函式,只有當msg這個最初的資料發生變化時,函式才會被執行。(依賴-監測資料變化) 

}

}

v-if,v-else

1111

2222

v-show

v-if:每次都會重新刪除或建立元素,具有較高的切換效能消耗;

v-show:每次切換元素的 display:none 樣式,具有較高的初始渲染消耗。

v-show只編譯一次,後面其實就是控制css,而v-if不停的銷毀和建立,故v-show效能更好一點。

1111

v-for

filter()concat()slice()不發生更新

按鈕

v-on

按鈕

}按鈕2

}按鈕3

按鈕4

......

輸入框

.enter

.tab

.delete (捕獲「刪除」和「退格」鍵)

.esc

.space

.up.down

.left

.right

.ctrl

.alt

.shift

.meta

等 請參考文件

雙向資料繫結

message is: }

按鈕

.lazy

在預設情況下,v-model 在每次 input 事件觸發後將輸入框的值與資料進行同步 (除了上述輸入法組合文字時)。你可以新增 lazy 修飾符,從而轉變為使用 change 事件進行同步:

.number

如果想自動將使用者的輸入值轉為數值型別,可以給 v-model 新增 number 修飾符:

這通常很有用,因為即使在 type="number" 時,html 輸入元素的值也總會返回字串。如果這個值無法被 parsefloat() 解析,則會返回原始的值。

.trim

如果要自動過濾使用者輸入的首尾空白字元,可以給 v-model 新增 trim 修飾符:

五分鐘帶你玩轉rocketMQ(五)實戰廣播與集群

1.集群消費方式 乙個consumergroup中的consumer例項平均分攤消費生產者傳送的訊息。例如某個topic有九條訊息,其中乙個consumer group有三個例項 可能是3個程序,或者3臺機器 那麼每個例項只消費其中的3條訊息,consumer不指定消費方式的話預設是集群消費的,適用...

五分鐘帶你玩轉mybatis(二)常用標籤

open 以什麼開始 close 以什麼結束 separator 分隔符 collection list名稱 item index名稱 引用sql標籤 typename sort 在set時候省略最後乙個符號 code itemname criteria prefix 字首覆蓋並增加其內容 suff...

五分鐘玩轉git

許多人認為git太混亂,或認為它是一種複雜的版本控制系統,其實不然,這篇文章有助於大家快速上手使用git。使用git前,需要先建立乙個倉庫 repository 您可以使用乙個已經存在的目錄作為git倉庫或建立乙個空目錄。使用您當前目錄作為git倉庫,我們只需使它初始化。git init使用我們指定...