- 博客(67)
- 收藏
- 关注
RSS订阅原创 src-非模块案例
每一个Vuex应用的核心就是Store（仓库），我们可以说Store是一个容器，Store里面的状态与单纯的全局变量是不一样的，无法直接改变Store中的状态。想要改变状态需通过mutation去修改。创建文件夹store与src根目录下，建立index.js。在main.js中引入store，全局组件都可以使用vuex。
2022-08-20 10:12:05
219
3
原创 路由的使用
active-class：当对应的路由匹配成功时，会自动给当前元素设置一个router-link-active的class，设置active-class可以修改默认的名称。2：hash带的#不会发送给服务器，history会发送给服务器，程序部署上线时需要后端人员支持，解决404刷新问题。vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。路由：route 一组key-v的对应关系(路径的改变对应的组件进行切换)...
2022-08-18 20:55:31
241
原创 vuex的使用
概念：每一个Vuex应用的核心就是Store（仓库），我们可以说Store是一个容器，Store里面的状态与单纯的全局变量是不一样的，无法直接改变Store中的状态。专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应 用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方 式，且适用于任意组件间通信。this.$store.dispatch('sumwait',1)// 'sumwait' 为action的动作，1为触发的值。...
2022-08-17 13:52:20
424
原创 组件间通信
一种组件间通信的方式 适用于任意组件间通信。安装全局事件总线:在入口文件main.js中，给VM添加$bus，任意组件都可以在原型中调用。给全局事件总线，绑定自定义事件getName 谁需要接收数据就再谁绑定。组件销毁之前卸载自定义事件谁需要传递数据,谁就调用自定义事件。...
2022-08-17 13:44:42
157
原创 自定义事件
this.$destroy() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。给子组件添加ref=”student”，用$on的方式添加,第一个参数：名称，第二个参数：回调函数。Student是子组件，sendName：事件名称，getName：回调函数。使用this.$emit调用，第一个参数为：事件名称，第二个参数：传递的数据。this.$off(‘xxxx’ ) xxxx：事件名称。定义：子给父传递数据：通过父组件给子组件绑定一个自定义事件。...
2022-08-15 13:46:58
327
1
原创 refs/props/mixin/scoped的使用
混入 (mixins) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。当一个style标签拥有scoped属性时候，它的css样式只能用于当前的Vue组件，可以使组件的样式不相互污染。在vue中一般很少会直接操作DOM，但偶尔会用到，这时可以通过【ref和$refs】两个来实现（减少获取dom节点的消耗）。ref是用来给元素或子组件注册引用信息，引用信息会注册在父组件的 $refs 对象上。在需要混入的组件中引入。..
2022-08-12 14:19:14
239
原创 内置指令与自定义指令的使用
v-html : 更新元素的 innerHTML，注意：v-html有安全性问题，在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。new Vue({ directives:{指令名:配置对象} 或 directives{指令名:回调函数} })2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。v-bind : 单向绑定解析表达式, 可简写为 :xxx。v-model : 双向数据绑定。.
2022-08-11 13:55:54
210
原创 生命周期的使用
载入前（完成了data和el数据初始化），可是页面中的内容仍是vue中的占位符，data中的message信息没有被挂在到Bom节点中，在这里能够在渲染前最后一次更改数据的机会，不会触发其余的钩子函数，通常能够在这里作初始数据。状态完成更新之前（data中数据已发生变化，view层数据变化之前），后vue的虚拟dom机制会从新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比以后从新渲染。销毁后会调用下面两个钩子。vue实例中的el，data，data中的message都为undefined。..
2022-08-10 16:11:05
714
1
原创 vue2.深入响应式原理
1）利用Object.defineProperty重新定义一遍目标对象，完成对目标对象的劫持，在属性值变化后即触发set方法 后通知订阅者，告诉该对象的某个属性值发生了变化。Object.defineProperty(obj, prop, descriptor) 直接在一个对象上定义一个属性，或者修改一个对象的现有 属性，并返回这个对象。（1）无需显式调用，如Vue2.x使用Object.defineProperty对象以及对象属性的劫持+发布订阅模式，只要数据发生变化直接通知变化 并驱动视图更新。....
2022-08-09 08:46:19
193
原创 v-model的使用
v-model双向绑定，既输入框的value改变，对应的message对象值也会改变，修改message的值，input的value也会随之改变。无论改变那个值，另外一个值都会变化。
2022-08-03 17:02:38
423
原创 v-if的使用
v-if用于条件判断，判断Dom元素是否显示。单独使用v-if，变量为布尔值，为true才渲染Domv-show的变量也是布尔值，为true才显示内容，类似css的displayv-if、v-else、v-else-if联合使用相当于if、elseif、else，但是在条件比较多的时候建议使用计算属性。...
2022-08-02 17:13:17
49465
原创 v-on的使用
按钮5调用时省略了()，会自动传入原生event事件，如果我们需要event对象还需要传入其他参数，可以使用。v-on的事件修饰词。v-on的按键修饰符。
2022-07-28 18:57:00
285
原创 计算属性与侦听器
例子中计算属性computed看起来和方法似乎一样，只是方法调用需要使用()，而计算属性不用，方法取名字一般是动词见名知义，而计算属性是属性是名词，但这只是基本使用。handler方法就相当于普通侦听器触发的事件，从结果可以看到，组件初始化的时候，侦听器并没有handler方法，所以fullName是没有值的。计算属性一般没有set方法，只读属性，只有get方法，但是上述中newValue就是新的值，也可以使用set方法设置值，但是一般不用。所以此时需要用到vue的深度监听（deep）...
2022-07-27 20:06:14
241
原创 vue的认识
视图数据模型（ViewModel）数据与视图关联起来，数据和DOM已经建立了关联，是响应式的，使编程人员脱离复杂的界面操作。视图变化后更新数据，界面上如果有input输入框，输入数据时，model中的数据也会更新。双向绑定（v-model）数据不仅能从data流向页面，还可以从页面流向data。数据变化后更新视图，既model有数据更新时UI组件会响应变化。数据层（Model）应用数据以及逻辑，主要指从后端获取的数据。单向绑定（v-bind）数据只能从data流向页面。...
2022-07-25 19:29:39
180
原创 async与await
async是一个修饰符，async定义的函数会默认的返回一个Promise对象resolve的值，因此对async函数可以直接进行then操作,返回的值即为then方法的传入函数。2当返回的是promise对象那么函数(promise对象)的结果与返回的promise状态一致。2await修饰的Promise返回的值就是resolve的值。2失败的代码await错误的代码需要用trycatch捕获。3await可以返回的是右侧promise成功的值。2send（）方法一调用。...
2022-07-20 16:56:35
166
原创 ES6--Promise
它的作用是为Promise实例添加状态改变时的回调函数。then方法的第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数，参数可选。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。Promise.prototype.catch()方法是.then(null,rejection)或.then(undefined,rejection)的别名，用于指定发生错误时的回调函数。...
2022-07-19 16:11:36
341
原创 迭代器与生成器
迭代器(lterator)是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署lterator接口，就可以完成遍历操作，ES6新增遍历方式for...of。原生具备lterator接口的数据有Array，Arguments，Set，Map，String，NodeList。...
2022-07-18 14:22:56
262
原创 set map数据结构/classlist/创建对象/symbol
1、symbol是唯一即使同一个变量生成的也不相等。设置map的值key->value。get得到map的值参数key。1、当属性与变量名称相等的时候触发简写。四、classlist应用。删除map的值参数key。3、symbol创建唯一的值。1、set定义与初始化数据。一、setmap数据结构。获取map的所有key。4、symbol的应用。2、不能与运算符计算。...
2022-07-15 20:00:25
135
1
原创 arr扩展方法//数组的遍历//数组的其他方法
arr扩展方法array.map 的用法map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。array.filter() 过滤-- filter() 不会对空数组进行检测。-- filter() 不会改变原始数组。array.reduce() "缩减" "累加器"total 即是初始值又是返回值reduce 第二个参数指定初始值reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。 -- 对于空数组是不会执行回调函数的
2022-07-14 15:14:43
148
原创 三点运算符/arr对象的方法/字符串扩展方法
...扩展运算符可以将数组或者对象转为用逗号分隔的参数序列。函数传不定参数，验证数组的长度与结构使用与数组结构使用，函数传对象扩展运算符（...）用...输出数组合并数组将类数组转为真正的数组小练习复制数组创建一个函数，用扩展运算符计算两个数的和二、arr对象的方法Array.from() 将伪数组或可遍历对象转换为真正的数组array.find返回数组符合条件第一个元素的值find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
2022-07-13 17:19:20
190
1
原创 WS6--箭头函数和箭头函数的this
原js函数写法箭头函数的写法箭头函数简写代码块只有一句话省略{}和return只有一个参数 小括号可以省略箭头函数的this一：全局函数下的this普通函数this 跟调用者有关系箭头函数的this 箭头函数this this是静态 根据上下文的this二：对象方法里面的this对象箭头函数的this三：构造函数的this 构造函数的this就是当前实例 箭头函数的this 一旦定义了就不允许改变箭头函数的应用单击按钮2s后改变按钮文字：按钮被点
2022-07-12 16:26:47
129
原创 ES6--变量的使用与结构赋值
块级作用域块级作用域不存在变量提升"暂时性死区"：用let声明的变量需要先声明后使用不允许重复声明使用let，const的声明的变量不属性顶层属性 ，返回undefinedlet案例总结:-- let 关键字用来声明块级变量。-- 特点就是在{}声明具有块级作用域，var变量无此特点。-- 防止循环变量编程全局变量。-- let 关键词无变量提升。-- let 关键词有暂时性死区的特点。{先声明后使用}et、const、var 的区别- 使用 var 声明的变量，其
2022-07-12 15:32:32
151
原创 JavaScript --class类的用法
JavaScript 语言中，生成实例对象的传统方法是通过构造函数，ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。类的定义说明：使用class关键词 声明类，constructor为构造方法，一个类必须有constructor()方法，如果没有显式定义，一个空的constructor()方法会被默认添加，this关键字则代表实例对象，getstr()为普通方法，不要用“function”，getstr()存在 prototype
2022-07-08 19:41:52
2021
3
原创 get和set
getter对动态属性就行一个封装sette'r做判断满足条件赋值下面的flag是一个方法flag（）{console.log()}如果加上get flag就是一个属性注意 得到属性的时候 get方法就执行给flag属性赋值时候 set会执行总代码 在get里面 我们的age没有写固定的值 我们想让赋值时 age控制在一个范围内set可以给age做一个条件的判断总代码...
2022-07-07 19:25:01
140
1
原创 JavaScript面向对象
面向对象定义类 基础语法 通过class关键字对象都是 new关键词 new出来的类的方法使用p2.say()；有返回值不能直接获得数据类的属性使用 属性是打点调用静态变量的使用总结 static静态成员 不能被实例继承 所以实例打点是获取不到的 需要原型打点获取总结 定义的这个Person对象 我们称它为 原型对象p2我们称它为 实例对象 指的就是具体的实在对象定义子类使用extends关键字 mathperson是子类 person是父类子类会继承父类的属性调用方法
2022-07-07 19:02:49
134
1
原创 JavaScript本地存储
sessionStorage 同一个窗口本地存储信息先设置数据sessionStorage.setItem('username','张三');sessionStorage.setItem('age',20);得到数据console.log(sessionStorage.getItem('username'));删除数据sessionStorage.removeItem('username');console.log(sessionStorage.getItem('username'));console.lo
2022-07-06 16:55:00
395
原创 JavaScript
拖拽原理1：mousedown 鼠标按压获取鼠标在登录框的宽度。2：mousemove 鼠标移动的时获取最新的pageX减去鼠标在登录框的X距离，就是模态框的left与top值。3：mouseup 鼠标松开时，移除mousemove 事件client概述通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。clientTop ：元素上边框大小clientLeft ：元素左边框大小clientWidth：包括padding，不包括边框。clientHeight：包括paddin
2022-07-04 16:55:14
2127
原创 javascript -元素，节点总结
增加var li = document.createElement(“li”) ;element.appendChild(li)；添加一个元素在指定子元素之前ul.insertBefore(li, ul.children[0]); ul父级节点删除node.removeChild() node节点中删除一个子节点修改-修改元素属性：src,href,title- 修改普通元素内容：innerHtml，innerText- 修改表达元素内容：value，type，disabled- 修改元素样式：st
2022-07-03 09:58:11
72
原创 location常见方法
location.assign() 可跳转页面（重定向页面）location.replace() 替换当前页面，不记录历史，无法后退location.reload() 刷新页面f5，参数为true为强制刷新 ctrl +f5location方法location方法跳转页面后 无法后退刷新页面navigator对象可以判断 登陆的类型 移动端 还是网页端window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的
2022-07-01 16:14:46
1522
原创 javascript
以前的方法给按钮添加点击事件 按回车键添加用户信息enter回车键 对应的ASCII码值是13ASCII码值可以用keycode获得
2022-06-29 16:54:33
178
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人