前端MVC Vue2學習總結（四）——條件渲染、列表渲染、事件處理器

本文轉載自查看原文 2018-01-02 11:20 2092 前端/ vue2

一、條件渲染

1.1、v-if

在字符串模板中，如 Handlebars ，我們得像這樣寫一個條件塊：

<!-- Handlebars 模板 -->
{{#if ok}}
  <h1>Yes</h1>
{{/if}}

在 Vue.js ，我們使用 v-if 指令實現同樣的功能：

<h1 v-if="ok">Yes</h1>

也可以用 v-else 添加一個 “else” 塊：

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

1.1.1、template v-if

因為 v-if 是一個指令，需要將它添加到一個元素上。但是如果我們想切換多個元素呢？此時我們可以把一個 <template> 元素當做包裝元素，並在上面使用 v-if，最終的渲染結果不會包含它。

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>條件渲染</title>
    </head>

    <body>
        <div id="app1">
            <p>
                <button type="button" @click="isShow=!isShow">Toggle isShow</button>
            </p>
            <h1 v-if="isShow">Yes</h1>
            <h1 v-else>No</h1>
            
            
            <template v-if="!isShow">
                <p>item1</p><p>item2</p><p>item3</p>
            </template>
            <template v-else>
                <p>item4</p><p>item5</p><p>item6</p>
            </template>
            
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el: "#app1",
                data: {
                    isShow: true
                }
            });
        </script>
    </body>

</html>

結果：

切換

1.1.2、v-else

可以用 v-else 指令給 v-if 添加一個 “else” 塊：

<div v-if="Math.random() > 0.5">
  Sorry
</div>
<div v-else>
  Not sorry
</div>

v-else 元素必須緊跟在 v-if 元素的后面——否則它不能被識別。

`1.1.3、v-else-if`

2.1.0 新增v-else-if，顧名思義，充當 v-if 的“else-if 塊”，可以連續使用：

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

類似於 v-else，v-else-if 也必須緊跟在帶 v-if 或者 v-else-if 的元素之后。

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>條件渲染</title>
    </head>

    <body>
        <div id="app1">
            <div v-if="Math.random() > 0.5">
                Sorry
            </div>
            <div v-else>
                Not sorry
            </div>

            <div v-if="type === 'A'">
                A
            </div>
            <div v-else-if="type === 'B'">
                B
            </div>
            <div v-else-if="type === 'C'">
                C
            </div>
            <div v-else>
                Not A/B/C
            </div>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el: "#app1",
                data: {
                    type:"C"
                }
            });
        </script>
    </body>

</html>

結果：

1.1.4、用 `key` 管理可復用的元素

Vue 會盡可能高效地渲染元素，通常會復用已有元素而不是從頭開始渲染。這么做除了使 Vue 變得非常快之外，還有其它一些好處。例如，如果你允許用戶在不同的登錄方式之間切換：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address">
</template>

自己動手試一試，在輸入框中輸入一些文本，然后按下切換按鈕：那么在上面的代碼中切換 loginType 將不會清除用戶已經輸入的內容。因為兩個模板使用了相同的元素，<input> 不會被替換掉——僅僅是替換了它的 placeholder。

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>條件渲染</title>
    </head>
    <body>
        <div id="app1">
            <template v-if="type==='username'">
                <label>帳號：</label>
                <input placeholder="請輸入您的帳號" />
            </template>
            <template v-else>
                <label>郵箱：</label>
                <input placeholder="請輸入您的電子郵箱" />
            </template>
            <p>
                <a href="" @click.prevent="type='username'">用戶名登錄</a> | <a href="" @click.prevent="type='email'">郵箱登錄</a> 
            </p>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el: "#app1",
                data: {
                    isShow: true,
                    type: "username"
                }
            });
        </script>
    </body>
</html>

結果：

點擊郵箱登錄

這樣也不總是符合實際需求，所以 Vue 為你提供了一種方式來表達“這兩個元素是完全獨立的，不要復用它們”。只需添加一個具有唯一值的 key 屬性即可：

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

現在，每次切換時，輸入框都將被重新渲染。

        <div id="app1">
            <template v-if="type==='username'">
                <label>帳號：</label>
                <input placeholder="請輸入您的帳號" key="username"/>
            </template>
            <template v-else>
                <label>郵箱：</label>
                <input placeholder="請輸入您的電子郵箱" key="email"/>
            </template>
            <p>
                <a href="" @click.prevent="type='username'">用戶名登錄</a> | <a href="" @click.prevent="type='email'">郵箱登錄</a> 
            </p>
        </div>

