前者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 是叁个下令,须要将它添加到2个要素上。可是假使我们想切换三个因素呢?此时大家得以把一个 <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

切换

图片 2

1.1.2、v-else

可以用 v-else 指令给 v-if 添加2个 “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>

 

结果:

图片 3

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

 

结果:

图片 5

点击邮箱登录

图片 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 属性。

图片 7

1.1.5、v-show

另3个基于标准显得成分的选项是 v-show 指令。用法大体上亦然:

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

今非昔比的是有 v-show 的成分会始终渲染并保险在 DOM
中。v-show 是不难的切换来分的 CSS 属性 display 。

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

图片 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 还扶助二个可选的第1个参数为当下项的目录。

<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.贰 、对象迭代 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

你也足以提供第3个的参数为键名:

<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.三 、整数迭代 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>

结果:

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

结果:

图片 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 识别节点的1个通用机制, key 并不尤其与 v-for 关联,key
还兼具任何用途,大家将在前边的指南开中学看看任何用途。

2.③ 、数组更新检查和测试

2.3.① 、变异方法

Vue
包涵一组观望数组的多变方法,所以它们也将会触发视图更新。那些措施如下:

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

你打开控制台,然后用后边例子的 items 数组调用突变方法:example1.items.push({ message: 'Baz' }) 。

2.3.② 、重塑数组

多变方法(mutation
method),顾名思义,会变动被那个办法调用的原始数组。比较之下,也有非变异(non-mutating
method)方法,例如: filter()concat()slice() 。这个不会改变原始数组,但接二连三回到2个新数组。当使用非变异方法时,能够用新数组替换旧数组:

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

你也许以为那将造成 Vue 废弃现有 DOM
同仁一视新渲染整个列表。幸运的是,事实并非如此。 Vue
达成了某个智能启发式方法来最大化 DOM
成分重用,所以用三个饱含相同成分的数组去替换原来的数组是11分快捷的操作。

示例:

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

结果:

图片 11

要是原数组发生了扭转则View也会重复渲染,如果原数组未发生变化只是读取后赶回了新的数组对象则不会渲染。

2.3.三 、触发数组状态更新

由于 JavaScript 的限制, Vue 不可能检查和测试以下改变的数组:

  1. 当你一贯设置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>

结果:

图片 12

2.肆 、对象更改检查和测试注意事项

抑或出于 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>

结果:

图片 13

注意:

固然data中数量尚未被绑定到DOM中,则修改后DOM不会更新,updated与beforeUpdate事件也不会实施(Hook
function)

data
的根成分后进入无效,能够动用Vue.set添欧元素中的属性,那样会成为响应式的成员

2.伍 、展现过滤/排序结果

神跡,大家想要展现3个数组的过滤或排序副本,而不实际改变或重置原始数据。在那种气象下,能够创设再次来到过滤或排序数组的测算属性。

例如:

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

 

结果:

图片 14

合法原来的文章:  http://vuejs.org/guide/list.html

叁 、事件处理器

3.壹 、监听事件

可以用 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.二 、方法事件处理器

洋洋事件处理的逻辑都很复杂,所以一贯把 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>

 

结果:

图片 15

 

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.四 、事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是格外广阔的须求。固然我们能够在
methods 中轻松达成那点,但更好的艺术是:methods
唯有纯粹的数码逻辑,而不是去处理 DOM 事件细节。

为了缓解那几个题材, Vue.js
为 v-on 提供了 事件修饰符。通过由点(.)代表的指令后缀来调用修饰符。

  • .stop
  • .prevent
  • .capture
  • .self





3.⑤ 、按键修饰符

在监听键盘事件时,我们平日索要监测常见的键值。 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.⑥ 、为何在 HTML 中监听事件?

你可能注意到这种事件监听的不二法门违背了关切点分离(separation of
concern)传统看法。不必顾虑,因为全体的 Vue.js
事件处理方法和表达式都严俊绑定在最近视图的 ViewModel
上,它不会招致别的保证上的艰辛。实际上,使用 v-on 有多少个便宜:

  1. 扫一眼 HTML 模板便能自在定位在 JavaScript 代码里对应的情势。

  2. 因为您不用在 JavaScript 里手动绑定事件,你的 ViewModel
    代码能够是老大纯粹的逻辑,和 DOM 完全解耦,更便于测试。

  3. 当五个 ViewModel
    被销毁时,全数的事件处理器都会活动被删除。你绝不担心怎么着团结清理它们。

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

四 、ES二零一五新增数组方法

ECMAScript2014中新增了7个章程,分别是:

  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.一 、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()方法成立1个新的同盟过滤条件的数组。
不用 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()能够兑现2个累加器的效能,将数组的各类值(从左到右)将其下跌到一个值。
说实话刚初步知道那句话有点难度,它太肤浅了。
情景: 总括一个数组中有稍许个不重复的单词
不使用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是第3个成分。不过当您传入初步值(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>

结果:

图片 16

结果

图片 17

⑤ 、示例下载

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

小红书项目必要:

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

六、视频

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