on指令学习简单事件绑定之性质,条件渲染

By admin in 4858美高梅 on 2019年3月27日

前言

在JavaScript中别的2个DOM成分都有其自作者存在的轩然大波目的,事件指标表示事件的意况,比如事件在里面发生的要素、键盘按键的状态、鼠标的岗位和鼠标按钮的意况等。事件司空见惯与函数结合使用,函数不会在事件产生前被实施。在JavaScript吉林中国广播公司大的风云句柄(伊夫nt
Handlers)首要有:

属性名 描述(对应事件发生在何时…)
onabort 图像的加载被中断
onchange 域的内容被改变
ondblclick 当用户双击某个对象时调用的事件句柄
onfocus 元素获得焦点
onkeypress 某个键盘按键被按下并松开
onload 一张页面或一幅图像完成加载
onmousemove 鼠标被移动
onmouseover 鼠标移动到某元素之上
onreset 重置按钮被点击
onselect 文本被选中
onunload 用户退出页面
onblur 元素失去焦点
onclick 当用户点击某个对象时调用的事件名柄
onerror 在加载文档或图像时发生错误
onkeydown 某个键盘按键被按下
onkeyup 某个键盘按键被松开
onmousedown 鼠标按钮被按下
onmouseout 鼠标从某个元素移开
onmouseup 鼠标铵键被松开
onsubmit 提交按钮被点击
onresize 窗口或框架被重新调整大小

 

 

 

 

 

 

 

 

 

 

 

 

 

4858美高梅, 

 

 

 

 

 前言

上一篇文章以v-on指令绑定click事件为例介绍了v-on指令的使用格局,本文介绍一下v-on绑定事件的某些个性的应用方法。

壹 、条件渲染

① 、条件渲染

 

v-on绑定指令属性

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

v-on指令

效果:监听 DOM
事件,并在触发时运营一些 JavaScript 代码。

用法:v-on绑定的风浪函数一般都写在methods对象中,使用手续如下:一 、事件绑定,二 、事件达成,③ 、事件触发。

v-on指令无参格局的click事件绑定:

全写代码如下:

4858美高梅 14858美高梅 2

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1">
 5       <button  v-on:click="clickme" >{{msg}}</button>
 6     </div>
 7   </div>
 8 
 9 </template>
10 
11 <script>
12     export default {
13         name: 'v-on',
14       data() {
15           return {
16             msg: '点击我',
17             title: 'v-on指令学习'
18           }
19       },
20       methods:{
21         clickme:function(){
22           alert("hello");
23     }
24       }
25     }
26 </script>
27 
28 <style scoped>
29   .title1 {
30     text-align: left;
31   }
32   .div1{
33     float: left;
34   }
35 </style>

View Code

简写代码如下:

4858美高梅 34858美高梅 4

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1">
 5       <button  @click="clickme" >{{msg}}</button>
 6     </div>
 7   </div>
 8 
 9 </template>
10 
11 <script>
12   export default {
13     name: 'v-on',
14     data() {
15       return {
16         msg: '点击我',
17         title: 'v-on指令学习'
18       }
19     },
20     methods:{
21       clickme(){
22         alert("hello");
23       }
24     }
25   }
26 </script>
27 
28 <style scoped>
29   .title1 {
30     text-align: left;
31   }
32   .div1{
33     float: left;
34   }
35 </style>

View Code

以身作则结果如下:

4858美高梅 5

v-on指令有参格局的click事件绑定:参数的数量和款式可依照实际情况传入,不难代码示例如下:

4858美高梅 64858美高梅 7

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1">
 5       <button  @click="clickme('我是中文参数','woshiyingwencanshu',$event)" >{{msg}}</button>
 6     </div>
 7   </div>
 8 
 9 </template>
10 
11 <script>
12   export default {
13     name: 'v-on',
14     data() {
15       return {
16         msg: '点击我',
17         title: 'v-on指令学习'
18       }
19     },
20     methods:{
21       clickme(msg1,msg2,event){
22        console.log(msg1);
23        console.log(msg2);
24        console.log(event);
25       }
26     }
27   }
28 </script>
29 
30 <style scoped>
31   .title1 {
32     text-align: left;
33   }
34   .div1{
35     float: left;
36   }
37 </style>