注意，<label> 元素仍然會被高效地復用，因為它們沒有添加 key 屬性。

1.1.5、v-show

另一個根據條件展示元素的選項是 v-show 指令。用法大體上一樣：

<h1 v-show="ok">Hello!</h1>

不同的是有 v-show 的元素會始終渲染並保持在 DOM 中。v-show 是簡單的切換元素的 CSS 屬性 display 。

注意 v-show 不支持 <template> 語法。

1.2、v-if vs. v-show

v-if 是真實的條件渲染，因為它會確保條件塊在切換當中適當地銷毀與重建條件塊內的事件監聽器和子組件。

v-if 也是惰性的：如果在初始渲染時條件為假，則什么也不做——在條件第一次變為真時才開始局部編譯（編譯會被緩存起來）。

相比之下， v-show 簡單得多——元素始終被編譯並保留，只是簡單地基於 CSS 切換。

一般來說， v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換使用 v-show 較好，如果在運行時條件不大可能改變則使用 v-if 較好。

官方文檔： http://vuejs.org/guide/conditional.html

二、列表渲染

`2.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' }
    ]
  }
})

結果：

在 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>

2.1.1、Template v-for

如同 v-if 模板，你也可以用帶有 v-for 的 <template> 標簽來渲染多個元素塊。例如：

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider"></li>
  </template>
</ul>

2.1.2、對象迭代 v-for

你也可以用 v-for 通過一個對象的屬性來迭代。

<ul id="repeat-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#repeat-object',
  data: {
    object: {
      FirstName: 'John',
      LastName: 'Doe',
      Age: 30
    }
  }
})

結果：

John
Doe
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 引擎下是一致的。

2.1.3、整數迭代 v-for

v-for 也可以取整數。在這種情況下，它將重復多次模板。

<div>
  <span v-for="n in 10">{{ n }}</span>
</div>

結果：

1 2 3 4 5 6 7 8 9 10

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>列表渲染</title>
    </head>

    <body>
        <div id="app1">
            <ul>
                <template v-for="(user,index) in users">
                    <li>{{index+1}} - {{user.name}}</li>
                    <li>
                        <hr/>
                    </li>
                </template>
            </ul>

            <h3>遍歷對象中的所有屬性value</h3>
            <p v-for="value in product">
                {{value}}
            </p>
            <h3>遍歷對象中的所有屬性value - key</h3>
            <p v-for="(value,key) in product">
                {{key}} - {{value}}
            </p>

            <h3>遍歷對象中的所有屬性value - key - index</h3>
            <p v-for="(value,key,index) in product">
                {{index}} - {{key}} - {{value}}
            </p>
            <h3>整數迭代 v-for</h3>
            <span v-for="n in 20">
                {{n}} - 
            </span>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el: "#app1",
                data: {
                    users: [{
                            name: "tom",
                            age: 18
                        },
                        {
                            name: "rose",
                            age: 87
                        },
                        {
                            name: "mark",
                            age: 16
                        }
                    ],
                    product: {
                        name: "蘋果",
                        price: 5.8,
                        unit: '千克'
                    }
                }
            });
        </script>
    </body>

</html>

結果：

2.1.4、組件和 v-for

了解組件相關知識，查看組件。Feel free to skip it and come back later.

在自定義組件里，你可以像任何普通元素一樣用 v-for 。

<my-component v-for="item in items"></my-component>

然而他不能自動傳遞數據到組件里，因為組件有自己獨立的作用域。為了傳遞迭代數據到組件里，我們要用 props ：

<my-component
  v-for="(item, index) in items"
  v-bind:item="item"
  v-bind:index="index">
</my-component>

不自動注入 item 到組件里的原因是，因為這使得組件會緊密耦合到 v-for 如何運作。在一些情況下，明確數據的來源可以使組件可重用。

下面是一個簡單的 todo list 完整的例子：

<div id="todo-list-example">
  <input
    v-model="newTodoText"
    v-on:keyup.enter="addNewTodo"
    placeholder="Add a todo"
  >
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:title="todo"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>

Vue.component('todo-item', {
  template: '
    <li>
      {{ title }}
      <button v-on:click="$emit(\'remove\')">X</button>
    </li>',
  props: ['title']
})
new Vue({
  el: '#todo-list-example',
  data: {
    newTodoText: '',
    todos: [
      'Do the dishes',
      'Take out the trash',
      'Mow the lawn'
    ]
  },
  methods: {
    addNewTodo: function () {
      this.todos.push(this.newTodoText)
      this.newTodoText = ''
    }
  }
})

示例：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>列表渲染</title>
    </head>
    <body>
        <div id="app1">
            任務：<input v-model="newTask" @keyup.enter="addNew" placeholder="請輸入您要完成的任務" />
            <ul>
                <li is="todoitem" v-for="(task,index) in tasks" :title="task" @remove="removeItem(index)"></li>
            </ul>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.component("todoitem", {
                template: "<li>{{title}} <button @click='$emit(\"remove\")'>X</button></li>",
                props: ['title']
            });

            var app1 = new Vue({
                el: "#app1",
                data: {
                    newTask: '',
                    tasks: ["買一本書", "給爸媽打電話", "整理自己的硬盤"]
                },
                methods: {
                    addNew: function() {
                        this.tasks.unshift(this.newTask);
                        this.newTask = '';
                    },
                    removeItem: function(index) {
                        if(confirm('確定要移除嗎？')) {
                            this.tasks.splice(index, 1);
                        }
                    }
                }
            });
        </script>
    </body>
</html>

結果：

2.2、key

當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用 “就地復用” 策略。如果數據項的順序被改變，而不是移動 DOM 元素來匹配數據項的順序， Vue 將簡單復用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。這個類似 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 關聯，key 還具有其他用途，我們將在后面的指南中看到其他用途。

2.3、數組更新檢測

2.3.1、變異方法

Vue 包含一組觀察數組的變異方法，所以它們也將會觸發視圖更新。這些方法如下：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

你打開控制台，然后用前面例子的 items 數組調用突變方法：example1.items.push({ message: 'Baz' }) 。

2.3.2、重塑數組

變異方法(mutation method)，顧名思義，會改變被這些方法調用的原始數組。相比之下，也有非變異(non-mutating method)方法，例如： filter(), concat(), slice() 。這些不會改變原始數組，但總是返回一個新數組。當使用非變異方法時，可以用新數組替換舊數組：

example1.items = example1.items.filter(function (item) {
  return item.message.match(/Foo/)
})

你可能認為這將導致 Vue 丟棄現有 DOM 並重新渲染整個列表。幸運的是，事實並非如此。 Vue 實現了一些智能啟發式方法來最大化 DOM 元素重用，所以用一個含有相同元素的數組去替換原來的數組是非常高效的操作。

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>列表渲染</title>
    </head>

    <body>
        <div id="app1">
            <ul>
                <li v-for="n in items">
                    <h2>{{n}}</h2>
                </li>
            </ul>
            <button @click="items.splice(0,3)">修改數組(變異)</button>
            <button @click="items.slice(0,3)">修改數組(不變異)</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el: "#app1",
                data: {
                    items:[1,3,5,7,9,2,4,6,8,0]
                }
            });
        </script>
    </body>

</html>

結果：

如果原數組發生了變化則View也會重新渲染，如果原數組未發生變化只是讀取后返回了新的數組對象則不會渲染。

2.3.3、觸發數組狀態更新

由於 JavaScript 的限制， Vue 不能檢測以下變動的數組：

當你直接設置一個項的索引時，例如： vm.items[indexOfItem] = newValue
當你修改數組的長度時，例如： vm.items.length = newLength

為了避免第一種情況，以下兩種方式將達到像 vm.items[indexOfItem] = newValue 的效果，同時也將觸發狀態更新：

// Vue.set
Vue.set(example1.items, indexOfItem, newValue)

// Array.prototype.splice`
example1.items.splice(indexOfItem, 1, newValue)

