pug在Vue中的使用 筆記

2021-10-23 08:33:05 字數 1848 閱讀 1149

npm i -d pug pug-html-loader pug-plain-loader
pug :安裝pug

pug-loader pug的loader

pug-cli:pug 編譯工具

pug-filters:pug的過濾器

在vue.config.js 中配置

module.exports = 

}

在vue模板中新增編譯語言pug即可

pug 的中的for迴圈與 vue中的for迴圈都可以用

div

//- 這是注釋,測試pug,for迴圈(1)

div.title 測試pug,for迴圈(1)

ul- let foo = [,,]

each item in foo

lispan.listitem= `名字:$——`

span

= `年齡:$——`

span(style= `$`)= `性別:$`

divli(v-for= '(item,index) in bar') info: }

pug 是一種用縮排和換行區分**塊的語法

div: p 輸入框名字
這種寫法與上面的寫法相同

div 

p 輸入框名字

語法一:

試了下 p 這是一段純潔的!內容 這個語法不能用

p  

| 管道符總是在最開頭,

| 不算前面的縮排

這個語法也只能寫乙個,寫兩個就報錯了

語法二:

語法三:

另外可以在template中使用src屬性引入.pug 檔案,這樣的話可以將pug的**抽離出來了

mydemo.pug檔案

div

//- 這是注釋,測試pug,for迴圈(1)

div.title 測試pug,for迴圈(1)

ul- let foo = [,,]

each item in foo

lispan.listitem= `名字:$——`

span

= `年齡:$——`

span(style= `$`)= `性別:$`

divli(v-for= '(item,index) in bar') info: }

div: p 輸入框名字

div

p 輸入框名字

- var text= '文字'

p= `帶有變數的文字$`

//- .語法可以直接換行

p.

這個是乙個段純潔的文字

//- 這個語法也只能寫乙個,寫兩個就報錯了

div

| 管道符總是在最開頭,

p 不算前面的縮排

| ****df

mixin pet(name)

li= name

ul

+pet('貓貓')

+pet('狗狗')

+pet('笨笨')

this 的使用 筆記

this指標 在類的每乙個成員函式的形參表中都有乙個隱含的指標變數this,該指標變數的型別就是成員函式所屬類的型別 當程式中呼叫類的成員函式時,this指標變數被自動初始化為發出函式呼叫的物件的位址 this的使用 1 區分成員和非成員 2 乙個類的方法需要返回當前物件的引用 qs set int...

C 中的DllImport使用筆記

using system.runtime.interopservices dllimport kernel32 private static extern intgetprivateprofilestring string section,string key,string def,stringbu...

Linq中的Join使用筆記

在進行資料庫操作時,經常會涉及到多表聯合查詢,這時就需要用到join。而連線也分為以下兩種 idgroupname1a 2b3c idusername groupid1王1 11王22 1王34from g in groups join u in users on g.id equals u.gro...