vue
如何解决插值表达式的页面闪烁问题
- 方式 1： 使用 v-text 代替 插值表达式
- 方式 2： 使用 v-cloak 配置显示隐藏的样式
属性绑定
基本使用
-
string
v-bind:属性名称 = "属性值" 简写 :属性名称 = "属性值"
-
object
v-bind:属性名称 = "obj.属性值"
v-bind="obj"
class 样式绑定
-
普通数组
:class="['class1','class2','class3']"
-
数组三元
:class="['class1','class2',flag?'class3':'']"
-
数组对象
:class="['class1','class2',{class3:flag}]"
-
普通对象
:class="{class1:true,class2:true,class3:true}" :class="objStyle"
style 样式绑定
-
object
:style="obj"
-
array
:style="[obj1,obj2]"
v-for 为什么跟随 key 一起使用
-
给指定的标签添加唯一的标识，防止页面在重新绘制的时候发生错乱
-
确保 model 的值和 view 的值保持一致
... Diff 算法
v-if 和 v-show 的区别
-
v-if: 通过 js 操作 DOM 元素的添加和删除
-
v-show: 通过 css 控制元素的显示和隐藏
使用场景
-
v-if: 逻辑判断或者是少量的 DOM 操作
-
v-show: 用于频繁的点击操作
生命周期的4个阶段
生命周期的4个阶段
创建
beforeCreate
created
一般用于发送网络请求
挂载
beforeMounte
mounted
这个时候DOM元素已经挂载完毕了可以实现一些 DOM操作
更新
beforeUpdate
updated
销毁
beforeDistroy
destroyed
