Vue專題 二 Vue例項

2021-09-26 11:21:33 字數 2318 閱讀 2400

每個 vue 應用都是通過用vue函式建立乙個新的vue 例項開始的:

var vm =

newvue

()

在建構函式中傳入乙個物件,並且在物件中宣告各種vue需要的資料和方法,包括:

接下來我們一 一介紹。

每個vue例項都需要關聯一段html模板,vue會基於此模板進行檢視渲染。

我們可以通過el屬性來指定。

例如一段html模板:

>

div>

然後建立vue例項,關聯這個div

var vm =

newvue

()

當vue例項被建立時,它會嘗試獲取在data中定義的所有屬性,用於檢視的渲染,並且監視data中的屬性變化,當data發生改變,所有相關的檢視都將重新渲染,這就是「響應式「系統。

html:

>

type

="text"

v-model

="name"

/>

div>

js:

var vm =

newvue(}

)

vue例項中除了可以定義data屬性,也可以定義方法,並且在vue例項的作用範圍內使用。

html:

>

}v-on:click

="add"

>

加button

>

div>

js:

var vm =

newvue(,

methods:}}

)

每個 vue 例項在被建立時都要經過一系列的初始化過程 :建立例項,裝載模板,渲染模板等等。vue為生命週期中的每個狀態都設定了鉤子函式(監聽函式)。每當vue例項處於不同的生命週期時,對應的函式就會被觸發呼叫。

生命週期:

beforecreated:我們在用vue時都要進行例項化,因此,該函式就是在vue例項化是呼叫,也可以將他理解為初始化函式比較方便一點,在vue1.0時,這個函式的名字就是init。

created:在建立例項之後進行呼叫。

beforemount:頁面載入完成,沒有渲染。如:此時頁面還是}

mounted:我們可以將他理解為原生js中的window.οnlοad=function(),或許大家也在用jquery,所以也可以理解為jquery中的$(document).ready(function()),他的功能就是:在dom文件渲染完畢之後將要執行的函式,該函式在vue1.0版本中名字為compiled。 此時頁面中的}已被渲染成峰哥

beforedestroy:該函式將在銷毀例項前進行呼叫 。

destroyed:改函式將在銷毀例項時進行呼叫。

beforeupdate:元件更新之前。

updated:元件更新之後。

例如:created代表在vue例項建立後;

我們可以在vue中定義乙個created函式,代表這個時期的鉤子函式:

lang

="en"

>

>

charset

="utf-8"

>

>

vue演示title

>

head

>

>

>

type

="text"

v-model

="num"

>

v-on:click

="add"

>

點我button

>

>

},非常帥!!!有}位女神為他著迷。

h2>

div>

body

>

Vue系列之例項(二)

entry在main.js中會有乙個vue的例項,每個vue應用都是通過vue函式建立乙個vue例項開始的 new vue 其中,你可以配置一些選項,經常在業務系統的入口檔案中用到的有 el 提供乙個在頁面上已存在的dom元素作為vue例項的掛載目標 el id router 路由資訊,後期單獨介紹...

vue學習 vue例項(instance)

這一章主要是列舉vue例項一些實用的方法和屬性,大概講解一下用到的地方,有些涉及元件部分的屬性,暫時跳過,待到學完元件章節,再回過頭來補充。主要講解 vue instance宣告方式 vue instance上的屬性 vue instance上的方法 vue instance宣告方式 const v...

Vue例項列表

true model queryform class demo form inline 姓名 queryform.name placeholder 姓名 el input el form item 班級 queryform.classesid placeholder 請選擇班級 clearable ...