v-show和v-if
- v-show跟v-if都是做条件隐藏跟显示用的，
- v-show是根据样式进行显示隐藏display：none
- v-if在页面加载的时候会进行加载与销毁性能比较高
- 高频切换用v-show反之v-if
v-cloak
- clock解决页面闪烁动问题
- 原理是：先通过样式隐藏内容，然后再内存中进行值的替换，替换完成显示最终效果
[v-cloak]{display: none; }
v-text
-
v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
-
输出纯文本不会解析html标签
v-html
- 将html的片段填充到标签中，可以解析html标签并输出
- 有安全问题
v-text和v-html的区别
CODE
|
<pre style="box-sizing: border-box; font-family: MyFont !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background-image: ; background-position-x: ; background-position-y: ; background-size: ; background-repeat-x: ; background-repeat-y: ; background-attachment: ; background-origin: ; background-clip: ; background-color: var(--hlnumber-bg); color: var(--hlnumber-color); line-height: 1.6; border: none; text-align: right;">1
</pre>
|
<pre style="box-sizing: border-box; font-family: MyFont !important; font-size: var(--global-font-size); overflow: auto; margin: 0px; padding: 8px 0.5rem; background: var(--hl-bg); color: var(--hl-color); line-height: 1.6; border: none; width: 762px;">v-text和v-html用法相似，不同的是v-text输出纯文本，v-html会被当成标签解析，须注意的是v-html有安全问题
</pre>
|
v-pre
- v-pre是显示原始的信息
v-once
- v-once只渲染组件和元素一次，数据改变内容不会改变
双向数据绑定v-model
- 数据发生变化，视图也跟着变化
- 视图变化数据也会跟着变化
原理：通过v-bind进行属性绑定，再通过v-on:input事件处理值的变化。使用输入域中的最新的值覆盖原来的值
mvvm
MVVM是Model-View-ViewModel的简写
- M(Model)模型提供数据 【就是数据dta中的数据】
- V(View)视图提供页面展示效果 【本质是DOM】
- VM(ViewModel)实现控制逻辑 【将数据和视图层建立联系 】
- 视图到模型用的事件监听
- 模型到视图用的是数据绑定
- vm就是vue的实例就是vm
key 的作用
- key来给每个节点做一个唯一标识
- key的作用主要是为了高效的更新虚拟DOM
计算属性computed与方法methods的区别
-
计算属性是基于data的依赖进行缓存的，只要data的值发生改变computed也会发生改变反之不会改变
-
方法methods不存在缓存调用一次执行一次
native修饰符
-
如果是自定义组件，想要绑定keyup事件，就需要添加.native修饰符
-
原生组件input不需要加native
-
native修饰符相当于把自定义组件转化为普通组件
localStorage和sessionStorage
-
localStorage和sessionStorage一样都是用来存储客户端临时信息的对象。
-
localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。
-
sessionStorage生命周期为当前窗口或标签页，一旦窗口或标签页被永久关闭了，那么所有通过sessionStorage存储的数据也就被清空了。
created是创建完vue对象之后调用的，此时的data数据已经初始化过了，所以可以理解成页面渲染之前
$nextTick
$nextTick 使用时间：：：数据更新之后，需要操作dom
生命周期
Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模 板、挂载 Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
1、beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
2、created 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不 可见
3、beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用
4、mounted el 被新创建的 vm. el 替换，并挂载到实例上去之后调用该钩子，如果 root 实例挂载了一 个文档内元素，当 mounted 被调用时 vm.$el 也在文档内
5、beforeUpdate数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM， 比如手动移除已添加的事件监听器，该钩子在服务器端渲染期间不被调用，因为只有初次渲染会 在服务端进行
6、updated 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
7、activated keep-alive 组件激活时调用。该钩子在服务器端渲染期间不被调用
8、deactivated keep-alive 组件停用时调用。该钩子在服务器端渲染期间不被调用
9、beforeDestroy 实例销毁之前调用。在这一步，实例仍然完全可用。该钩子在服务器端渲染期间不被 调用
10、destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监 听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用
11、errorCaptured（2.5.0+ 新增） 当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生 错误的组件实例以及一个包含错误来源信息的字符串，此钩子可以返回 false 以阻止该错误继续 向上传播
网友评论