Vue入門(一) Vue簡單介紹和常見指令

2021-09-27 07:06:00 字數 1529 閱讀 1628

vue入門學習整理

辣個勾起我對js探知欲的男人的經典台詞,在你學習一樣東西的時候要想想為什麼要學這個東西,只因為被灌輸了就學習的學習,主動性太低,學海無涯,自己爭渡。

所以,為什麼學vue?

講道理,學乙個框架或者類庫的最終目的都是為了更好更優地實現開發。

vue是乙個用於構建使用者介面的漸進式mvvm框架,用於解決在開發中遇到的難題,如高效操作dom和渲染資料,以及面對大量的流向較亂的資料的資料操作,這些問題在js框架中都有自己的趨於完美的解決方案,並且降低開發成本,實現高效能、高效率。

既然講了,vue是乙個mvvm框架,那麼什麼是mvvm?

m:model,代表資料儲存;

v:view,檢視層,即大概可以理解為user inte***ce;

vm:viewmodel,檢視模型,和前輩mvc以及mvp不同的點,用以實現m和v的互動和控制改動,但是vm不同於controller和presenter的點是,vm與v的互動是雙向繫結的,存在相互作用的特點。

以上為個人粗淺之見,詳見

vue指令借鑑於angular,用於實現資料和dom更便捷的互動

// 引入vue框架,主要有兩種方式,script標籤引入vue檔案,或是npm的模組化引入

// 引入vue後獲得乙個全域性屬性vue,為建構函式

var vm = new vue(

}})

常見指令
v-text // 將資料插入html檔案中

example:

eg:v-text 和 }效果相同,區別在於}在未引入vue時仍會原樣顯示 such as: }

v-html // 與v-text大致相同的作用,增加了轉義html標籤的能力 此時message為:'woshifutianxiawudi'

example:

eg:上述例子將會正確解析span,而若改為v-text將會輸出'woshifutianxiawudi',不存在轉義

v-if // 在html內判斷條件渲染

example:

eg:當判斷不成立時,將不會渲染該dom,同樣的條件渲染包括,v-else,v-else-if,用法類似於在js內

v-for ... in/of ... // 遍歷渲染

example:

eg: item為遍歷得到的每一條結果,obj為被遍歷的物件,同理也可以對陣列,以及json格式的資料進行遍歷,更是可以進行迴圈巢狀

v-bind // 單項資料繫結

example:

eg:此時的id名被改為了'woshifutianxiawudi',v-model也是資料繫結,不過是雙向繫結,即檢視層的資料改變會引發vm的改變

v-pre //跳過這個元素和它的子元素的編譯過程。可以用來顯示原始 mustache 標籤。跳過大量沒有指令的節點會加快編譯。

}v-once // 只渲染元素和元件一次。隨後的重新渲染,元素/元件及其所有的子節點將被視為靜態內容並跳過。這可以用於優化更新效能。

v-cloak // 這個指令會使元素在編譯完成之後才會顯示

Vue簡單介紹

vue vue.js的簡稱 是前端的主流框架之一,和angular.js react.js一起,成為前端三大主流框架,vue.js是一套構建使用者介面的框架,只關注檢視層,它不僅容易上手,還便於與第三方庫或既有專案整合 vue有配置的第三方類庫,可以整合起來做大型專案的開發 先來說明幾個概念 框架和...

Vue路由簡單介紹(一)

使用npm命令 npm install vue router如果在乙個模組化工程中使用它,必須要通過 vue.use 明確地安裝路由功能 import vue from vue import vuerouter from vue router vue.use vuerouter 如果使用全域性的 s...

Vue簡單入門

是 mvvm js 漸進式 檢視層 框架 mvvm m model 資料 v view 檢視 mv vm 資料改變 檢視會自動重新整理 vm vue例項驅動重新整理 命令式將程式 每乙個 執行步驟 寫出來 程式執行 宣告式告訴 計算機 我要幹什麼 中間怎麼做 不管 一切以資料為核心 盡量不要操作do...