Vue计算属性、事件监听、条件判断、循环遍历、v-model和组件化回顾

一.计算属性

1.1. 计算属性的本质

• fullname: {set().get()} 一般不写set，所以看起来像函数

1.2. 计算属性和methods对比

• 计算属性多次使用时，只会调用一次。
• 它是有缓存的

二.事件监听

2.1. 事件监听基本使用

v-on、语法糖：@

2.2. 参数问题

• 如果监听事件时不需要传参数可以省略小括号btnClick
• btnClick(event),使用时省略了小括号，但是在方法中默认传入了参数event
• 如果既需要参数有需要event，btnClick(abc,event)->需要在传递的时候用$event拿到浏览器参数的event对象

2.3. 修饰符

• .stop 阻止冒泡
• .prevent 阻止默认事件
• .enter 监听某个键盘的键帽
• .once 只触发一次回调事件
• .native

三.条件判断

3.1. v-if/v-else-if/v-else

3.2. 登录小案例

有一个小问题，写key防止input复用

3.3. v-show

• v-show和v-if区别
  • 决定标签到底存不存在，为false时，v-if执行的是创建删除操作，而v-show是给元素增添行内样式：display: none;

四.循环遍历

4.1. 遍历数组

有索引值和没有索引值

没有索引值：v-for="item in array"

有索引值：v-for="(item,index) in array"

4.2. 遍历对象

• value v-for="item in object"

• value，key v-for="(value, key) in object"

• value，key，index v-for="(value, key, index) in object"

  选择要不要加key，加key的话可以更高效的更新虚拟DOM

  <li v-for="item in letters" :key="item">{{item}}</li>
  

4.3. 数组哪些方法是响应式的

• push() 从数组的最后添加元素（可添加多个元素）
• pop() 删除数组的最后一个元素
• shift() 删除数组中的第一个元素
• unshift() 在数组最前面添加元素
• splice() 删除元素/插入元素/替换元素
• sort() 排序 可以传参数、函数
• reverse() 反转
• 通过索引值修改数组中的元素
  • this.letters[0]='bbb'; // 非响应式的 如果要响应式的话用替换方法
  • splice方法 this.letters.splice(0,1,'bbb');
  • set(要修改的对象, 索引值, 修改后的值) Vue内部实现的函数
    Vue.set(this.letters, 0, 'bbb');
• 可变参数
  • function f(...nums) {}

五.书籍案例

六.v-model的使用

6.1. v-model的基本使用

• v-model=>v-bind:value+v-on:input

6.2. v-model和radio/checkbox/select结合使用

双向绑定

6.3. 修饰符

• lazy
• number
• trim

七.组件化开发

7.1. 认识组件化

7.2. 组件的基本使用

7.3. 全局组件和局部组件

7.4. 父组件和子组件

7.5. 注册的语法糖

7.6. 模板的分离写法

• script
• template

7.7. 数据的存放

• 子组件不能直接访问父组件
• 子组件中有自己的data，而且必须是一个函数
• 为什么必须是一个函数，因为组件实例直接相互会有影响

7.8. 父子组件的通信

• 父组件向子组件传递 ：props

• 子组件向父组件传递 ：自定义事件$emit

7.9. 项目

• npm install
• npm run serve