View Code

以身作则结果如下:

4858美高梅 8 

小结:v-on能够绑定很多javascript事件,本文仅以click单击事件为例,后续会补充任何事件的使用办法,假若本文有不当和不足之处,欢迎留言建议。

      .stop属性

阻拦单击事件继续前行传播(不难题说就是不让父节点及父节点以上的节点事件触发),本示例借使没有stop属性,父节点和祖父节点事件将会接触,并在支配台出口内容,示例代码和演示结果如下:

4858美高梅 94858美高梅 10

 1  1 <template>
 2  2   <div>
 3  3     <p class="title1">{{title}}</p>
 4  4     <div class="div1">
 5  5       <div v-on:click="clickme0">
 6  6         {{ msg1}}
 7  7         <div v-on:click="clickme">
 8  8           {{msg2}}<br/>
 9  9           {{msg3}}
10 10         </div>
11 11       </div>
12 12     </div>
13 13   </div>
14 14 
15 15 </template>
16 16 
17 17 <script>
18 18   export default {
19 19     name: 'v-on',
20 20     data() {
21 21       return {
22 22         msg1: '我是爷爷节点',
23 23         msg2: '我是父节点',
24 24         msg3: '测试click属性',
25 25         title: 'v-on指令学习'
26 26       }
27 27     },
28 28     methods:{
29 29       clickme0(){
30 30         console.log("我是爷爷节点");
31 31       },
32 32       clickme(){
33 33         console.log("我是父节点");
34 34       },
35 35       clickthis(){
36 36         console.log("不打印父节点事件内容!")
37 37       }
38 38     }
39 39   }
40 40 </script>
41 41 
42 42 <style scoped>
43 43   .title1 {
44 44     text-align: left;
45 45   }
46 46   .div1{
47 47     float: left;
48 48   }
49 49 </style>

View Code

4858美高梅 11

借使添加stop属性,则不会触发父节点和岳父节点事件,不会在支配台出口相应事件始末,示例代码和演示结果如下:

4858美高梅 124858美高梅 13

 1 1 <template>
 2  2   <div>
 3  3     <p class="title1">{{title}}</p>
 4  4     <div class="div1">
 5  5       <div v-on:click="clickme0">
 6  6         {{ msg1}}
 7  7         <div v-on:click="clickme">
 8  8           {{msg2}}<br/>
 9  9           {{msg3}}
10 10         </div>
11 11       </div>
12 12     </div>
13 13   </div>
14 14 
15 15 </template>
16 16 
17 17 <script>
18 18   export default {
19 19     name: 'v-on',
20 20     data() {
21 21       return {
22 22         msg1: '我是爷爷节点',
23 23         msg2: '我是父节点',
24 24         msg3: '测试click属性',
25 25         title: 'v-on指令学习'
26 26       }
27 27     },
28 28     methods:{
29 29       clickme0(){
30 30         console.log("我是爷爷节点");
31 31       },
32 32       clickme(){
33 33         console.log("我是父节点");
34 34       },
35 35       clickthis(){
36 36         console.log("不打印父节点事件内容!")
37 37       }
38 38     }
39 39   }
40 40 </script>
41 41 
42 42 <style scoped>
43 43   .title1 {
44 44     text-align: left;
45 45   }
46 46   .div1{
47 47     float: left;
48 48   }
49 49 </style>

View Code

4858美高梅 14

1.1.1、template v-if

因为 v-if 是一个命令,须求将它添加到1个成分上。可是若是我们想切换八个因素呢?此时我们得以把一个 <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>

结果:

4858美高梅 15

切换

4858美高梅 16

1.1.1、template v-if

因为 v-if 是3个命令,要求将它添加到1个要素上。不过假如大家想切换四个成分呢?此时我们得以把3个 <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>

结果:

4858美高梅 17

切换

4858美高梅 18

.prevent属性