避免第二種情況，使用 splice：

example1.items.splice(newLength)

splice數組詳解：

splice() 方法向/從數組中添加/刪除項目，然后返回被刪除的項目。

注釋：該方法會改變原始數組。

語法
arrayObject.splice(index,howmany,item1,.....,itemX)

index //規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置。
howmany //要刪除的項目數量。如果設置為 0，則不會刪除項目。
item1, ..., itemX //向數組添加的新項目。

返回值
Array    包含被刪除項目的新數組，如果有的話。

說明
//splice() 方法可刪除從 index 處開始的零個或多個元素，並且用參數列表中聲明的一個或多個值來替換那些被刪除的元素。

//如果從 arrayObject 中刪除了元素，則返回的是含有被刪除的元素的數組。

View Code

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>列表渲染</title>
    </head>

    <body>
        <div id="app1">
            <ul>
                <li v-for="n in items">
                    <h2>{{n}}</h2>
                </li>
            </ul>
            <button @click="items[2]=55">修改第3個元素的值為55(無效)</button>
            <button @click="setValue">Vue.set修改第3個元素的值為55</button>
            <button @click="items.splice(2,1,55)">Vue.set修改第3個元素的值為55</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el: "#app1",
                data: {
                    items: [1, 3, 5, 7, 9, 2, 4, 6, 8, 0]
                },
                methods: {
                    setValue: function() {
                        Vue.set(this.items, 2, 55);
                    }
                }
            });
        </script>
    </body>

