聯絡我

1.Java開發技術交流Q群

2.完整部落格連結

3.個人知乎

4.gayhub

本文原始碼

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

1 最簡單的案例

• 下載安裝

  

• 原生實現列印

  

  

1.1 建立一個 Vue 例項

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

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

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

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

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

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

• 無問題,正常列印

  

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>
  <!-- 這裡的 `foo` 不會更新！ -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>
複製程式碼

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

  

• 而會原封不動輸出.

  

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

  

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

除了資料屬性，Vue 例項還暴露了一些有用的例項屬性與方法. 它們都有字首 $，以便與使用者定義的屬性區分開來. 例如：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

vm.$data === data // => true
vm.$el === document.getElementById('example') // => true

// $watch 是一個例項方法
vm.$watch('a', function (newValue, oldValue) {
  // 這個回撥將在 `vm.a` 改變後呼叫
})
複製程式碼

3 開發TodoList（v-model、v-for、v-on）

3.1 列表渲染

3.1.1 用 v-for 把一個陣列對應為一組元素

我們用 v-for 指令根據一組陣列的選項列表進行渲染。v-for 指令需要使用 item in items 形式的特殊語法，items 是源資料陣列並且 item 是陣列元素迭代的別名。

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
複製程式碼

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
複製程式碼

結果：

Foo
Bar
複製程式碼

在 v-for 塊中，我們擁有對父作用域屬性的完全訪問許可權. v-for 還支援一個可選的第二個引數為當前項的索引.

<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
複製程式碼

var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Parent',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
複製程式碼

結果：

Parent - 0 - Foo
Parent - 1 - Bar
複製程式碼

你也可以用 of 替代 in 作為分隔符，因為它是最接近 JavaScript 迭代器的語法：

<div v-for="item of items"></div>
複製程式碼

3.1.2 一個物件的 v-for

也可用 v-for 通過一個物件的屬性來迭代.

在遍歷物件時，是按 Object.keys() 的結果遍歷，但是不能保證它的結果在不同的 JavaScript 引擎下是一致的.

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
複製程式碼

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
})
複製程式碼

• 也可以提供第二個的引數為鍵名：

<div v-for="(value, key) in object">
  {{ key }}: {{ value }}
</div>
複製程式碼

• 第三個引數為索引

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>
複製程式碼

在遍歷物件時，是按 Object.keys() 的結果遍歷，但是不能保證它的結果在不同的 JavaScript 引擎下是一致的。

3.1.3 key

當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它預設用“就地複用”策略。如果資料項的順序被改變，Vue 將不會移動 DOM 元素來匹配資料項的順序， 而是簡單複用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。這個類似 Vue 1.x 的 track-by="$index" 。

這個預設的模式是高效的，但是隻適用於不依賴子元件狀態或臨時 DOM 狀態 (例如：表單輸入值) 的列表渲染輸出。

為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key 屬性。理想的 key 值是每項都有的唯一 id。這個特殊的屬性相當於 Vue 1.x 的 track-by ，但它的工作方式類似於一個屬性，所以你需要用 v-bind 來繫結動態值 (在這裡使用簡寫)：

<div v-for="item in items" :key="item.id">
  <!-- 內容 -->
</div>
複製程式碼

建議儘可能在使用 v-for 時提供 key，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴預設行為以獲取效能上的提升.

因為它是 Vue 識別節點的一個通用機制，key 並不與 v-for 特別關聯.

不要使用物件或陣列之類的非原始型別值作為 v-for 的 key。用字串或數型別的值取而代之.

3.2 回到案例

• 最初檔案

  

• 最初效果

  

• Vue版實現同效

  

下面開始逐步實現 todolist功能

3.3 事件處理

3.3.1 監聽事件

可以用 v-on 指令監聽 DOM 事件，並在觸發時執行一些 JavaScript 程式碼。

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>
複製程式碼

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})
複製程式碼

3.3.2 事件處理方法

然而許多事件處理邏輯會更為複雜，所以直接把 JavaScript 程式碼寫在 v-on 指令中是不可行的,因此 v-on 還可以接收一個需要呼叫的方法名稱.

<div id="example-2">
  <!-- `greet` 是在下面定義的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
複製程式碼

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 物件中定義方法
  methods: {
    greet: function (event) {
      // `this` 在方法裡指向當前 Vue 例項
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// 也可以用 JavaScript 直接呼叫方法
example2.greet() // => 'Hello Vue.js!'
複製程式碼

3.4 回到案例

來試試繫結點選事件~

3.5 表單輸入繫結

3.5.1 基礎用法

可用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上建立雙向資料繫結. 它會根據控制元件型別自動選取正確的方法來更新元素。儘管有些神奇，但 v-model 本質上不過是語法糖。它負責監聽使用者的輸入事件以更新資料，並對一些極端場景進行一些特殊處理.

v-model 會忽略所有表單元素的 value、checked、selected 特性的初始值而總是將 Vue 例項的資料作為資料來源。你應該通過 JavaScript 在元件的 data 選項中宣告初始值。

對於需要使用輸入法 (如中文、日文、韓文等) 的語言，你會發現 v-model 不會在輸入法組合文字過程中得到更新。如果你也想處理這個過程，請使用 input 事件。

• [文字]

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
複製程式碼

• [多行文字]

<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
複製程式碼

|

Multiline message is:

在文字區域插值 (<textarea></textarea>) 並不會生效，應用 v-model 來代替。

• [核取方塊] 單個核取方塊，繫結到布林值：

<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
複製程式碼

多個核取方塊，繫結到同一個陣列：

<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>
複製程式碼

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})
複製程式碼

• [單選按鈕]

<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>
複製程式碼

new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})
複製程式碼

• [選擇框] 單選時：

<div id="example-5">
  <select v-model="selected">
    <option disabled value="">請選擇</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
複製程式碼

new Vue({
  el: '...',
  data: {
    selected: ''
  }
})
複製程式碼

如果 v-model 表示式的初始值未能匹配任何選項， 元素將被渲染為“未選中”狀態。在 iOS 中，這會使使用者無法選擇第一個選項。因為這樣的情況下，iOS 不會觸發 change 事件。因此，更推薦像上面這樣提供一個值為空的禁用選項。 3.6 回到案例:實現表單資料繫結 初始時值為空串. 產生輸入後,值發生變化 在控制檯改變值後,頁面值隨之改變! 如何使得點選事件可以發現輸入框的值呢? 來來來,讓我們快速進入下一個任務,要實現輸入內容提交後列印,何解? 如此即可實現,是不是很簡單呢~ 可是發現好麻煩呀,每次提交,都需要手動請出前一次輸入的內容,何解? 是不是很簡單~ 至此,todolist 功能實現完畢,無任何DOM操作,全程只運算元據! Vue完美! 此為MVVM模式~ 我們們下回分解MVVM哦~,不見不散! 參考 https://coding.imooc.com/class/203.html https://cn.vuejs.org/v2/guide/events.html