该办法将通告 Web
浏览器不要执行与事件涉及的暗许动作(假若存在这么的动作),注意假诺 伊夫nt
对象的 cancelable 属性是
fasle,那么就没有默许动作,也许不能够拦截暗中认可动作,无论哪一种情形,调用该属性都尚未意义。

简短示例如下,在页面from表单中<input
type=””/> 假若 type 属性是 “submit”

万一没有点名prevent,点击事件自动触发from表单action跳向钦赐的网站,示例代码和实例结果如下:

4858美高梅 194858美高梅 20

 1  <template>
 2      <div>
 3       <p class="title1">{{title}}</p>
 4        <div class="div1">
 5          <form action="http://www.baidu.com" v-on:submit="clickme">
 6           <button type="submit">{{msg}}</button>
 7          </form>
 8          <!--<a href="http://www.baidu.com"   v-on:click.prevent="banclickme">点我去百度</a>-->
 9        </div>
10      </div>
11  </template>
12 
13 <script>
14     export default {
15          name: 'v-on',
16          data() {
17            return {
18                title: 'v-on指令学习',
19              msg: 'form表单默认点击打开百度'
20            }
21          },
22        methods:{
23            clickme(){
24                console.log("页面重新加载了");
25              }
26          // banclickme(){
27          //     console.log("去不了百度吧")
28          // }
29          }
30      }
31    </script>
32 
33  <style scoped>
34     .title1 {
35          text-align: left;
36        }
37   .div1{
38               float: left;
39             }
40 </style>

View Code

4858美高梅 21

on指令学习简单事件绑定之性质,条件渲染。若是内定prevent,点击事件则不会触发from表单action跳向钦定的网站,示例代码和实例结果如下:

4858美高梅 224858美高梅 23

 1  <template>
 2      <div>
 3       <p class="title1">{{title}}</p>
 4        <div class="div1">
 5          <form action="http://www.baidu.com" v-on:submit.prevent="clickme">
 6           <button type="submit">{{msg}}</button>
 7          </form>
 8          <!--<a href="http://www.baidu.com"   v-on:click.prevent="banclickme">点我去百度</a>-->
 9        </div>
10      </div>
11  </template>
12 
13 <script>
14     export default {
15          name: 'v-on',
16          data() {
17            return {
18                title: 'v-on指令学习',
19              msg: 'form表单默认点击打开百度'
20            }
21          },
22        methods:{
23            clickme(){
24                console.log("去不了百度吧");
25              }
26          // banclickme(){
27          //     console.log("去不了百度吧")
28          // }
29          }
30      }
31    </script>
32 
33  <style scoped>
34     .title1 {
35          text-align: left;
36        }
37   .div1{
38               float: left;
39             }
40 </style>

View Code

4858美高梅 24

1.1.2、v-else

可以用 v-else 指令给 v-if 添加1个 “else” 块:

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

v-else 成分必须紧跟在 v-if要素的背后——不然它不能被识别。

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要素的末端——否则它不可能被识别。

 .capture属性

累加风浪监听器时采纳事件捕获方式,即成分本身触发的风浪先在这里处理,然后才交由个中因素实行处理,当点击最尾部成分<div>触发事件时,先物色带有监听器的要素,遵照节点优先级先触发带有该修饰符的成分,然后触发本身事件,最后发生事变冒泡。

本示例中先触发打字与印刷曾外祖父节点,然后触发打字与印刷父节点,然后打字与印刷本人节点,最终触发打印曾祖父节点,示例代码和结果如下:

4858美高梅 254858美高梅 26

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1" v-on:click="click3">
 5       {{msg3}}<br/>
 6       <div class="div1" v-on:click.capture="click2">
 7         {{msg2}}<br/>
 8         <div class="div1" v-on:click.capture="click1">
 9           {{msg1}}<br/>
