Vue簡單介紹

2021-10-08 07:39:35 字數 3095 閱讀 5115

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

先來說明幾個概念:

框架和庫的區別:

mvc和mvvm:

>

>

>

}p>

div>

>

//建立乙個vue例項,當匯入包之後,在瀏覽器記憶體就多了乙個vue建構函式

//new出來的vm物件即為mvvm的vm繫結器

var vm =

newvue(}

)script

>

body

>

vue的幾種指令:

[v-cloak]

>

v-cloak

>

}p>

div>

>

>

>

+++}---p

>

//插值表示式前後的內容不會被覆蓋,會顯示出來

v-text

="msg"

>

*****=h4

>

//裡面的*****=會被覆蓋,不會顯示出來

div>

>

var vm =

newvue(}

)script

>

body

>

>

>

v-cloak

>

}p>

v-text

="msg2"

>

div>

v-html

="msg2"

>

div>

div>

>

var vm =

newvue(}

)script

>

body

>

>

>

type

="button"

value

="按鈕"

title

="mytitle"

>

type

="button"

value

="按鈕"

v-bind:title

="mytitle"

>

type

="button"

value

="按鈕"

:title

="mytitle + '123'

">

div>

>

var vm =

newvue(}

)script

>

body

>

>

>

type

="button"

value

="按鈕"

v-on:click

="show"

>

type

="button"

value

="按鈕"

v-on:mouseover

="show"

>

type

="button"

value

="按鈕"

@mouseover

="show"

>

div>

>

var vm =

newvue(,

methods:}}

)script

>

body

>

跑馬燈效果:

跑馬燈效果title

>

src=

"lib/vue.js"

>

script

>

head

>

>

"demo"

>

type

="button"

value

="跑起來"

@click

="go"

>

type

="button"

value

="立定"

v-on:click

="stop"

>

>

}h3>

div>

>

//在vm例項中,如果想獲取data上的資料或想呼叫methods中的方法,必須通過this來進行訪問

var lang =

newvue(,

methods:

,400)}

, stop:

function()

}})script

>

body

>

html

>

vue 簡單介紹Promise

一般情況時有非同步操作時,使用promise對這個非同步操作進行封裝。一般分為兩步 new 建構函式 儲存一些狀態資訊 執行傳入的函式 用乙個簡單 實現以下,一層巢狀一層。每一次都執行這兩個步驟,雖 量略大,寫習慣後結構更加清晰。具體 如下 lang en charset utf 8 titleti...

vue簡單介紹 應用

vue是js框架 jq 漸進式框架 前端專案可以只有一部分使用vue,完全使用vue,作為乙個vue專案 版本 2.x 咱們學習,企業裡常用 3.x 最新的 m v vm思想 model view viewmodel 的縮寫,它是一種基於前端開發的架構模式 雙向資料繫結 架構 mvc mtv mvp...

Vue路由簡單介紹(一)

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