Vuejs02--单数据、多数据v-for、事件监听--点击事件

语法

{{属性值|方法}}—Mustache语法（双大括号）

• 变量
  {{a}}
• 表达式：
  {{a+b}} 即为{{a}}{{b}}
  {{a*2}}

Vue实例时候，传入对象的options
el:
类型：string\HTMLElement
作用：决定之后Vue实例会管理那个DOM
data:
类型 Object\Function(组件当中data必须是一个函数)
作用：Vue实例对应的数据对象
methods:
类型：{[key:stirng:Function]}
作用： 定义Vue的一些方法，可以在其他地方调用，也可以在指令中调用

单数据：

<div id="app">
    {{messgae}}
</div>
</body>
<script>

/*
特点：数据和元素分离
 以前：命令式编程
  现在 ：声明式编程  
*/
  const app=new Vue({
      el:"#app",    // 挂载需要管理的元素--将数据和元素做关联
      data:{       //  绑定数据
        messgae:'测试APP'
      }
  })

    </script>

v-for：

一、遍历数组
v-for 循环遍历数组，（item,index） in books --item为循环时取出每一个元素
item 遍历出的每个对象(名称自定义)
index 下标值
books 所需要遍历的数据

二、遍历对象
v-for 循环遍历对象，item in person–item为循环时取出每一个元素
item 遍历出的每个对象的属性value(名称自定义)。
person 所需要遍历对象。

key：对象的value(属性值)
value：对象的key(属性名称)
三、for循环中的key
官方推荐在使用时加入：key属性
为何需要加入key?
这其实和Vue的虚拟DOM的diff算法有关
当在数组A、B、C、D、E中在B后面插入元素
当无key时 B 后面插入元素F，则C更新为F。D更新为C 。最后在插入E
当有key时，则只需直接插入F接口，不会在发生更新。这样效率更高
key的作用主要是为了高效的更新虚拟DOM

  <div v-for="item in person" :key="item">{{item}}</div>
  <div v-for="(value,key) in person">{{item}}</div>

四、加强for循环

item:数组中的每个元素
 for(let item of this.books)
 index:数组中的下标
 for(let index in this.books)

事件监听–点击事件(click)

1、定义属性 methods
在methods 中定义方法，this 当前对象
2、两种方式添加

• ①v-on:click=“方法名”

• ②语法糖（简写）：@click

div id="app" >
  {{counter}}
  <button v-on:click="add">+</button>
  <button @click="subtr">-</button>
</div>
</body>
<script>
const app=new Vue({
  el:'#app',
  data:{
    counter:0,
    books:[
        '测试1','测试2','测试3','测试4'
    ]
  },
  methods:{
      add:function(){
        this.counter++
      },
      subtract:function(){
        this.counter--
      }
  }
})
    </script>

v-on 参数问题

• 无参数时，调用时方法名加不加括号无所谓，有参数时则需要括号来传递参数。
• event参数对象
  • 无括号：方法直接制定参数即可拿到event事件对象
  • 有括号：$event来传递参数。只单纯的传递event则Vue解析时会认为此为变量而非浏览器生成的event对象

 <button v-on:click="add(1111,$event)">按钮</button>

事件监听修饰符
使用：v-on:click@click+.修饰符
.stop：阻止事件冒泡向上传递。**
无.stop则会执行add、divClick方法。
有.stop则只执行add方法

div id="app" @click="divClick">
  {{counter}}
  <button v-on:click.stop="add(1111,$event)">+</button>

.prevent：阻止其默认事件

  <input type="submit" value="sumbit" @click.prevent.stop="mySubmit">

.keyCode|keyAlias ：对键盘的监听
.native:监听根元素的原生事件
.once:只触发一次