学习列表

初学Vue(一)-- Vue简单入门

初学vue(三)-- 生命周期、过滤器、监听属性、计算属性

初学vue(四)-- axios前后端交互、组件

初学vue(五)-- 路由


一:v-for中的key

  • 说明 :

    • Vue 中推荐, 在使用 v-for 的时候,添加 key 属性
看官网
  • 介绍 就地复用
<!-- 显示组件 -->
<p v-for="(item,index) in list" :key="index">
    {{ item.name}} <input type="text" />
</p>
<!-- 数据 -->
data: { list : [ 
            { id : 1, name : '张三' },
            { id : 2, name : '李四' }, 
            { id : 3, name : '赵五' } 
            ]}

<!-- 演示  -->
vm.list.unshift({id:4,name:'老王'})
  • 怎么使用 key

    • 如果数组的元素是一个对象 : 使用对象里固定属性,唯一
    • 一般情况下,对象里都有 id, 99%都是取 item.id
    • 如果数组的元素是一个简单类型,不是一个对象, 就可以取索引作为 key
    • 语法 : :key='item.id'
    • 以后,写了v-for之后,立马写好 :key

二:事件修饰符

常用

  • .stop 阻止事件冒泡
  • .prevent 阻止默认行为

不常用

  • .capture 捕获
  • .self 只有点击自己才会 触发
  • .once 只会触发一次
  • .passive 提高移动端性能
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

三 : 按键修饰符

记住 keyCode 太麻烦了
  1. 只有在键盘事件中生活效, (keydown keypress keyup)
  2. 语法 : @keyup.enter='事件函数'
    .enter 就是一个按键修饰符,意思就是当按回车的时候,事件才会被触发
  3. @keyup.13 也可以,但是 keyCode 也是要记住的

四 : 条件渲染:v-if 和 v-show

  1. 代码
  2. <h1 v-if='isShow'>我是h1 v-if</h1>
    
    <h1 v-show='isShow'>我是h1 v-show</h1>
  3. 异同点
  4. v-if 和 v-show 的异同点
    
    1. 相同点 : 可以切换元素的显示与隐藏
    
    2. 不同点 : 切换显示和隐藏的实现不同
    
        v-if :  显示:创建节点  隐藏: 删除节点
    
        v-show : 显示: display:block  隐藏 : display:none
    
    3. 使用场景 :
    
        v-if因为要不断的创建和删除来切换显示与隐藏 ,所以性能不高
    
        v-if : 切换次数不频繁的时候,
    
            v-show : 切换次数频繁的时候
    

    五 : Footer 的显示与隐藏

  5. 直接写
    v-show="todoList.length > 0"
  6. 封装到一个函数里
  7. 组件 : v-show="isFooter()"
  8. // 代码显示
    isFooterShow() {
    
                // 只要 vue里的数据发生了变化, 页面中所有的指令和表达式都会重新计算
    
                // 所以只要文本框里的内容发生改变,.todoName也会发送改变,这里就会不断的打印,,性能不好
    
                console.log('改变了');
        return this.todoList.length > 0
    }
  9. 有问题

    3.1 只要 vue 里的数据发生了变化, 页面中所有的指令和表达式都会重新计算
    3.2 所以只要文本框里的内容发生改变,.todoName 也会发送改变,这里就会不断的打印,,性能不好
    3.3只要数组列表的个数改变才会影响底部的变化, 文本不管内容文字再多都不应该影响底部的变化
    3.4 下面需要 计算属性

六 : 计算属性 computed

计算属性其实就是一个属性
  • 说明 : 计算属性只跟随相关的数据变化而变化 ,解决底部显示隐藏问题,
  • 怎么使用?

    • 在 computed 里面
    • 写起来像一个方法
    • 用起来像一个属性
  • 特点 :

    • 计算属性一定要有返回值, 返回的值,就会标签要展示的内容
    • 计算属性可以使用data里之前已知的值
    • (重要) 只要 计算属性 相关的数据 发生了变化,计算属性会 重新计算
    • (说一下 :) num1就是totalNum计算属性的相关属性,所以num1变了,计算属性会重新计算,

      ​ 但是num2不是相关的属性,所以不管你num2怎么变,计算属性都不会重新计算

  • 注意点 :

    • 4.1. 一定要有返回值
    • 4.2. 用起来的时候,不能当方法用,因为它本来就是一个属性
    • 4.3. 计算属性(computed里面的属性) 不能和 data里的属性重名
  • 什么时候使用 计算属性?

    • 根据已知的值,得到一个新值
    • 并且 , 新值只想跟相关的数据(已知的值)的变化而变化 (实时更新)
  • 案例 : 计算器
num1 <input type="text" v-model="num1" /> + 
num2 <input type="text" v-model="num2" /> = <span>{{ num3 }}</span>
      <hr />
<input type="text" v-model="test" />

七 : 其他指令 v-else-if 和 v-else

  1. v-else : 两种情况的
<h1 v-if="num > 40">第一个</h1>
<h1 v-else>第三个</h1>
  1. v-else-if : 三种以上情况
<h1 v-if="num >= 40">第一个</h1>
<h1 v-else-if="num >= 30 && num < 40">第二个</h1>
<h1 v-else>第三个</h1>

Bill
163 声望11 粉丝

职业:网管