Vue2.5 零基礎開發去哪兒網實戰(二) - Vue 起步

JavaEdge發表於2019-02-13
Vue

本章將快速講解部分 Vue 基礎語法，通過 TodoList 功能的編寫，在熟悉基礎語法的基礎上，擴充套件解析 MVVM 模式及前端元件化的概念及優勢。

1 最簡單的案例

1.1 建立一個 Vue 例項

每個 Vue 應用都是通過用 Vue 函式建立一個新的 Vue 例項開始的：

var app = new Vue({
  // 選項
})複製程式碼

當建立一個 Vue 例項時，你可以傳入一個選項物件.
本教程主要描述的就是如何使用這些選項來建立你想要的行為.

一個 Vue 應用由一個通過 new Vue 建立的根 Vue 例項，以及可選的巢狀的、可複用的元件樹組成.

現在，你只需要明白所有的 Vue 元件都是 Vue 例項，並且接受相同的選項物件 (一些根例項特有的選項除外).

回到案例演示,若使用Vue.js 該如何實現列印呢?


Vue2.5 零基礎開發去哪兒網實戰(二) - Vue 起步

  • 無問題,正常列印


    Vue2.5 零基礎開發去哪兒網實戰(二) - Vue 起步

1.2 資料與方法

當一個 Vue 例項被建立時，它向 Vue 的響應式系統中加入了其 data 物件中能找到的所有的屬性.
當這些屬性的值發生改變時，檢視將會產生“響應”，即匹配更新為新的值.

// 我們的資料物件
var data = { a: 1 }

// 該物件被加入到一個 Vue 例項中
var app = new Vue({
  data: data
})

// 獲得這個例項上的屬性
// 返回源資料中對應的欄位
app.a == data.a // => true

// 設定屬性也會影響到原始資料
app.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
app.a // => 3複製程式碼

當這些資料改變時，檢視會進行重渲染.
值得注意的是只有當例項被建立時 data 中存在的屬性才是響應式的。也就是說如果你新增一個新的屬性
比如：

app.b = 'hi'複製程式碼

那麼對 b 的改動將不會觸發任何檢視的更新。如果你知道你會在晚些時候需要一個屬性，但是一開始它為空或不存在，那麼你僅需要設定一些初始值.
比如：

data: {
  newTodoText: '',
  visitCount: 0,
  hideCompletedTodos: false,
  todos: [],
  error: null
}複製程式碼

這裡唯一的例外是使用 Object.freeze()，這會阻止修改現有的屬性，也意味著響應系統無法再追蹤變化.

var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})複製程式碼

<div id="app">
<p>{{ foo }}</p>

<button v-on:click="foo = 'baz'">Change it</button>
</div>
除了資料屬性，Vue 例項還暴露了一些有用的例項屬性與方法。它們都有字首 $，以便與使用者定義的屬性區分開來。例如：

  • 非接管區域內內容,並不感冒它.


    Vue2.5 零基礎開發去哪兒網實戰(二) - Vue 起步

  • 而會原封不動輸出.


    Vue2.5 零基礎開發去哪兒網實戰(二) - Vue 起步

  • 最古老的直接操作DOM的定時操作.


    Vue2.5 零基礎開發去哪兒網實戰(二) - Vue 起步

  • Vue.js 版本程式碼,不需要再管 dom 操作,而是將注意力都放在對於資料的管理;
    資料是什麼,頁面也就展示什麼.


    Vue2.5 零基礎開發去哪兒網實戰(二) - Vue 起步

2-3 開發TodoList（v-model、v-for、v-on）
2-4 MVVM模式 試看
2-5 前端元件化
2-6 使用元件改造TodoList
2-7 簡單的元件間傳值
2-8 章節小結

相關文章