</html>

結果：

2.4、對象更改檢測注意事項

還是由於 JavaScript 的限制，Vue 不能檢測對象屬性的添加或刪除：

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 現在是響應式的

vm.b = 2
// `vm.b` 不是響應式的

對於已經創建的實例，Vue 不能動態添加根級別的響應式屬性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套對象添加響應式屬性。例如，對於：

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

你可以添加一個新的 age 屬性到嵌套的 userProfile 對象：

Vue.set(vm.userProfile, 'age', 27)

你還可以使用 vm.$set 實例方法，它只是全局 Vue.set 的別名：

vm.$set(this.userProfile, 'age', 27)

有時你可能需要為已有對象賦予多個新屬性，比如使用 Object.assign() 或 _.extend()。在這種情況下，你應該用兩個對象的屬性創建一個新的對象。所以，如果你想添加新的響應式屬性，不要像這樣：

Object.assign(this.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

你應該這樣做：

this.userProfile = Object.assign({}, this.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>對象更改檢測注意事項</title>
    </head>

    <body>
        <div id="app1">
            <h2>對象更改檢測注意事項</h2>
            {{stu.name}} - {{stu.age}}
            <p>
                <button @click="setAge">在stu對象中添加age屬性並設置值為100</button>
            </p>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el: "#app1",
                data: {
                    stu:{
                        name:"tom"
                    }
                },
                methods:{
                    setAge:function(){
                        Vue.set(this.stu,'age',100);
                    }
                },
                beforeUpdate:function(){
                    console.log("更新前"+this.name);
                },
                updated:function(){
                    console.log("更新后"+this.name);
                }
            });
        </script>
    </body>

</html>

結果：

注意：

如果data中數據沒有被綁定到DOM中，則修改后DOM不會更新，updated與beforeUpdate事件也不會執行（Hook function）

data 的根元素后加入無效，可以使用Vue.set添加元素中的屬性，這樣會變成響應式的成員

2.5、顯示過濾/排序結果

有時，我們想要顯示一個數組的過濾或排序副本，而不實際改變或重置原始數據。在這種情況下，可以創建返回過濾或排序數組的計算屬性。

例如：

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

或者，您也可以使用在計算屬性是不可行的 method 方法 (例如，在嵌套 v-for 循環中)：

<li v-for="n in even(numbers)">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
methods: {
  even: function (numbers) {
    return numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>列表渲染</title>
    </head>

    <body>
        <div id="app1">
            <p>
                <span v-for="n in items">
                    {{n}}
                </span>
            </p>
            <p>
                <span v-for="n in even">
                    {{n}}
                </span></p>
            <p>
                <span v-for="n in odd()">
                    {{n}}
                </span></p>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el: "#app1",
                data: {
                    items: [1, 3, 5, 7, 9, 2, 4, 6, 8, 0]
                },
                computed: {
                    even: function() {
                        return this.items.filter(function(n) {
                            return n % 2 === 0;
                        });
                    }
                },
                methods: {
                    odd: function() {
                        return this.items.filter(function(n) {
                            return n % 2 === 1;
                        });
                    }
                }
            });
        </script>
    </body>

</html>

結果：

官方原文： http://vuejs.org/guide/list.html

三、事件處理器

3.1、監聽事件

