Vue学习笔记-Day3 - vue列表渲染、事件监听、表单绑定

Day3 - vue列表渲染、事件监听、表单绑定

列表渲染

1 基本使用

使用v-for进行循环渲染

 	<ul>
        <li v-for="(item,index) in books">
          <!-- {{index}}-{{item.name}}<br> -->
          <span v-for="(value,name,index) in item">
            {{value}} - {{name}} - {{index}}
          </span>
        </li>
      </ul>

v-for可以遍历数组，也可以遍历对象，并且可以有多个参数，当遍历数组时多用的两个参数分别为 ： 对象、索引（这是因为我此处遍历的对象数组）。当遍历对象的时候，有三个参数可选分别为：值，属性名，索引，值得注意的是 由于对象是无序的，所以在不同的Javascript引擎下，遍历出来的先后顺序可能是不一样的。

2 检测更新

当vue在更新使用v-for渲染元素列表的时候，他默认的使用的是‘就地更新’策略，什么是就地更新策略呢？

比如我们需要插入一个f元素，那么Vue的操作就是这样的，将 原来的 b 更新为 f，将 c 更新为 b，将 d 更改为 c ，依次类推下去，然后再插入一个新元素赋值为d，这样vue就会尽可能多的复用元素，减少动态元素。

那么如果不想要复用元素，而直接进行重新排列元素的顺序呢？那么可以通过使用 key，vue会根据key的顺序变化重新进行排序，并且移除key不存在的元素。需要注意的尽量不要使用非基本类型作为key的值，尽量使用字符串或者数值类型的值

 	<ul>
        <li v-for="(item,index) in books" :key="item.name">
          {{index}}-{{item.name}}<br>
        </li>
      </ul>

3 数组的响应方法

Vue对侦听数组的编译方法进行了包裹，所以调用这些方法的时候，也会触发视图更新，即响应式方法：

push()

pop()

shift() //再头插入

unshift()//删除头

splice()//可以传多个参数，一个表示开始位置，第二个表示需要操作的元素个数，第三个以及后面的，作为需要插入的元素，splice可以用来删除、替换元素，是一个很方便的函数

sort()//对数组进排序

reverse()//反转元素

---

非响应式方法：这些方法都不会改变原数组的值，会生成一个新数组

filter()//过滤数组中的元素

concat()//合并两个数组

slice()//截取数组中的元素，两个参数 start、end。end是可选的，如果start为负数，则从尾部截取

---

注意:

直接使用下标去更新数组的元素不会触发视图变更：例如：vm.items[0] = newValue

修改数组长度的时候也不会：例如：vm.items.length = newLength

替换方法：

vm.$set(vm.item,index,newValue)

vm.item.splice(index,1,newValue);

vm.items.splice(newLength)

事件监听

1 v-on 监听dom

<button v-on:click="changePrice"></button>
<button @click="changePrice"></button>//v-on语法糖为@

这里补充一下关于v-on的参数传递：

 <button v-on:click.stop="havenotProperty">不带参数例子</button>
 <button v-on:click.stop="haveProperty">带参数例子</button>
 <button v-on:click.stop="haveProperty()">带参数括号例子</button>
 <button v-on:click.stop="haveProperty($event)">带参数括号例子</button>  

  havenotProperty(){
  },
  haveProperty(val){
       console.log(val);
  },

不带参数的函数在调用的时候，可以省略括号

带参数的函数，如果省略括号，默认传的是vue生成的event对象作为参数，如果带括号的但是不传参数，则显示undefined，还有一种情况就是将event对象作为参数传递，则直接使用$event

2 事件修饰符

.stop 阻止事件冒泡

.pervent 组织默认事件

.native 监听组件的原生事件

.passive 默认行为立即被触发

 <div v-on:click.stop="changePrice"></div>

3 按键修饰符

.enter

.tab

.delete

.esc等等

4系统修饰符

.ctrl .alt .shift .meta(windows键)

.exact //精确控制符，只能输入某个键触发，输入多的行 ，例如： 监听enter键，那么输入enter+c不行

鼠标修饰符：

.left .right .middle

表单输入绑定

1 使用v-model进行数据的双向绑定

 <!-- 简化后，直接使用v-model进行双向绑定 -->
      <label>v-model双向绑定</label>
      <input type="text" v-model="name">
      {{name}}
      <br>
 <!-- 简化前，使用v-bind绑定name参数到input，再使用v-on监听input的输入事件，并在输入事件中将输入值赋值给name参数 -->
      <label>双向绑定原理</label>
      <input type="text" :value="lname" v-on:input="valChange">
      {{lname}}
      
 methods:{
   valChange(val){
      this.lname = val.target.value;
   },
 }

一个v-model相当于是 v-bind和v-on的组合，最终实现的效果是一样的

2 常用表单组件的实现

 <!-- 实现单选按钮 -->
      <input type="radio" v-model="sex" value="男">男
      <input type="radio" v-model="sex" value="女">女
      {{sex}}
      <br>
      <!-- 实现复选框的单选按钮 -->
      <input type="checkbox" v-model="agreement">是否同意协议
      {{agreement}}
      <br>
      <!-- 实现复选框的多选按钮 -->
      <input type="checkbox" value="篮球" v-model="sports">篮球
      <input type="checkbox" value="乒乓球" v-model="sports">乒乓球
      <input type="checkbox" value="羽毛球" v-model="sports">羽毛球
      {{sports}}
      <br>
      <!-- 实现选择框单选 -->
      <label>你喜欢运动吗？</label>
      <select v-model="homework">
        <option v-for="item in chooseOptions" :value="item">{{item}}</option>
      </select>
      {{homework}}
      <br>
       <!-- 实现选择框多选 -->
       <label>你喜环吃什么？</label>
       <select v-model="foods" multiple>
        <option v-for="item in foodsOptions" :value="item">{{item}}</option>
      </select>
      {{foods}}


//data中定义数据
	data:{
          sex:'男',
          agreement: false,
          sports:[],
          homework:"",
          foods:[],
          foodsOptions:["苹果",'香蕉','梨子','柑橘'],
          chooseOptions:['是','否'],
        },

3 修饰符

.lazy // 对于input框的值不进行实时同步，等输入完成后触发enter等再同步

.number //类型为数字

.trim //去掉前后空格