10           <div v-on:click="click0">{{msg}}</div>
11         </div>
12       </div>
13     </div>
14   </div>
15 </template>
16 
17 <script>
18   export default {
19     name: 'v-on',
20     data() {
21       return {
22         title: 'v-on指令学习',
23         msg: '我是div内部子节点',
24         msg1: '我是div父节点',
25         msg2: '我是div爷爷节点',
26         msg3: '我是div曾祖父节点'
27       }
28     },
29     methods:{
30       click0(){
31         console.log("打印子节点");
32       },
33       click1(){
34           console.log("打印父节点");
35       },
36       click2(){
37         console.log("打印爷爷节点");
38       },
39       click3(){
40         console.log("打印曾祖父节点");
41       }
42     }
43   }
44 </script>
45 
46 <style scoped>
47   .title1 {
48     text-align: left;
49   }
50   .div1{
51     float: left;
52   }
53 </style>

View Code

4858美高梅 27

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>

 

结果:

4858美高梅 28

4858美高梅 29

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>

 

结果:

4858美高梅 30

4858美高梅 31

.self属性

只当在event.target是时下因素自个儿时接触处理函数,即事件不是从内部因素触发的。通俗点说唯有点击成分本身的时候接触事件,当点击父元素触发事件仍旧点击子成分发滋事变冒泡时并不触发成分自个儿事件。
本示例点击父节点依旧子节点时并不打字与印刷自个儿成分事件,示例代码和实例结果如下:

4858美高梅 324858美高梅 33

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1" v-on:click="click3">
 5       {{msg3}}<br/>
 6       <div class="div1" v-on:click.self="click2">
 7         {{msg2}}<br/>
 8         <div class="div1" v-on:click="click1">
 9           {{msg1}}<br/>
10           <div v-on:click="click0">{{msg}}</div>
11         </div>
12       </div>
13     </div>
14   </div>
15 </template>
16 
17 <script>
18   export default {
19     name: 'v-on',
20     data() {
21       return {
22         title: 'v-on指令学习',
23         msg: '我是div内部子节点',
24         msg1: '我是div父节点',
25         msg2: '我是div爷爷节点',
26         msg3: '我是div曾祖父节点'
27       }
28     },
29     methods:{
30       click0(){
31         console.log("打印子节点");
32       },
33       click1(){
34           console.log("打印父节点");
35       },
36       click2(){
37         console.log("打印爷爷节点");
38       },
39       click3(){
40         console.log("打印曾祖父节点");
41       }
42     }
43   }
44 </script>
45 
46 <style scoped>
47   .title1 {
48     text-align: left;
49   }
50   .div1{
51     float: left;
52   }
53 </style>

View Code

4858美高梅 34

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>

 

结果:

4858美高梅 35

点击邮箱登录

4858美高梅 36

如此那般也不一连符合实际供给,所以 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 属性。

4858美高梅 37

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>

 

结果:

4858美高梅 38

点击邮箱登录

4858美高梅 39

那般也不总是符合实际需要,所以 Vue
为你提供了一种艺术来表达“那多个要素是完全部独用立的,不要复用它们”。只需添加3个独具唯一值的 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 属性。

4858美高梅 40

.once属性

点击事件将只会触发3遍,通俗点说就是因素自己事件只好动用3回,第三次点击成分时候并不接触事件,可是不阻止事件冒泡。
本示例中率先次点击时打印子节点和父节点,第三次点击时并不打字与印刷子节点,依然打字与印刷父节点及以上节点,示例代码和实力结果如下:

4858美高梅 414858美高梅 42

 1 <template>
 2   <div>
 3     <p class="title1">{{title}}</p>
 4     <div class="div1" v-on:click="click3">
 5       {{msg3}}<br/>
 6       <div class="div1" v-on:click="click2">
 7         {{msg2}}<br/>
 8         <div class="div1" v-on:click="click1">
 9           {{msg1}}<br/>