可以用 v-on 指令監聽 DOM 事件來觸發一些 JavaScript 代碼。

示例：

<div id="example-1">
  <button v-on:click="counter += 1">增加 1</button>
  <p>這個按鈕被點擊了 {{ counter }} 次。</p>
</div>

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

結果：

這個按鈕被點擊了 0 次。

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 事件
      alert(event.target.tagName)
    }
  }
})
// 也可以用 JavaScript 直接調用方法
example2.greet() // -> 'Hello Vue.js!'

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>事件</title>
    </head>

    <body>
        <div id="app1">
            <button v-on:click="greet">問好</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el: "#app1",
                data: {
                    name:"tom"
                },
                methods: {
                    greet:function(event){
                        console.log('Hello '+ this.name);
                        console.log('事件對象： '+ event.target.tagName);  //從事件對象中獲得標簽名
                        console.log(event);
                        //在原生的事件中this指向的是當前事件對象，這里是實例
                        event.target.innerHTML="問好了！";
                    }
                }
            });
        </script>
    </body>

</html>

結果：

3.3、內聯處理器方法

除了直接綁定到一個方法，也可以用內聯 JavaScript 語句：

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

結果：

有時也需要在內聯語句處理器中訪問原生 DOM 事件。可以用特殊變量 $event 把它傳入方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">Submit</button>

// ...
methods: {
  warn: function (message, event) {
    // 現在我們可以訪問原生事件對象
    if (event) event.preventDefault()
    alert(message)
  }
}

3.4、事件修飾符

在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在 methods 中輕松實現這點，但更好的方式是：methods 只有純粹的數據邏輯，而不是去處理 DOM 事件細節。

為了解決這個問題， Vue.js 為 v-on 提供了事件修飾符。通過由點(.)表示的指令后綴來調用修飾符。

.stop
.prevent
.capture
.self

<!-- 阻止單擊事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重載頁面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾符可以串聯  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修飾符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件偵聽器時使用事件捕獲模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回調 -->
<div v-on:click.self="doThat">...</div>

3.5、按鍵修飾符

在監聽鍵盤事件時，我們經常需要監測常見的鍵值。 Vue 允許為 v-on 在監聽鍵盤事件時添加按鍵修飾符：

<!-- 只有在 keyCode 是 13 時調用 vm.submit() -->
<input v-on:keyup.13="submit">

記住所有的 keyCode 比較困難，所以 Vue 為最常用的按鍵提供了別名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 縮寫語法 -->
<input @keyup.enter="submit">

全部的按鍵別名：

enter
tab
delete (捕獲 “刪除” 和 “退格” 鍵)
esc
space
up
down
left
right

可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名：

// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

3.6、為什么在 HTML 中監聽事件?

你可能注意到這種事件監聽的方式違背了關注點分離（separation of concern）傳統理念。不必擔心，因為所有的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會導致任何維護上的困難。實際上，使用 v-on 有幾個好處：

掃一眼 HTML 模板便能輕松定位在 JavaScript 代碼里對應的方法。
因為你無須在 JavaScript 里手動綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易於測試。
當一個 ViewModel 被銷毀時，所有的事件處理器都會自動被刪除。你無須擔心如何自己清理它們。

原文： http://vuejs.org/guide/events.html

四、ES2015新增數組方法

ECMAScript2015中新增了9個方法，分別是：

Array.prototype.indexOf
Array.prototype.lastIndexOf
Array.prototype.every
Array.prototype.some
Array.prototype.forEach
Array.prototype.map
Array.prototype.filter
Array.prototype.reduce
Array.prototype.reduceRight

4.1、indexOf()找到的元素位置

indexOf()方法返回在該數組中第一個找到的元素位置，如果它不存在則返回-1。
不使用indexOf時：

var arr = ['apple','orange','pear'],
found = false;
for(var i= 0, l = arr.length; i< l; i++){
if(arr[i] === 'orange'){
found = true;
}
}
console.log("found:",found);

使用后：

var arr = ['apple','orange','pear'];
console.log("found:", arr.indexOf("orange") != -1);

4.2、filter()過濾

該filter()方法創建一個新的匹配過濾條件的數組。
不用 filter() 時

