摘要：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
阅读全文
02 2024 档案
摘要：日期格式化 日期格式化插件： 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.
阅读全文
摘要：自定义代码片段操作步骤： 第一步：文件==》首选项==》配置用户代码片段==》新建全局代码片段==》输入自定义文件名称 第一步：设置(鼠标左键)==》用户代码片段==》新建全局代码片段==》输入自定义文件名称 第二步：选择“新建全局代码片段文件，然后输入文件名称 第三步：自定义代码片段 自定义代码片
阅读全文
摘要：示例一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue
阅读全文
摘要：数据代理：通过一个对象代理对另一个对象属性的操作(读或写) 总结：data——_data(数据劫持) Vue中的数据代理，通过vm对象来代理data对象中属性的操作(读写) Vue中数据代理的好处，更改方便的操作data种的数据 基本原理： 通过Object.defineProperty()把dat
阅读全文
摘要：Object.defineProperty()语法说明 Object.defineProperty()的作用就是直接在一个对象上定义一个新属性，或者修改一个已经存在的属性obj 需要定义属性的当前对象 Object.defineProperty(obj, prop, desc)==》 obj 需要定
阅读全文
摘要：总结：MVVM M:模型Model，对应data种的数据 V：视图View，模版 VM:视图模型ViewModel,Vue实例对象 观察发现： data种所有的属性，最后都出现在vm身上。 vm身上所有的属性及Vue原型上所有属性，在Vue模版种都可以直接使用。 示例如下所示： <!DOCTYPE
阅读全文
摘要：总结：data与el的两种写法 el两种写法 new Vue的时候配置el属性。 先创建Vue实例，再通过v.$mount('#root')函数指定el的值。 data两种写法 对象式 函数式 注：对于为使用到组件时，两种方式都可以，但在应用到组件后，data必须使用函数式，否则会报错。 一个重要原
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue数据绑定</
阅读全文
摘要：示例代码如下所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
摘要：live server插件 在Vs code 扩展插件中安装live server，启用扩展后展示如下所示： 单击Go Live,会运行启用网页，如下图所示： 注：使用http://127.0.0.1:5500/可查看网页下详细资源信息 解决确实图标问题 第一步：找到合适的图标进行重命名为favic
阅读全文
摘要：第一步：创建文件夹 并在VS code 中打开 第二步：创建src目录 + index.html 第三步：https://v2.cn.vuejs.org/v2/guide/installation.html 下载 vue 依赖文件，如下图所示： 第四步：引入vue.js，如下图所示： 第五步：运行
阅读全文
摘要：第一步：安装vs code 第二步：安装nodejs--node-v14.17.6-x64(需要注意版本--版本过高或过低均会导致程序打包运行问题)——一路默认，会安装对应的npm 注：版本和程序中使用的依赖包不一致会导致各种打包异常......，因此需根据自身项目实际情况安装对应版本 ==>程序打
阅读全文
