摘要：Vue学习笔记-自定义指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
阅读全文
随笔分类 - Vue
Vue学习笔记
摘要：v-pre指令： 1.跳过其所在节点的编译过程2.可利用v-pre跳过：没有使用指令语法、没有使用插值语法点节点，会加快编译。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" c
阅读全文
摘要：v-once v-once 也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或 组件的所有子节点。 首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。 v-once 指令可以用于任何元素或组件，并在绑定数据后，将其内容标记为一次性的，不再响应数据的更新。 用法如下：<s
阅读全文
摘要：v-cloak 总结：v-cloak(没有值)： <br> 1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉 v-cloak属性。<br> 2.使用css配合 v-cloak 可以解决网速慢时页面展示出{{xxx}}的问题 <!DOCTYPE html> <html lang="en"
阅读全文
摘要：1.v-bind:单向绑定解析表达式，可简写为 :xxx 2.v-model:双向数据绑定 3.v-for:遍历数组、对象、字符串 4.v-on:绑定事件监听，可简写为 @ 5.v-if:条件渲染——动态控制节点是否存在 6.v-else：条件渲染——动态控制节点是否存在 7.v-show：条件渲染
阅读全文
摘要：v-model <input name="chbsex" type="radio" value="male" v-model="sex"> <input id="txtnum" type="text" v-model.trim="account"> <input type="number" v-mo
阅读全文
摘要：日期格式化 日期格式化插件： https://www.bootcdn.cn/ moment.js、day.js(轻量级moment.js) 插件用法：双击day.js==>复制链接并访问==》另存为dayjs.min==》项目中引用 https://github.com/iamkun/dayjs/b
阅读全文
摘要：Vue收集表单数据总结： <input type="text"/>，则v-model收集的是value值，用户输入的就是value值。 <input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。 <input type="checkbox"/> 没
阅读全文
摘要：Vue监视数据总结 vue会监视data中所有层次的数据 如何监测对象中的数据 通过setter实现监视，且要在new Vue时就传入要监测的数据 对象中后添加的属性，Vue默认不做响应式处理 如需给后添加的属性做响应式，请使用如下API：Vue.set(target,propertyName/in
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表排序</tit
阅读全文
摘要：列表过滤--监听属性过滤 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
阅读全文
摘要：react、vue中key的作用(key的原理？)： 虚拟DOM中key的作用： key是虚拟DOM对象的标识，当张贴中的数据发生变化时，vue会根据--新数据，生成 新的虚拟DOM，随后vue进行 新虚拟DOM与 旧虚拟DOM的差异比较。 比较规则如下： 对比规则 旧虚拟DOM中找到了与新虚拟DO
阅读全文
摘要：总结： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>列表渲染<
阅读全文
摘要：条件渲染总结： v-if 写法： v-if="表达式" v-else-if="表达式" v-else="表达式" 适用于：切换频率较低的场景 特点：不展示DOM元素直接被移除 注意：v-if可以和v-else-if、v-else一起使用，但要求其结构不能被“打断”——即，中间不能有其他元素 v-sh
阅读全文
摘要：监视属性和计算属性对比：computed和watch之间的区别 计算属性computed能完成的功能，watch都可以完成 监听属性watch能完成的功能，computed计算属性不一定能完成，例如：watch可以进行异步操作 两个重要小原则： 所被Vue管理的函数，最好写成普通函数，这样this的
阅读全文
摘要：监视属性watch 示例一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
阅读全文
摘要：{ // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // description. Add comma separated i
阅读全文
摘要：计算属性： 定义：要用的属性不存在，要通过已有属性计算得来 原理：底层借助了Object.defineproperty方法提供的getter和setter get函数什么时候执行？ 初次读取时会执行一次 当依赖的数据发生改变时会被再次执行调用 优势：与methods实现相比，内部有缓存机制(可复用)
阅读全文
摘要：插值语法示例：插值语法--实现信息拼接 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.
阅读全文
摘要：自定义代码片段操作步骤： 第一步：文件==》首选项==》配置用户代码片段==》新建全局代码片段==》输入自定义文件名称 第一步：设置(鼠标左键)==》用户代码片段==》新建全局代码片段==》输入自定义文件名称 第二步：选择“新建全局代码片段文件，然后输入文件名称 第三步：自定义代码片段 自定义代码片
阅读全文
