vue學習之路

2021-09-25 07:12:34 字數 886 閱讀 9302

1)v:檢視,代表前端的html**結構

2)m:資料模型,代表資料層,在vue中

例如:data:

3)vm:檢視模型,代表排程層,是mvvm模式的核心,是m和v之間的橋梁在vue中例如:var vm=new vue(

})1)v-clack指令:

作用:解決頁面載入時閃爍問題

用法:在標籤中直接新增v-clack,然後在style標籤中選擇v-clack標籤,新增display:none;這樣在載入差值表示式的內容時,不會因為網速問題導致使用者看到頁面載入前的前端**。

2)v-text

作用:為某標籤插入文字,類似於jq的$("#span").text(』 '),也類似於插值表示式}

用法:直接在標籤中新增v-text=msg //(此處的msg代表data中的資料),

相較於}的好處在於,解決了頁面閃爍問題。

3)v-html

作用:為某標籤插入html,類似於jq的$("#span").html(』 ')插入html標籤

用法:直接在標籤中新增v-html=msg //(此處的msg代表data中的資料

例如 msg:"我是最大的")

4)v-bind

作用:為標籤屬性繫結值

用法:直接在屬性前加v-bind:***x繫結屬性,也可以直接簡寫成 冒號***x

,繫結後會將『=』後面的值看成乙個變數,在載入時會將變數的值替換過來

5)v-on

作用:為標籤繫結事件

用法:在促發事件的動作之間新增v-on:為其繫結動作

例如 v-on:click="***x"此處冒號中的值和v-bind中一樣,代表某個變數,需要在

vue中定義methods物件,實現***x對應的方法,

例如 methods:

vue學習之路由

路由需要引入庫 vue router 我們經常需要把某種模式匹配到的所有路由,全都對映到同個元件。例如,我們有乙個 user 元件,對於所有 id 各不相同的使用者,都要使用這個元件來渲染。那麼,我們可以在 vue router 的路由路徑中使用 動態路徑引數 dynamic segment 來達到...

Vue學習高階之路

過去傳統的前端開發是jsp jquery,而現在前端短短幾年時間,技術已經發生了天翻地覆的變化 工具類 npm 以及package.json檔案,這是乙個標準的npm說明檔案,裡面蘊含了豐富的資訊,包括當前專案的依賴模組,自定義的指令碼任務等等。vue cli 是用來生產vue專案的命令列工具 ba...

學習之路 vue的介紹

最近要做新的 專案,想著新專案都用新的技術來實現,前端立馬就出現了angular,旁邊同事這時也坐不住,照這樣,我後端就用go。一拍即合 模糊中對angular有點有敬佩,他的渲染,請求,寫法。後面在網上看資料,發現了vue,這個更輕量,感覺上手還快些,這下你們懂了,好了,開始vue學習之路 以下摘...