vue一些零零散散的知识点总结

一些零零散散的知识点总结

v-for遍历数组，对象，字符串,指定次数

v-if做判断，隐藏(是否存在)

区别:对于元素只是一次可以选择使用v-if(消耗内存 ),操作次数多v-show(并没有销毁元素)

1.在vue2中，v-for优先级比v-if高

在vue3中，v-if优先级比v-for高

2、v-if和v-for不能同时使用

3、同时使用需要在外层嵌套盒子,在外层进行v_if判断， 在内层进行v-for循环

v-if判断和v-show显示隐藏

v-else和v-else-if判断注:使用v-else,v-else-if前必须有v-if

v-text和v-html,插值区别

1.v-text和v-html相同点:都会覆盖文本

不同点: v-text只读取文本，v-html读取标签

2.插值添加值,

注:不要在用提交时使用v-htm,不要在动态渲染时时使用v-html[v-cloak]{

display: none;

解决屏幕闪烁的问题，第一在标签上添加v-cloak,第二需要设置上面样式，是属性是class #是id

不要设置值的指令

v-else,v-cloak,v-once, v-pre

v-once设置了以后，更改值不会发生改变,优化性能v-pre设置了以后，会让插值和指令失效

v-bind:单向数据绑定:只能由data中的数据流向页面

v-mode|双向数据绑定:可以由data中的数据流向页面，也可以由页面(用户输入)流向data

事件修饰符、

1.prevent阻止浏览器默认事件

2.stop阻止冒泡事件

3.once只触发- -次

4.capture捕获模式打乱冒泡顺序(即可以理解为给元素添加一个监听器，当元素发生冒泡时，先触发带有该修饰符的元素。若有多个该修饰符，则由外而内触发

5.self阻止自身事件促发，但不会阻止冒泡，间接性有捕获效果

在冒泡事件中，点击设置了self的子类，坏会触发自身

点击设置了self本身是可以触发的

event.stopPropagation()阻止冒 泡

6.passiv;事件的默认行为立即执行，无需等待事件回调执行完毕;

v-model|修饰符

.lazy失去焦点后提交值

.number有效转换"1"== 1为数字

.trim清除前后空格

注:使用v-model时尽量使用v-model=""不要使用v-model:value=""只有在需要设置初始值才使用v-model:value=""

v-model.number有效转换"1"== 1为数字v-model.lazy失去焦点后提交值

事件:

1.whell鼠标轮滚动时触发但是要先处理完函数再滚动，可与passiv- 起scroll鼠标和滚动条滚动触发，会优先滚动滚动条
2.scroll鼠标和滚动条触发，会优先滚动滚动条

事件的基本使用:
1.使用v- onIxxx或@xx绑定事件，其中xxx是事件名;

2.事件的回调需要配置在methods对象中，最终会在vm上;

3. methods中配置的函数，不要用箭头函数!否则this就不是vm了;

4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm 或组件实例对象;5. @click=" demo”和@click="demo($event)”效果一 致，但后者可以传参;

 

Vue中常用按健别名:

回车=> enter	删除=> delete.( 捕获“删除”和“退格”键)
退出=> esc	换行=> tab (特殊，必须配合keydown去使用)
空格=> space	上.=>.up/下.=>. down/左.=>.left /右.=>.righ

2. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case ( 短横线命名)3.系统修饰键(用法特殊) : ctrl、 alt、 shift、 meta(window键)

(1) .配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发

(2) .配合keydown使用:正常他发事件。

4.也可以使用keycode去指定具体的按键(不推荐)

5. Vue . config. keyCodes.自定义键名=键码，可以去定制按键别名
计算属性:

1.定义:要用的属性不存在，要通过已有属性计算得来。

2.原理:底层借助了objcet . def ineproperty

方法提供的getter和setter。

3. get函数什么时候执行?

(1).初次读取时会执行一次。

(2).当依赖的数据发生改变时会被再次调用。

4.优势:与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便。

5.备注:

1.计算属性最终会出现在vm上，直接读取使用即可。

2.如果计算属性要被修改，那必须写set函数去响应修改，且set中 要引起计算时依赖的数据发生改变

深度监视:

(1).Vue中的watch默认不监测对象内部值的改变(一层)

(2).配置deep:true可以监测对象内部值改变(多层)。

备注:

(1).Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以!(2).使用watch时根据数据的具体结构，决定是否采用深度监视

computed和watch之间的区别:

1. computed能完成的功能，watch都可以完成。

2. watch能完成的功能，computed不一 定能完成，例如: watch可 以进行异步操作。

两个重要的小原则:

1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象。

2.所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等)，最好写成箭头函数，这样this的指向才是vm或组件实例对象。