var arr = [
{"name":"apple", "count": 2},
{"name":"orange", "count": 5},
{"name":"pear", "count": 3},
{"name":"orange", "count": 16},
];
var newArr = [];
for(var i= 0, l = arr.length; i< l; i++){
if(arr[i].name === "orange" ){
newArr.push(arr[i]);
}
}
console.log("Filter results:",newArr);

用了 filter():

var arr = [
{"name":"apple", "count": 2},
{"name":"orange", "count": 5},
{"name":"pear", "count": 3},
{"name":"orange", "count": 16},
];

var newArr = arr.filter(function(item){
return item.name === "orange";
});
console.log("Filter results:",newArr);

4.3、forEach()迭代

forEach為每個元素執行對應的方法

var arr = [1,2,3,4,5,6,7,8];

// Uses the usual "for" loop to iterate
for(var i= 0, l = arr.length; i< l; i++){
console.log(arr[i]);
}

console.log("========================");

//Uses forEach to iterate
arr.forEach(function(item,index){
console.log(item);
});

forEach是用來替換for循環的

4.4、map()映射

map()對數組的每個元素進行一定操作（映射）后，會返回一個新的數組

不使用map：

var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];

function getNewArr(){

var newArr = [];

for(var i= 0, l = oldArr.length; i< l; i++){
var item = oldArr[i];
item.full_name = [item.first_name,item.last_name].join(" ");
newArr[i] = item;
}

return newArr;
}

console.log(getNewArr());

使用map后：

var oldArr = [{first_name:"Colin",last_name:"Toh"},{first_name:"Addy",last_name:"Osmani"},{first_name:"Yehuda",last_name:"Katz"}];

function getNewArr(){

return oldArr.map(function(item,index){
item.full_name = [item.first_name,item.last_name].join(" ");
return item;
});

}

console.log(getNewArr());

map()是處理服務器返回數據時是一個非常實用的函數。

4.5、reduce()累加器

reduce()可以實現一個累加器的功能，將數組的每個值（從左到右）將其降低到一個值。
說實話剛開始理解這句話有點難度，它太抽象了。
場景：統計一個數組中有多少個不重復的單詞
不使用reduce時：

var arr = ["apple","orange","apple","orange","pear","orange"];

function getWordCnt(){
var obj = {};

for(var i= 0, l = arr.length; i< l; i++){
var item = arr[i];
obj[item] = (obj[item] +1 ) || 1;
}

return obj;
}

console.log(getWordCnt());

使用reduce()后

var arr = ["apple","orange","apple","orange","pear","orange"];

function getWordCnt(){
return arr.reduce(function(prev,next){
prev[next] = (prev[next] + 1) || 1;
return prev;
},{});
}

console.log(getWordCnt());

讓我先解釋一下我自己對reduce的理解。reduce(callback, initialValue)會傳入兩個變量。回調函數(callback)和初始值(initialValue)。假設函數它有個傳入參數，prev和next,index和array。prev和next你是必須要了解的。
一般來講prev是從數組中第一個元素開始的，next是第二個元素。但是當你傳入初始值(initialValue)后，第一個prev將是initivalValue，next將是數組中的第一個元素。
比如：

/*
* 二者的區別，在console中運行一下即可知曉
*/

var arr = ["apple","orange"];

function noPassValue(){
return arr.reduce(function(prev,next){
console.log("prev:",prev);
console.log("next:",next);

return prev + " " +next;
});
}
function passValue(){
return arr.reduce(function(prev,next){
console.log("prev:",prev);
console.log("next:",next);

prev[next] = 1;
return prev;
},{});
}

console.log("No Additional parameter:",noPassValue());
console.log("----------------");
console.log("With {} as an additional parameter:",passValue());

