聯繫我

本章將快速講解部分 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 placeholder="add multiple lines"></textarea>

在文本區域插值 (<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 表達式的初始值未能匹配任何選項，<select> 元素將被渲染爲“未選中”狀態。在 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

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

聯繫我

本文源碼

1 最簡單的案例

1.1 創建一個 Vue 實例

1.2 數據與方法

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

3.1 列表渲染

3.1.1 用 `v-for` 把一個數組對應爲一組元素

3.1.2 一個對象的 `v-for`

3.1.3 key

3.2 回到案例

3.3 事件處理

3.3.1 監聽事件

3.3.2 事件處理方法

3.4 回到案例

3.5 表單輸入綁定

3.5.1 基礎用法

3.6 回到案例:實現表單數據綁定

致遠OA及相關OA系統集成與二次開發

EXCEL公式使用總結

System.Object未被引用的程序集中定義

Java 信號量（semaphore）搭配CountDownLatch 實現多線程處理循環內邏輯並限制創建線程數

[轉帖]linux命令top內存顯示M兆或者G

【面試準備】項目經驗——接口自動化項目

Linux內核實戰（二）- 操作系統概覽

Linux內核實戰（一）- 學習路線規劃

macOS下 Hive 2.x 的安裝與配置

Spark機器學習實戰 (十二) - 推薦系統實戰

Spark機器學習實戰 (十一) - 文本情感分類項目實戰

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

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

聯繫我

1 最簡單的案例

1.1 創建一個 Vue 實例

1.2 數據與方法

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

3.1 列表渲染

3.1.1 用 v-for 把一個數組對應爲一組元素

3.1.2 一個對象的 v-for

3.1.3 key

3.2 回到案例

3.3 事件處理

3.3.1 監聽事件

3.3.2 事件處理方法

3.4 回到案例

3.5 表單輸入綁定

3.5.1 基礎用法

3.6 回到案例:實現表單數據綁定

3.1.1 用 `v-for` 把一個數組對應爲一組元素

3.1.2 一個對象的 `v-for`