Vue學習筆記

2021-10-21 08:17:42 字數 3870 閱讀 7564

newvue(,

methods:

}<

/script>

給元素繫結事件

"button" value=

"事件繫結" v-on:click=

"doit"

>

"button" value=

"事件繫結" @click=

"doit"

>

newvue(}

});<

/script>

簡寫 用@click=「函式名」

"button" value=

"事件繫結" v-on:click=

"doit(a1,a2)"

>

newvue(}

});<

/script>

根據表達值的真假,切換元素的顯示和隱藏

"isshow"

>

xianshi

<

/p>

"age>18"

>

xianshi

<

/p>

newvue

(...

methods:}}

)<

/script>

根據表示式真假,切換元素的顯示和隱藏(直接操縱dom元素)

與v-show類似,但v-show之操作display屬性,v-if直接會注釋掉該元素

"isshow"

>

xianshi

<

/p>

"age>18"

>

xianshi

<

/p>

newvue

(...

methods:}}

)<

/script>

設定元素的屬性(src, title, class )

簡寫格式可以直接省略v-bind

"imgtitle"

>

:title=

"imgtitle"

>

newvue(}

)<

/script>

還可以更改style

.active

<

/style>

class=""

>

<

/div>

//如果isactive是true,該div類名才為active

//可以設定多個isname控制

"handle"

>改變樣式<

/button>

newvue(,

methods:}}

)<

/script>

根據資料生成列表結構

>

for=

"item in arr"

>

}<

/li>

for=

"(item,index) in arr"

>

}<

/li>

//index是索引

<

/ul>

<

/div>

newvue(}

)<

/script>

獲取和設定表單元素的值(雙向資料繫結)

"text" v-model=

"message" @keyup.enter=

"getm"

>

//摁回車出發

newvue(,

methods:}}

)<

/script>

提供css樣式

[v-cloak]

在插值表示式所在的標籤新增v-cloak指令

sss<

/div>

原理:先通過樣式隱藏內容,然後在記憶體中進行值的替換,替換好之後再顯示出最終的結果

data:

methods:

}

""

>

<

/script>

axios.

get(位址?key=value&key2=values)

.then

(function

(response)

,function

(err));

axios.

post

(位址,).

then

(function

(response)

,function

(err)

)//key是文件規定的

"button" value=

"獲取笑話"

>

}<

/p>

newvue(,

methods:

,function

(err))}

}})<

/script>

//全域性元件

//第乙個引數是元件名字,第二個引數配置選項options

vue.

component

('vbtn',)

;//宣告元件

var ass =

newvue(,

})newvue(,

//掛載

components:

//使用

template:})

<

/script>

//宣告全域性元件,不用掛載

//父元件

vue.

component

("parent"

, template:"

parent<

/p>

<

/div>

//在父元件中繫結自定義屬性(childdata)

'msg'

/>

"});//子元件

vue.

component

("child",)

;new

vue(

)<

/script>

//宣告全域性元件,不用掛載

//父元件

vue.

component

("parent"

, template:"

parent<

/p>

<

/div>

//在父元件中繫結自定義屬性(childdata)

'msg'@childhandler=

'childhandler'

/>

",methods:}}

);//子元件

vue.

component

("child",}

});new

vue(

)<

/script>

newvue(,

methods:,}

<

/script>

vue學習 筆記

v model 雙向繫結 v if v else if v else v on 繫結事件 v bind 繫結資料 v cloak 當vue未初始化完成前可不顯示為賦值的 vue屬性名稱 需要給v cloak設定 display none v for i迴圈次數 a資料中的資料 arr定義的陣列 最好...

vue學習筆記

vue學習筆記 從7月2日到7月4日三天的學習成果 一 vue的起步 及配置環境 3 使用vue cli快速搭建vue專案vue init webpack 為專案名 建立成功需要等待一段時間 4 輸入npm run dev編譯專案,成功後根據提示或根據修改的埠號登陸 lacalhost 5.看到下圖...

vue 學習筆記

1.v if v show區別 v if 是 真正 的條件渲染,因為它會確保在切換過程中條件塊內的事件 和子元件適當地被銷毀和重建。v if 也是惰性的 如果在初始渲染時條件為假,則什麼也不做 直到條件第一次變為真時,才會開始渲染條件塊。相比之下,v show 就簡單得多 不管初始條件是什麼,元素總...