示例：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>列表渲染</title>
    </head>

    <body>
        <div id="app1">
            <span v-for="n in items">
                    {{n}} 
                </span>
            <button @click="indexOfMethod">indexOf()找到的元素位置</button>
            <button @click="filterMethod">filter()過濾</button>
            <button @click="forEachMethod">forEach()迭代</button>
            <button @click="mapMethod">map()映射</button>
            <button @click="reduceMethod">reduce()累加器</button>
        </div>
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var app1 = new Vue({
                el: "#app1",
                data: {
                    items: [1, 3, 7, 9, 2, 4, 6, 8, 3],
                    fruits: [{
                            "name": "apple",
                            "count": 2
                        },
                        {
                            "name": "orange",
                            "count": 5
                        },
                        {
                            "name": "pear",
                            "count": 3
                        },
                        {
                            "name": "orange",
                            "count": 16
                        }
                    ],
                    words: ["apple", "orange", "apple", "orange", "pear", "orange"]
                },
                methods: {
                    indexOfMethod: function() {
                        console.log("數字3第一次出現的位置是：" + this.items.indexOf(3));
                        console.log("數字5第一次出現的位置是：" + this.items.indexOf(5));
                    },
                    filterMethod: function() {
                        //獲得數量不小於5的水果
                        var arr1 = this.fruits.filter(function(f) {
                            return f.count >= 5;
                        });
                        console.log(JSON.stringify(arr1));
                        //獲得名稱中含有r的水果
                        var arr2 = this.fruits.filter(function(f) {
                            return f.name.match(/r/igm);
                        });
                        console.log(JSON.stringify(arr2));
                    },
                    forEachMethod: function() {
                        this.fruits.forEach(function(obj, index) {
                            console.log(index + "-" + obj.name + "-" + obj.count);
                        });
                    },
                    mapMethod: function() {
                        var arr3 = this.fruits.map(function(obj, index) {
                            obj.showInfo = index + "->水果：" + obj.name + "，數量：" + obj.count;
                            return obj;
                        });
                        console.log(JSON.stringify(arr3));
                    },
                    reduceMethod: function() {
                        var objs = {};
                        for(var i = 0, l = this.words.length; i < l; i++) {
                            var item = this.words[i];
                            objs[item] = (objs[item] + 1) || 1;
                        }
                        console.log(JSON.stringify(objs));

                        var objs2 = this.words.reduce(function(prev, next) {
                            console.log("prev:", JSON.stringify(prev));
                            console.log("next:", JSON.stringify(next));
                            prev[next] = (prev[next] + 1) || 1;
                            return prev;
                        }, {});
                        console.log(JSON.stringify(objs2));
                    }
                }
            });
        </script>
    </body>

</html>

結果：

結果

4.6、VUE UI框架

4.6.1、移動端

1. vonic 一個基於 vue.js 和 ionic 樣式的 UI 框架，用於快速構建移動端單頁應用，很簡約，是我喜歡的風格 star 2.3k

中文文檔在線預覽

2.vux 基於WeUI和Vue(2.x)開發的移動端UI組件庫 star 10k

基於webpack+vue-loader+vux可以快速開發移動端頁面，配合vux-loader方便你在WeUI的基礎上定制需要的樣式。

中文文檔在線預覽

3.Mint UI 由餓了么前端團隊推出的 Mint UI 是一個基於 Vue.js 的移動端組件庫 star 8.3k

中文文檔 github地址在線預覽

4.MUI 最接近原生APP體驗的高性能前端框架 star 7.5k

中文文檔 github地址

5.Muse-ui 基於 Vue 2.0 和 Material Design 的 UI 組件庫 star 4.9k

中文文檔 github地址

6.Vant是有贊前端團隊基於有贊統一的規范實現的 Vue 組件庫，提供了一整套 UI 基礎組件和業務組件。star 1k

中文文檔 github地址

7.Cube UI star 3k

滴滴 WebApp 團隊實現的基於 Vue.js 實現的精致移動端組件庫

github地址中文文檔

特性

質量可靠

由滴滴內部組件庫精簡提煉而來，經歷了業務一年多的考驗，並且每個組件都有充分單元測試，為后續集成提供保障。
體驗極致

以迅速響應、動畫流暢、接近原生為目標，在交互體驗方面追求極致。
標准規范

遵循統一的設計交互標准，高度還原設計效果；接口標准化，統一規范使用方式，開發更加簡單高效。
擴展性強

支持按需引入和后編譯，輕量靈活；擴展性強，可以方便地基於現有組件實現二次開發

4.6.2、PC端

1）Element 餓了么 vue 2.0后台UI框架 (Star:18382)

https://github.com/ElemeFE/element

（2）iview組件庫 (Star:10186)

iView 主要服務於 PC 界面的中后台業務，很優秀的組件庫，可惜不適合移動端
https://github.com/iview/iview
https://iviewui.com/

（3）vux 基於Vue和WeUI的移動UI組件 (Star:9762)
Vux是基於WeUI和Vue(2.x)開發的移動端UI組件庫，主要服務於微信頁面。
https://github.com/airyland/vux
https://vux.li/

