2020-08-10

Vue中v-on指令的使用

v-on：绑定事件

• v-on ：click 实现dom的点击事件
• v-on ： keyup 鼠标事件
• v-on ： mouseover 键盘事件

v-on : 修饰符

• .stop 阻止事件
• .prevent 取消事件的默认行为
• .once 事件只触发一次
• .self 只能在自身上面触发

Vue中v-for指令的使用

• 用来遍历数组 ：v-for = “（item，index） in arr”
  item代表数组的每一项，index代表所遍历的下标，从0开始

<div id="app">    
        <ul>
            <li v-for='(item,index) in arr'>{{index+1}} 、 {{item}}</li>
        </ul>
    </div>
   
    <script src="./base/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                arr:['苹果','香蕉','橘子']
            }
        })
    </script>

• 用来遍历对象： v-for = “（value，key，index）in arr”
  value代表对象的值，key代表对象的键值，index代表下标

  <div id="app">
        <p v-for='(value,key,index) in animal'>{{index+1}}、{{key}} : {{value}} </p>
    </div>
    <script src="./base/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                animal:{
                    name:"二狗",
                    sex:"公",
                    age:10
                }
            }
        })
    </script>

• v-for-template（如果要进行多标签的循环，并且不想额外形成新的标签，在这些标签的外面套上template）

<template v-for='item in 3'>
            <div>我是div哦..</div>
            <p>我是p哦..</p>
 </template>
 注意：一定要写在Vue挂载点上

• v-for-arr （Vue将被侦听的数组的变更方法进行了包裹，所以他们也将会触发试图更新。这些被包裹的方法如下）

push（） 从数组的尾部追加一个元素
pop（） 从数组的尾部删除一个元素
shift（） 从数组的头部删除一个元素
UNshift（）从数组的头部添加一个元素
splice（） 数组的剪贴、插入、删除等操作
sort（） 数组的排序
reserve（）数组的反转

• Vue.set( target, propertyName/index, value )
  当数据改变，视图不更新，采用Vue.set解决

<div id="app">
       <ul>
           <li v-for="item in arr">{{item}}</li>
       </ul>
       <p v-for="item in user">{{item}}</p>
 </div> 


 var vm = new Vue({
            el:"#app",
            data:{
                arr:[1,2,3,4,5],
                user:{
                    name:"张三"
                }
            }
        })

（1）vm.arr[0] = 10 会发现数据改变了，但是视图不变？如何解决？
1）vm.arr.splice(0,1,10)//利用数组的splice方法
2）Vue.set(vm.arr,0,10) //很重要！！（谨记：当数据改变了，试图不更新，采用api方法？）
this.$set() //局部的，用在Vue实例中。这里是引用

（2）vm.arr.length = 2
vm.arr.splice(2) //只能通过这种方法

（3） 动态给对象添加属性
vm.user.name = ‘李四’ 是ok的 ，因为数据初始化的时候就被vue进行管理了
但是 vm.user.age = 20 发现不行！原因是因为动态添加的数据没有被vue进行管理，就是没有get与set
通过 Vue.set(vm.user,age,20) //这种情况，就可以利用Vue.set来解决啦！！！