【vue.js使用流程】

1.導(dǎo)入vue.js。

2.準(zhǔn)備好界面。

3.實(shí)例化一個vue，并且將這個界面交給vue管理。

4.{{ vue里的變量 }}，可以輸出這個變量的值。

?

?

1.Vue的基礎(chǔ)使用

實(shí)例

運(yùn)行結(jié)果

?二.插值語法

簡單插值
1，字面量，number，string，boolean等
2，四則運(yùn)算，+，-，*，/,%, （這里+可以做字符串拼接）
3，邏輯運(yùn)算，&&，||，！
4，三目運(yùn)算、
5，全局函數(shù)

復(fù)雜插值
1，對象
2，數(shù)組
3，對象數(shù)組

功能：用于解析標(biāo)簽體內(nèi)容

寫法：{{xxx}}，xxx是js表達(dá)式，且可以直接讀取到data中的所有屬性

實(shí)例

?案例結(jié)果

三.Vue V-html,V-text語法使用?

結(jié)果

?

?四.雙向奔赴“V-model指令

Vue中有 2 種數(shù)據(jù)綁定的方式：

單向綁定(v-bind)：數(shù)據(jù)只能從data流向頁面
雙向綁定(v-model)：數(shù)據(jù)不僅能從data流向頁面，還可以從頁面流向data。
備注：

雙向綁定一般都應(yīng)用在表單類元素上（如：input、select等）
v-model:value可以簡寫為v-model，因?yàn)関-model默認(rèn)收集的就是value值。

在Vue.js中可以使用v-model指令在表單元素上創(chuàng)建雙向數(shù)據(jù)綁定

案例

案例 結(jié)果

2、Vue生命周期鉤子函數(shù)

?Vue實(shí)例有一個完整的生命周期，也就是從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染、更新、渲染到銷毀等一系列過程，稱為Vue的生命周期。

通俗說Vue實(shí)例從創(chuàng)建到銷毀的過程，就是它的生命周期.

?

每個Vue實(shí)例創(chuàng)建時，都會經(jīng)歷一些系列的初始化過程，同時也會調(diào)用相應(yīng)的生命周期函數(shù)，這些生命周期函數(shù)稱為“鉤子函數(shù)”

開發(fā)者可以利用這些鉤子函數(shù)，在合適的時機(jī)執(zhí)行相關(guān)業(yè)務(wù)邏輯代碼。

?

總結(jié)

以上是生活随笔為你收集整理的Vue.js使用流程的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。