ECMAScript前者MVC 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>

结果:

ECMAScript 1

切换

ECMAScript 2

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

 

结果:

ECMAScript 3

ECMAScript 4

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>

 

结果:

ECMAScript 5

点击邮箱登录

ECMAScript 6

这般吧不连续符合实际需求,所以 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 属性。

ECMAScript 7

1.1.5、v-show

其他一个冲规则显得元素的选择是 v-show 指令。用法大体上同样:

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

差的凡起 v-show 的素会始终渲染并保持在 DOM
中。v-show 是简单的切换元素的 CSS 属性 display 。

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

ECMAScript 8

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

结果:

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

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>
  {{ n }}
</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>

                {{n}} - 

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

结果:

ECMAScript 9

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>

结果:

ECMAScript 10

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>

结果:

ECMAScript 11

假如原先数组发生了转则View也会见另行渲染,如果原数组未发生变化只是读取后归来了新的数组对象则非会见渲染。

2.3.3、触发数组状态更新

出于 JavaScript 的克, Vue 不克检测以下改变的数组:

  1. 当您一直装一个桩的目录时,例如: vm.items[indexOfItem] = newValue
  2. 当您改改数组的长度时,例如: 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)

示例:

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

结果:

ECMAScript 12

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>

结果:

ECMAScript 13

注意:

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

                    {{n}}

            </p>
            <p>

                    {{n}}
                </p>
            <p>

                    {{n}}
                </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>

 

结果:

ECMAScript 14

法定原文:  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
  }
})

结果:

增加 1

以此按钮被点击了 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>

 

结果:

ECMAScript 15

 

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)
    }
  }
})

结果:

Say hi

 

Say what

有时候也要在内联语句子处理器中访问原生 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





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 有几乎独好处:

  1. 扫一眼 HTML 模板就能够轻轻松松定位在 JavaScript 代码里对应之点子。

  2. 坐您绝不在 JavaScript 里手动绑定事件,你的 ViewModel
    代码可以是雅纯粹的逻辑,和 DOM 完全解耦,更易测试。

  3. 当一个 ViewModel
    被销毁时,所有的事件处理器都会活动为剔除。你不要担心如何团结清理它们。

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

季、ES2015初添数组方法

ECMAScript2015受新增了9单主意,分别是:

  1. Array.prototype.indexOf
  2. Array.prototype.lastIndexOf
  3. Array.prototype.every
  4. Array.prototype.some
  5. Array.prototype.forEach
  6. Array.prototype.map
  7. Array.prototype.filter
  8. Array.prototype.reduce
  9. 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">

                    {{n}} 

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

结果:

ECMAScript 16

结果

ECMAScript 17

五、示例下载

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

小红书项目要求:

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

六、视频

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