（4）Mint-UI 餓了么移動端組件庫 (Star:8062)
由餓了么前端團隊推出的 Mint UI 是一個基於 Vue.js 的移動端組件庫
https://github.com/ElemeFE/mint-ui

（5）vue-admin 管理面板UI框架 (Star:6289)
https://github.com/vue-bulma/vue-admin

（6）vue-material為 Vue.js 打造的 Material 風格的組件 (Star:4550)
https://github.com/vuematerial/vue-material
https://vuematerial.github.io/#/

（7）vue-strap基於 Vue.js 的 Bootstrap 組件 (Star:4400)
https://github.com/yuche/vue-strap
http://yuche.github.io/vue-strap/

（8）KeenUI 基於Material Design的UI (Star:3041)
https://josephuspaye.github.io/Keen-UI/

（9）vonic (Star:2276)
https://github.com/wangdahoo/vonic/
https://wangdahoo.github.io/vonic/docs/#/

（10）Radon-ui awe大神最近寫的一套UI (Star:791)
https://github.com/luojilab/radon-ui

（11）N3-components 基於N3ui (Star:781)
https://github.com/N3-components/N3-components

（12）vue-carbon (Star:739)
https://github.com/myronliu347/vue-carbon

4.7、數制轉換

JS中，通過利用js方法，可以很方便的實現2,8,10,16進制之間的相互轉換

1、2,8,16進制格式的數據轉換到10進制數據

var num=parseInt(arg1,arg2);

第一個參數就是需要轉換為10進制的數，arg2就是被轉換數據的進制值，可以是2,8,16等。

如：將十六進制的數‘d9’轉為十進制數：

var num=parseInt(d9,16);//num=217

2、將10進制格式的數據轉為2,8,16進制格式數據

var num=parseInt(“217”);//如果這個數是字符串格式的，需要執行這一步
var oxNum=num.toString(16);//參數可以是2,8,16.設置轉換10進制數據到對應進制格式，本例是將num轉成16進制數據 oxNum=d9

3、2,8,10,16任意進制之間轉化

通過10進制作為媒介，便可以實現任意進制之間相互轉化了

五、示例下載

https://git.coding.net/zhangguo5/vue2.git

小紅書項目要求：

http://www.cnblogs.com/xsblog/p/8144290.html

六、視頻

https://www.bilibili.com/video/av17503637/

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 02 . Vue入門基礎之條件渲染,列表渲染,事件處理器,表單控件綁定 react事件處理條件渲染列表循環 Vue 方法與事件處理器 Vue 方法與事件處理器 Vue - 條件渲染與列表渲染 Vue——條件渲染&列表渲染 25-React事件處理及條件渲染 ArkUI 數據綁定、列表渲染、事件處理 Vue樣式綁定和事件處理器 Vue進階之事件處理器

前端MVC Vue2學習總結（四）——條件渲染、列表渲染、事件處理器

一、條件渲染

1.1、v-if

1.1.1、template v-if

1.1.2、v-else

1.1.3、v-else-if

1.1.4、用 key 管理可復用的元素

1.1.5、v-show

1.2、v-if vs. v-show

二、列表渲染

2.1、v-for

基本用法

2.1.1、Template v-for

2.1.2、對象迭代 v-for

2.1.3、整數迭代 v-for

2.1.4、組件 和 v-for

2.2、key

2.3、數組更新檢測

2.3.1、變異方法

2.3.2、重塑數組

2.3.3、觸發數組狀態更新

2.4、對象更改檢測注意事項

2.5、顯示過濾/排序結果

三、事件處理器

3.1、監聽事件

3.2、方法事件處理器

3.3、內聯處理器方法

3.4、事件修飾符

3.5、按鍵修飾符

3.6、為什么在 HTML 中監聽事件?

四、ES2015新增數組方法

4.1、indexOf()找到的元素位置

4.2、filter()過濾

4.3、forEach()迭代

4.4、map()映射

4.5、reduce()累加器

4.6、VUE UI框架

4.6.1、移動端

4.6.2、PC端

4.7、數制轉換

五、示例下載

六、視頻

免責聲明！

`1.1.3、v-else-if`

1.1.4、用 `key` 管理可復用的元素

`2.1、v-for`

2.1.4、組件和 v-for