【vue.js使用流程】

1.導入vue.js。

2.準備好界面。

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

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

?

?

1.Vue的基礎使用

實例

運行結果

?二.插值語法

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

復雜插值
1，對象
2，數組
3，對象數組

功能：用于解析標簽體內容

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

實例

?案例結果

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

結果

?

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

Vue中有 2 種數據綁定的方式：

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

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

在Vue.js中可以使用v-model指令在表單元素上創建雙向數據綁定

案例

案例 結果

2、Vue生命周期鉤子函數

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

通俗說Vue實例從創建到銷毀的過程，就是它的生命周期.

?

每個Vue實例創建時，都會經歷一些系列的初始化過程，同時也會調用相應的生命周期函數，這些生命周期函數稱為“鉤子函數”

開發者可以利用這些鉤子函數，在合適的時機執行相關業務邏輯代碼。

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。