10           <div v-on:click.once="click0">{{msg}}</div>
11         </div>
12       </div>
13     </div>
14   </div>
15 </template>
16 
17 <script>
18   export default {
19     name: 'v-on',
20     data() {
21       return {
22         title: 'v-on指令学习',
23         msg: '我是div内部子节点',
24         msg1: '我是div父节点',
25         msg2: '我是div爷爷节点',
26         msg3: '我是div曾祖父节点'
27       }
28     },
29     methods:{
30       click0(){
31         console.log("打印子节点");
32       },
33       click1(){
34           console.log("打印父节点");
35       },
36       click2(){
37         console.log("打印爷爷节点");
38       },
39       click3(){
40         console.log("打印曾祖父节点");
41       }
42     }
43   }
44 </script>
45 
46 <style scoped>
47   .title1 {
48     text-align: left;
49   }
50   .div1{
51     float: left;
52   }
53 </style>

View Code

4858美高梅 43

1.1.5、v-show

另三个基于规则显得元素的选项是 v-show 指令。用法大体上一样:

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

今非昔比的是有 v-show 的要素会一贯渲染并保险在 DOM
中。v-show 是简单的切换元素的 CSS 属性 display 。

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

4858美高梅 44

1.1.5、v-show

另二个遵照标准显得成分的精选是 v-show 指令。用法大体上亦然:

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

今非昔比的是有 v-show 的因素会始终渲染并维持在 DOM
中。v-show 是不难的切换到分的 CSS 属性 display 。

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

4858美高梅 45

.passive属性

滚动事件的暗许行为 (即滚动行为)
将会立马触发,而不会等待onScroll完毕,那其间蕴蓄event.preventDefault()的气象

小结:关于最后壹本性质passive小编也不是很熟稔,借使急需请大家再也查阅资料。

1.2、v-if vs. v-show

v-if 是真实的准绳渲染,因为它会确认保障条件块在切换个中适当地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的:假诺在始发渲染时规格为假,则什么也不做——在标准第三遍成为真时才起来有些编写翻译(编写翻译会被缓存起来)。

比较, v-show 简单得多——成分始终被编写翻译并保存,只是简单地基于 CSS
切换。

相似的话, v-if 有更高的切换消耗而 v-show 有更高的初步渲染消耗。由此,假若必要频仍切换使用 v-show 较好,借使在运作时规格十分小也许改变则应用 v-if 较好。

法定文书档案:

1.2、v-if vs. v-show

v-if 是真实的原则渲染,因为它会有限支撑条件块在切换个中适当地销毁与重建条件块内的事件监听器和子组件。

v-if 也是惰性的:即使在上马渲染时规格为假,则什么也不做——在尺度第二回变成真时才初阶部分编写翻译(编写翻译会被缓存起来)。

对待, v-show 简单得多——成分始终被编写翻译并保留,只是简短地基于 CSS
切换。

貌似的话, v-if 有更高的切换消耗而 v-show 有更高的发端渲染消耗。由此,假诺供给反复切换使用 v-show 较好,若是在运维时规格极小恐怕改变则利用 v-if 较好。

合法文书档案:

② 、列表渲染

二 、列表渲染

2.1、v-for

我们用 v-for 指令依据一组数组的选项列表举行渲染。 v-for 指令须求以item in items 格局的出格语法, items 是源数据数组并且 item 是数组成分迭代的小名。

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

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

着力用法

<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.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 通过3个对象的习性来迭代。

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

结果:

4858美高梅 46

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>

结果:

4858美高梅 47

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>

结果:

4858美高梅 48

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>

结果:

4858美高梅 49

2.2、key

当 Vue.js 用 v-for 正在更新已渲染过的要素列表时,它暗许用 “就地复用”
策略。借使数量项的各种被改成,而不是移动 DOM 元一贯匹配数据项的逐条,
Vue
将简单复用此处每种成分,并且保证它在特定索引下显得已被渲染过的各种成分。那几个类似
Vue 1.x 的track-by="$index" 。

其一私下认可的情势是卓有功效的,可是只适用于不正视子组件状态或暂且 DOM
状态(例如:表单输入值)的列表渲染输出。

为了给 Vue
2个提示,以便它能跟踪种种节点的地位,从而重用和重新排序现有成分,你需求为每项提供二个唯一 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.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.叁 、数组更新检测

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

2.3.一 、变异方法

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

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

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

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() 。这几个不会转移原始数组,但连接回到一个新数组。当使用非变异方法时,能够用新数组替换旧数组:

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>

