vue基础-3

10、常见的表单修饰符有哪些，并说明其作用

• .number 转数字，以parseFloat转成数字类型

• .trim 去除首尾空白字符

• .lazy 在change时触发而非input时触发

11、v-model使用在单选和多选控件上面需要注意什么

单选框/按钮 （1）单独使用 绑定的是 value属性 单选按钮在单独使用时，官方文档标明不需要 v-model ，可以直接使用 v-bind 绑定布尔类型为true选中，为false时不选。 但不推荐使用v-bind进行绑定，建议用 v-model 配合 value 使用

(2）组合使用 如果是组合使用来实现互斥选择效果。数据 profession值与单选按钮的 value 值一致时，就会选中该项

多选框:

在checkbox使用 v-model 时 分为数组和非数字两个情况

绑定是数组类型,则绑定的是 value属性

绑定是非数组类型,绑定的就是 checked属性, 值就是布尔值

12、v-if和v-for可以放一起？为什么？

原则上可以放在一起使用,因为v-for优先级更高,在一起使用,会导致所有元素渲染一次后,挨个判断是否要渲染,浪费性能

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中

所以，不推荐v-if和v-for同时使用

解决方案有两种:

1. 把 v-if 放在 v-for 的外层

 <ul v-if>
     <li v-for> 123 </li>
 </ul>

2.把需要 v-for 的值先在计算属性中过滤一次

13、v-for如何更新DOM

vue会 就地对比 同级别，同位置的虚拟dom，复用旧的dom结构，进行差异化更新，让更新变得更高效

14、什么是虚拟DOM，他的好处

就是描述真实dom结构的js对象 采用虚拟dom是因为，真实dom是一个树形结构有很多属性，但有的属性我们不需要使用。一个个遍历寻找真实dom非常耗费时间。 因此使用虚拟dom，可以用最少的属性来描述真实dom，提高对比性能

15、vue中如何操作样式？

:class = "对象/数组" 设置class 类名

:class = "{类名:布尔值}" :class = "[类名1:类名2]"

:style = "对象/数组" 设置style标签的行内样式

:style= "{css样式名/css样式值}"

16、过滤器的作用是什么，如何定义过滤器，如何使用过滤器

• 【是什么】：过滤器本质上来说是一个方法，可以对模板中的数据进行加工处理。【怎么用】：可以通过 Vue.filter 全局注册一个过滤器，或者组件内通过 filters 进行局部注册。

• 【场景】：例如我们经常需要对后端返回的日期处理成符合我们需要的格式，这个时候就可以用到过滤器。

• 【注意点】：Vue3 删除了过滤器，可以用方法替代。

• vue中的过滤器可以用在两个地方：双花括号插值和 v-bind 表达式，过滤器应该被添加在 JavaScript表达式的尾部，由“管道”符号指示：

•  <!-- 在双花括号中 -->
   {{ message | capitalize }}
   ​
   <!-- 在 `v-bind` 中 -->
   <div v-bind:id="rawId | formatId"></div>

17、计算属性的作用是什么？如何定义一个计算属性

本质上 是一个 function 函数 ， 实时监听 data 中数据的变化，并 return 一个计算后的新值， 供组件渲染 DOM结果 时使用。

 computed:{
     "计算属性名"(){
     return 值
     }
 }
 computed:{
     "计算属性名"{
         get(){
             return 值
         },
         set(){
             return 值
         }
     }
 }

18、侦听器的作用是什么？如何定义一个侦听器

可以侦听到 data/computed 属性值的改变

 watch:{
     "被侦听的属性名"(newVal,oldVal){
     
     }
 }
 watch:{
     "被侦听的属性名"{
         handler(newVal,oldVal){
         
         }, 
         deep: true,
         immediate: true
     }
 }

19、计算属性和侦听器有什么区别？

相似之处:

都可以监听到数据的变化,计算属性是依赖数据计算得出的值,依赖的数据的变化,会自动重新计算

区别:

computed是计算属性,基于依赖项的值进行缓存,可以直接使用,不能和data同名,不能进行异步操作,必须调用return

侦听器,监听data/computed中数据的变化,必须和要监听的数据同名,不需要返回值,没有缓存,可以进行异步操作

20、计算属性和methods有什么区别？

1、计算属性和methods的执行结果都是相同的

2、当计算属性没有依赖data中的数据时，第一次使用计算属性时，会把第一次的结果进行缓存，后面再次使用计算属性，都会去第一次的结果中进行查找

3、methods方法，每调用一次，就会触发一次

4、计算属性的用法与data中的数据用法一样，因此计算属性在使用时，不加 ( )

5、methods方法在调用时，( ) 可加可不加

6、计算属性具有缓存功能，methods方法没有,从性能上来讲 计算属性更具有优势

7.计算属性是一个属性 必须要有返回值 methods不一定

1、组件通讯的两种方式？

(1) 父传子

父组件给子组件传值, 明确父和子

在父组件中引入子组件(被引入的组件是子组件)

语法:

①父组件中 通过子组件加属性进行传值,属性名自己定义

 <son :price = "100"></son>

②子组件中 通过props 属性接收

 export default{
     props:["price"]
 }
 export default{
     props:{
         price:{
             type: Number, //类型
             required: true //必选项
         }
     }
 }

(2) 子传父

①子组件中恰当的时机,通过 this.$emit("事件名",传入参数...) 触发父事件绑定的自定义事件,进行传参

<input @click="hdel(item.id)" />
 export default{
     methods:{
         hdel(id){
             this.$emit('del',id)
         }       
     }
 }

②父组件给子组件注册对应的自定义事件 @自定义事件名="父组件 methods 函数名",并提供对应的函数,接收参数

 <product @del="delTask" ></product>
 export default{
     methods:{
         delTask(id){
             console.log(id)
         }       
     }
 }