Vue入門系列（1）專案的建立資料的繫結

和往常一樣，我們只需要在專案資料夾中建立三個檔案:

index.css //樣式檔案

index.html //主檔案

index.js //頁面邏輯檔案

這樣乙個簡單的專案架構就做成了。我們只需要在html檔案中寫出我們正常的展示**：

>
>
charset
="utf-8"
/>
>
hello worldtitle
>
src=
"">
script
>
head
>
>
>
>
}p>
div>
src=
"index.js"
>
script
>
body
>
html
>

在js檔案中寫我們的邏輯**：

newvue(}

)/*直接修改資料*/

"hello world!"

所謂的簡單插值，就是使用大括號在html頁面內嵌我們js中的變數，從而使得前端介面「千人千面」。

各種插值方法總結如下：

>
message: }span
>
v-once
>
這個將不會改變: }span
>
>
using v-html directive: v-html
="rawhtml"
>
span
>
p>
v-bind:id
="dynamicid"
>
div> } 
} } 
v-bind:id="
'list-' + id"
>
div>
v-if
="seen"
>
現在你看到我了p
>
v-for
="item in items"
>}li
>
v-on:click
="dosomething"
>
...a
>

為了方便資料繫結，當乙個資料屬性需要計算獲得時（求和，翻轉等操作），可以使用計算屬性。

"example"
>
>
original message: "}"p
>
>
computed reversed message: "}"p
>
div>

//js裡面的內容
var vm =
newvue(,
computed:}}
)

上面就是乙個計算屬性使用的例子，看起來是比較簡單的，其實它就是乙個getter，setter的封裝，預設使用getter介面，如果你想用setter，自行新增即可。

// ...
computed:
,// setter
set:
function
(newvalue)}}
// ...

那麼我們可以看到，其實計算屬性只是把表示式放到js檔案中了，其實還是可以直接在頁面上嵌入表示式，它們之間的區別在於，計算屬性會有乙個計算快取，即如果參與計算的屬性都沒有發生值得變化，那麼不會重複計算，尤其是一些大資料量的統計，使用計算變數可以極大減少運算負擔。

偵聽器主要是監聽元素的變化後的結果，就相當於傳統意義上的事件。主要實現方式有兩種：

<
!-- 第一種，傳統的偵聽器在內部--
>
var watchexamplevm =
newvue(,
watch:}}
)<
!-- 第二種，傳統的偵聽器在外部--
>
// 鍵路徑
vm.$watch
('a.b.c'
,function
(newval, oldval)
)// 函式
vm.$watch
(function()
,function
(newval, oldval)
)

另外提及一點：不要過量的使用偵聽器，如果只是自己的屬性隨著自己的屬性而改變，優先考慮結果變數，也就是使用計算屬性。

我們這次主要學習的是vue的樣子，可以說是初次見面，還是請多多指教。在內容上，我們主要搭建了乙個建議的vue應用，並簡要的介紹了頁面建立與資料繫結的一些知識，其他知識下回分解。我們想要通過vue學習的是整個前端的思考方式和方法，儘管有很多想法5-10年前就已經在我們每個程式設計人員心中產生，但是知道最近，才將想法落到實地。最後獻上vue的生命週期圖，更多詳情還請參閱官方**。

Vue入門系列（1）專案的建立資料的繫結

vue系列1 建立vue專案

vue 專案的建立

vue專案的建立

Vue入門系列（1）專案的建立 資料的繫結

vue系列1 建立vue專案

vue 專案的建立

vue專案的建立

相關推薦

Vue入門系列（1）專案的建立資料的繫結