结果:

4858美高梅 50

若果原数组发生了变更则View也会再度渲染,如若原数组未产生变化只是读取后归来了新的数组对象则不会渲染。

2.3.贰 、重塑数组

多变方法(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>

结果:

4858美高梅 51

假定原数组发生了变通则View也会重新渲染,要是原数组未产生变化只是读取后回去了新的数组对象则不会渲染。

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

结果:

4858美高梅 52

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

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

  1. 当您直接设置3个项的目录时,例如: 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>

结果:

4858美高梅 53

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>

结果:

4858美高梅 54

注意:

一旦data中多少没有被绑定到DOM中,则修改后DOM不会更新,updated与beforeUpdate事件也不会执行(Hook
function)

data
的根成分后参与无效,能够应用Vue.set添英镑素中的属性,这样会变成响应式的分子

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

您能够加上2个新的 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>

结果:

4858美高梅 55

注意:

假设data中多少没有被绑定到DOM中,则修改后DOM不会更新,updated与beforeUpdate事件也不会实施(Hook
function)

data
的根元素后投入无效,能够采纳Vue.set添新币素中的属性,那样会变成响应式的分子

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

神跡,大家想要彰显2个数组的过滤或排序副本,而不实际改变或重置原始数据。在那种状态下,能够创建再次回到过滤或排序数组的计算属性。

例如:

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

 

结果:

4858美高梅 56

合法原来的书文: 

2.⑤ 、显示过滤/排序结果

突发性,我们想要呈现三个数组的过滤或排序副本,而不实际改变或重置原始数据。在那种情形下,能够创制重回过滤或排序数组的总结属性。

例如:

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

 

结果:

4858美高梅 57

官方原版的书文: 

三 、事件处理器

③ 、事件处理器

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.① 、监听事件

可以用 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>

 

结果:

4858美高梅 58

 

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>

 

结果:

4858美高梅 59

 

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
事件。能够用12分变量 $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.叁 、内联处理器方法

除了直接绑定到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.肆 、事件修饰符

在事件处理程序中调用 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.⑤ 、按键修饰符

在监听键盘事件时,大家平日供给监测常见的键值。 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
上,它不会促成别的保险上的紧Baba。实际上,使用 v-on 有多少个好处:

  1. 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的主意。

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

  3. 当一个 ViewModel
    被灭绝时,全数的风云处理器都会活动被删去。你不要担心如何团结清理它们。

原文:

3.陆 、为何在 HTML 中监听事件?

你只怕注意到这种事件监听的方法违背了关切点分离(separation of
concern)守旧理念。不必担心,因为具有的 Vue.js
事件处理方法和表明式都严厉绑定在时下视图的 ViewModel
上,它不会促成别的爱惜上的不便。实际上,使用 v-on 有多少个好处:

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

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

  3. 当叁个 ViewModel
    被销毁时,全体的轩然大波处理器都会自行被去除。你不要担心怎样团结清理它们。

原文:

肆 、ES2016新增数组方法

ECMAScript二〇一五中新增了八个办法,分别是:

  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

肆 、ES二〇一四新增数组方法

ECMAScript2016中新增了九个艺术,分别是:

  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.壹 、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()方法创造3个新的优良过滤条件的数组。
不用 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.2、filter()过滤

该filter()方法创制3个新的特出过滤条件的数组。
不用 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.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()对数组的各样元素进行自然操作(映射)后,会回来3个新的数组

不使用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.4、map()映射

map()对数组的每一个成分进行自然操作(映射)后,会重回3个新的数组

不使用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()是处理服务器再次回到数据时是三个12分实用的函数。

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是第1个因素。不过当您传入起先值(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>

结果:

4858美高梅 60

结果

4858美高梅 61

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是从数组中第1个元素开头的,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>

结果:

4858美高梅 62

结果

4858美高梅 63

⑤ 、示例下载

小红书项目必要:

5、示例下载

小红书项目要求:

六、视频

六、视频

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图
Copyright @ 2010-2019 美高梅手机版4858 版权所有