洪锦一-CSDN博客

原创 Vue获取表单数据的方法

@submit.prevent 提交阻止默认跳转v-model.trim 去除两端空格v-model.number 将字符串转为数值v-model.lazy 不是立即收集，而是切换焦点后收集<template> <form @submit.prevent="submit"> <p>账号：<input type="text" v-model.trim="userinfo.username" /></p> <p&gt

2022-03-21 00:00:00 5639

原创 vue 监视数据的原理

1. vue会监视data中所有层次的数据。2. 如何监测对象中的数据？通过setter实现监视，且要在new Vue时就传入要监测的数据。(1).对象中后追加的属性，Vue默认不做响应式处理(2).如需给后添加的属性做响应式，请使用如下API：Vue.set(target，propertyName/index，value)或vm.$set(target，propertyName/index，value)#####3. 如何监测数组中的数据？通过包裹数组更新元素的方法实现，本质就是做了两

2022-03-20 01:00:00 167

原创 Vuex 状态管理的基本使用配置

1.安装Vue 依赖包npm install vuex --save2.导入 vuex 包创建 store.js 文件和 main.js 平级import Vue from 'vue'import Vuex from 'vuex' //导入vuexVue.use(Vuex) //把Vuex安装到项目里面export default new Vuex.Store({ //state中存放的就是全局共享的数据 state:{ }, muta

2022-03-20 00:30:00 251

原创 axios 网络请求

一、安装 axios 依赖npm install axios --save二、导入axiosimport axios from 'axios'三、基础用法1、不传参数（默认是get请求）axios({ url: 'http://httpbin.org/get', method:'get'//可以省略不写默认是get}).then(res => { console.log(res);})2、不传参数（第二种写法）axios.get('http://httpbin

2022-03-20 00:15:00 1468

原创 Vue 生命周期

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>生命

2022-03-20 00:00:00 64

原创 Vue 双向绑定原理

使用 defineProperty<body> <input type="text" id="inputId"> <p id="pId"></p> <script> /* defineProperty 定义属性第一个参数：要定义的对象第二个参数：要定义或修改的属性名称（任意名称）第三个参数：将被定义或修改

2022-03-19 13:43:33 345

原创 vue2 和 vue3 的响应式原理

#####1.vue2 响应式实现原理对象类型：通过 Object.difineProperty() 对属性的读取，修改进行拦截（数据劫持）数组类型：通过重写更新数组的一系列方法来实现拦截，（对数组的变更方法进行了包裹） Object.defineProperty(data,'count',{ get(){}, set(){} })存在问题新增属性、删除属性，界面不会更新（需要使用 this.$set

2022-03-19 13:43:00 352

原创 vue3 中 reactive 和 ref 对比区别

定于数据角度对比：ref 用来定义：基本类型数据reactive 用来定义：对象、或数组类型的数据备注：ref也可以用来定义对象或数组类型数据，它内部会自动通过 reactive 转为代理对象原理角度对比：ref 通过 Object.defineProperty() 的 get 与 set 来实现响应式的（数据劫持）reactive 通过使用 Proxy 来实现响应式（数据劫持），并通过Reflect 操作源对象内部的数据。使用角度对比：ref 定义的数据：操作数据需要 .value,读取数

2022-03-19 13:42:32 406

原创 Vue2 和 Vue3 中的 watch 用法

数据 let num = ref(0); let msg = ref('你好'); let person = reactive({ name: 'zs', age: 13, job: { j1: { salary: 20, }, }, });vue2中的写法watch: { //简写 // num(newVal, oldVal) { //

2022-03-19 13:41:50 1887

原创 vue 实现模糊查询、排序

<template> <div> <input type="text" v-model="iName" placeholder="输入名字" /> <button @click="sortType = 2">升序</button> <button @click="sortType = 1">降序</button> <button @click="sortType = 0">原序

2022-03-19 13:41:04 1047

原创数组方法总结（全部）

push 添加向数组的末尾添加一个或多个元素，并返回新的数组长度。原数组改变。（**把元素添加到数组尾部**）var arr = [1, 2, 3]arr.push(4)arr.push(5, 6, 7)console.log(arr); 结果：[1, 2, 3, 4, 5, 6, 7]pop 删除删除并返回数组的最后一个元素，若该数组为空，则返回undefined。原数组改变。（**移除数组最后一个元素**）var arr = [1, 2, 3, 4]console.log(ar

2022-03-18 11:11:24 192

原创 localStorage、sessionStorage 存储

localStorage、sessionStorage 存储统称 webStorage 存储存储内容大小一般支持5MB左右（不能浏览器不一样）浏览器端通过window.sessionStorage和window.localStorage属性来实现本地存储机制使用方法API 设置缓存 localStorage.setItem('key','value')sessionStorage.setItem('key','value') ..

2022-03-17 13:21:06 1423

原创 Vue 自定义插件

创建pligins.js 文件export default { install(Vue, ...arg) { console.info("接收的参数:", ...arg); // 全局过滤器 Vue.filter('mySlice', function (value) { return value.slice(0, 4) }) //函数全局自定义指令 Vue.direc..

2022-03-16 17:02:54 142

原创 vue 自定义指令

定义一个big指令，和v-text功能类似，但会吧绑定的值放大10倍定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点函数形式directives: { // big何时被调用：指令与元素绑定成功时，指令所在的模板被重新解析时 big(el, binding) { // console.dir(el); // el：指令所绑定的元素，可以用来直接操作 DOM。 // binding：一个对象，包含以.

2022-03-16 14:50:05 529

qq_16786131的博客