vue2 - router的两种模式 history模式与hash模式，设置模式
摘要：history模式：url带#号，兼容性好 hash模式：url不带#号，需后端配合 模式的设置：默认为history模式 export default new VueRouter({ mode: "hash", routes: [ ] })
阅读全文
posted @ 2023-02-18 16:03
02 2023 档案
vue2 - router-link 的replace属性与push属性，编程式路由导航，路由的缓存
摘要：1.router-link 的replace属性与push属性 //替换游览器历史记录 游览器没有记录 <router-link replace ...></router-link> //追加游览器历史记录 游览器有记录 <router-link push ...></router-link> 2.
阅读全文
posted @ 2023-02-18 15:49
vue2 - router子路由，query方式传递参数，params方式传递参数，路由中的props
摘要：1.router 子路由 export default new VueRouter({ routes: [ { path: "/home", component: AppHome, name: "AppHome", children: [ //子路由 /home/show1 { path: "sho
阅读全文
posted @ 2023-02-18 15:29
vue2 - router 的基本使用，安装router，配置router，router 标签
摘要：1.安装router npm install vue-router 2.定义router路由导航 src/router/index.js import Vue from "vue"; import VueRouter from "vue-router"; //引入组件 import AppHome
阅读全文
posted @ 2023-02-18 14:48
vue2 - vuex优化，vuex模块化 模块化操作数据
摘要：1.vuex优化 mapActions 在methods添加了 setter方法 mapMutations 在methods添加了 setter方法 mapGetters 在computed添加了 getter方法 mapState 在computed添加了 getter方法 import {map
阅读全文
posted @ 2023-02-18 13:58
vue2 - vuex 状态管理工具
摘要：1.什么是vuex 状态管理工具 vuex是适用于在Vue项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在
阅读全文
posted @ 2023-02-18 12:43
vue2 - 插槽solt，默认插槽，具体名插槽，作用域插槽
摘要：1.默认插槽 作用：会把父组件human中的内容全部解析到子组件中的slot中 父组件： <template> <div id="App"> <!--子组件--> <human> <!--解析到子组件中的内容--> <h2>USER</h2> <h2>NAME</h2> </human> </div
阅读全文
posted @ 2023-02-18 12:31
一些有用的小知识
摘要：1.maven项目打包成可执行jar包 maven配置 <build> <plugins> <plugin> <artifactId>maven-assembly-plugin</artifactId> <configuration> <appendAssemblyId>false</appendA
阅读全文
posted @ 2023-02-17 18:14
vue2 - 过渡与动画什么时候生效，设置动画，设置过渡，第三方动画库
摘要：1.过渡与动画什么时候生效 在插入，更新，移除DOM元素时，在合适的时候给元素添加样式类名 2.动画 1.定义 transition name appear 2.定义 xxx-enter-active，xxx-leave-active <template> <div id="app"> <butto
阅读全文
posted @ 2023-02-17 15:55
vue2 - $nextTick 在下一次DOM更新结束后 指定其回调
摘要：Vue 实现响应式并不是数据发⽣变化之后 DOM ⽴即变化，⽽是按⼀定的策略进⾏ DOM 的更新。 $nextTick 是在下次 DOM 更新循环结束之后执⾏延迟回调，在修改数据之后使⽤ $nextTick，则可以在回调中获取更新后的 DOM，在下次 DOM 更新循环结束之后执行延迟回调。 简单的理
阅读全文
posted @ 2023-02-17 14:43
vue2 - pubsub 消息订阅与发布
摘要：pubsub，即订阅发布，在vue中常常被用于任意组件间的传值 1.安装pubsub npm install pubsub-js 2.在需要进行传值的位置引入pubsub import Pubsub from 'pubsub-js' 3.消息订阅与发布 //消息订阅 第一个参数消息订阅名称，第二个参
阅读全文
posted @ 2023-02-17 13:53
vue2 - 组件中的通信，props，全局事件总线
摘要：props属性： 作用是让父组件可以给子组件传递data中的数据 注意子组件不能修改props中的数据，只能访问 父组件 <template> <div id="App"> <!--给组件传入参数--> <human :name="name" :bodyObj="bodyObj"></human>
阅读全文
posted @ 2023-02-17 13:34
vue2 - 自定义插件 使用插件，scoped
摘要：1.自定义插件 myPlugin.js export default { install(Vue) { console.log("Vue.use() 会调用此方法",Vue) } } 2.使用插件 import Vue from 'vue' import App from './App.vue' /
阅读全文
posted @ 2023-02-17 13:29
vue2 - 生命周期钩子，ref属性，mixins属性 局部使用与全局使用
摘要：1.生命周期钩子 <script> new Vue({ beforeCreate() { console.log('beforeCreate') }, created() { console.log('created') }, beforeMount() { console.log('beforeM
阅读全文
posted @ 2023-02-17 12:57
vue2 - 局部过滤器 全局过滤器，自定义局部指令 自定义全局指令
摘要：1.过滤器 局部过滤器 <!--使用一个过滤器，单个参数--> <div>{{"levi" | filterTest1}}</div> <!--使用一个过滤器，多个参数--> <input type="text" v-bind:value="'levi' | filterTest2('ackerma
阅读全文
posted @ 2023-02-17 12:38
vue2 - vue.set 添加属性与修改属性，修改数组的注意事项
摘要：1.vue.set 添加属性与修改属性 Vue.set(target，propertyName/index，value) vm.$set(target，propertyName/index，value) <div id="root"> <button v-on:click="addAttr">点击添
阅读全文
posted @ 2023-02-17 12:11
vue2 - 条件渲染，列表熏染
摘要：1.条件熏染 v-if (1).v-if="表达式" (2).v-else-if="表达式" (3).v-else="表达式" 适用于：切换频率较低的场景 特点：不展示的DOM元素直接被移除 注意：v-if可以和:v-else-if，v-else一起使用，但要求结构不能被“打断” <div id="
阅读全文
posted @ 2023-02-17 11:57
vue2 - 目录
摘要：vue2 - 模板语法 插值语法，属性单向绑定，属性双向绑定，v-clock，v-text，v-html，v-once，v-pre vue2 - 事件，事件的绑定，事件属性，键盘事件 vue2 - 计算属性，计算属性简写，监听属性，深度监听，监听属性简写，两个重要的小原则 vue2 - 绑定clas
阅读全文
posted @ 2023-02-16 22:32
vue2 - 模板语法 插值语法，属性单向绑定，属性双向绑定，v-clock，v-text，v-html，v-once，v-pre
摘要：1.插值语法 <!--插值语法 可以使用js--> <span>{{name}}</span> 动态的替换标签中的内容，可以使用js，直接读取到data中的所有属性 2.属性单向绑定 <!--单向属性绑定--> <input type="text" v-bind:value="user.userna
阅读全文
posted @ 2023-02-16 22:27
vue2 - 绑定class，绑定style
摘要：1.绑定class样式 字符串写法：适用于类名不确定，要动态获取 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定 <div id="root"> <!--类为class1--> <div v-bind:class="c
阅读全文
posted @ 2023-02-16 22:02
vue2 - 计算属性，计算属性简写，监听属性，深度监听，监听属性简写，两个重要的小原则
摘要：1.计算属性 <div id="root"> 性：<input type="text" v-model:value="firstName"><br> 名：<input type="text" v-model:value="lastName"><br> 全名：<span>{{fullName}}</s
阅读全文
posted @ 2023-02-16 21:54
vue2 - 事件，事件的绑定，事件属性，键盘事件
摘要：1.事件的绑定 <button v-on:click="getList1">添加事件(添加点击事件 无参)</button> <button v-on:click="getList2($event,10,levi)">添加事件(添加点击事件 有参)</button> 绑定的方法定义在methods属
阅读全文
posted @ 2023-02-16 21:30
CSS - 盒子阴影
摘要：1.盒子阴影 box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.5); 第一个参数：阴影水平方向的偏移 x轴，值为正数时，阴影在元素的右侧；值为负数时，阴影在元素的左侧 第二个参数：阴影竖直方向的偏移 y轴，值为正数时，阴影在元素的下方；值为负数时，阴影在元素
阅读全文
posted @ 2023-02-12 12:27
git - 安装地址，基本命令，设置配置，
摘要：1.Git安装地址：https://git-scm.com/downloads 2.基本命令 #查看配置 git config -l #查看Git所有配置 git config --system --list #查看系统配置 git config --global --list #查看全局配置 #设
阅读全文
posted @ 2023-02-11 18:29
javaScript - 动画函数
摘要：1.动画函数的封装 // 给不同元素指定不同的定时器 function animate(obj,target) { // 当我们不断点击按钮是时，span元素运动速度会越来越快，因为开启了太多定时器 // 为了让元素只有一个定时器执行，我们要先清除以前的定时器，只保留当前的一个定时器执行 clear
阅读全文
posted @ 2023-02-09 16:09
javaScript 高级语法 - 解构赋值，箭头函数，set对象，set全部属性与方法
摘要：1.解构赋值 //数组的解构赋值 let array=["levi","mkasa"]; let[name1,name2]=array; console.log(name1,name2); //levi，mikasa //对象的解构赋值 let human={id: 1,name: "levi"};
阅读全文
posted @ 2023-02-08 15:02
JavaScript 高级语法 - var let const
摘要：var 全局作用域，存在变量的提升，值可以更改 let 块级作用域，不存在变量的提升，值可以更改 const 块级作用域，不存在变量的提升，值不可以更改 1.变量提升与不变量提升 console.log(data1); //有这个引用但是值为undefined var data1=1; consol
阅读全文
posted @ 2023-02-08 14:10
javaScript ES6 - call，apply，bind 修改this指向，开启严格模式
摘要：1.call与apply call与apply都是执行一次修改的方法，不过apply的第二个参数为数组格式 //构造函数 function Human(id,name) { this.id=id; this.name=name; } //方法 function info(args){ console
阅读全文
posted @ 2023-02-08 13:38
javaScript 高级语法 - 数组的forEach filter some，Object.defineProperty()添加对象属性与修改对象属性，this指向
摘要：1.数组的forEach，filter，some var numberArray=[1,5,6,3,2,9,7,4,8]; //遍历数组 numberArray.forEach(function (value,index,array) { console.log("当前值："+value+" 当前下
阅读全文
posted @ 2023-02-08 13:09
JavaScript ES6 - 目录
摘要：javaScript 高级语法 - class创建对象，继承 extends，super，类中this指向问题 javaScript 高级语法 - 构造函数创建对象，原型对象 prototype，对象原型 _proto_，原型对象中的constructor属性，原型链，方法与属性查找机制，原型对象t
阅读全文
posted @ 2023-02-08 12:05
javaScript 高级语法 - 构造函数创建对象，原型对象 prototype，对象原型 _proto_，原型对象中的constructor属性，原型链，方法与属性查找机制，原型对象this指向问题
摘要：1.构造函数创建对象 function Human(id,name) { this.id=id; //属性 this.name=name; this.info=function () { //方法 console.log("info："+this.id+this.name); } } Human.a
阅读全文
posted @ 2023-02-08 11:51
javaScript 高级语法 - class创建对象，继承 extends，super，类中this指向问题
摘要：1.class 创建对象 class Human { //类 constructor(id,name) { //构造器 this.id=id; //成员变量 this.name=name; } info(){ //方法 console.log("info："+this.id+this.name);
阅读全文
posted @ 2023-02-08 11:15
javaScript - 本地存储 sessionStorage，localStorage
摘要：1.本地存储 window.sessionStorage window.localStorage sessionStorage 游览器关闭 数据清空，localStorage 永久保存 2.操作数据 //添加与设置 setItem("name","levi"); //添加数据 setItem("na
阅读全文
posted @ 2023-02-07 16:51
javaScript - offset，client，scroll 获取元素的位置
摘要：1.offset offset系列属性 作用 offsetParent 返回该元素有定位的父级，如果父级都没有定位则返回body offsetTop 返回元素相对父级（带有定位的父级）上方的偏移 offsetLeft 返回元素相对父级（带有定位的父级）左边框的偏移 offsetWidth 返回自身的
阅读全文
posted @ 2023-02-07 16:36
javaScropt BOM - location属性与方法，navigator属性与方法，history属性与方法
摘要：window.location window.navigator window.history 1.location 属性 属性描述 hash 设置或返回从井号 (#) 开始的 URL（锚）。 host 设置或返回主机名和当前 URL 的端口号。 hostname 设置或返回当前 URL 的主机名。
阅读全文
posted @ 2023-02-07 16:18
javaScript BOM - 窗口事件，创建定时器与清除定时器
摘要：1.窗口事件 事件 描述 load 等页面内容全部加载完毕，包含页面dom元素，图片，flash，css执行 DOMContentLoaded DOM加载完毕，不包含图片，flash，css等就可以执行，加载速度比load更快一些 resize 窗口调整大小时 触发的事件 2.定时器 只会执行一次，
阅读全文
posted @ 2023-02-07 16:02
javaScript DOM - innerText与innerHtml，操作元素的属性，节点的获取，创建，添加，删除，修改
摘要：1.innerText与innerHTML //替换元素里面的内容成文字 document.querySelector(".main").innerText="文字"; //替换元素里面的内容成标签 document.querySelector(".main").innerHTML="<h1>标题<
阅读全文
posted @ 2023-02-07 14:13
javaScript DOM - 事件内置对象全部属性，全部事件
摘要：1.事件内置对象全部属性 属性 描述 type 事件的类型，如onlick中的click； srcElement/target 事件源，就是发生事件的元素； button 声明被按下的鼠标键，整数，1代表左键，2代表右键，4代表中键，如果按下多个键，酒把这些值加起来，所以3就代表左右键同时按下；（f
阅读全文
posted @ 2023-02-07 13:25
JavaScript - 目录
摘要：javaScript - 输入与输出语句，javaScript中的数据类型，字符类型与其它基本数据类型的互相转换，typeof检测数据的数据类型 javaScript - 数组的创建方式，数组的属性，数组的常用方法，数组的全部方法 javaScript - 函数，函数的定义与函数的特性，函数的内置对
阅读全文
posted @ 2023-02-07 13:21
javaScript DOM - document 获取元素的方式，document 事件的三要素，事件的绑定与删除方式，常用事件，常用事件内置对象属性，事件流，事件方法中this与event.target的区别
摘要：获取元素： 1.document 获取元素的方式 getElementById 通过Id名获取 返回对象 getElementsByTagName 通过标签名获取 返回数组 getElementsByClassName 通过类名获取 返回数组 querySelector 通过选择器获取该选择器的第一
阅读全文
posted @ 2023-02-07 12:24
javaScript - Math对象 常用方法，全部方法
摘要：1.Math 常用方法 方法描述 abs(x) 返回 x 的绝对值。 ceil(x) 返回 x，向上舍入为最接近的整数。 floor(x) 返回 x，向下舍入为最接近的整数。 max(x, y, z, ..., n) 返回值最高的数字。 min(x, y, z, ..., n) 返回值最小的数字。
阅读全文
posted @ 2023-02-07 11:02
javaScript - date时间日期类的创建，全部属性，常用方法，全部方法
摘要：1.date时间日期类的创建 var d = new Date(); var d = new Date(milliseconds); // 参数为毫秒 var d = new Date(dateString); var d = new Date(year, month, day, hours, mi
阅读全文
posted @ 2023-02-07 10:57
javaScript - String对象的创建，全部属性，常用方法，全部方法，字符串不可变性
摘要：1.String对象的创建 //方式1 字面量方式 var str="levi"; //方式2 创建对象方式 var str=new String("levi"); 2.String对象的属性： 属性描述 constructor 对创建该对象的函数的引用 length 字符串的长度 prototyp
阅读全文
posted @ 2023-02-07 10:47
javaScript - 对象的创建，对象的遍历
摘要：1.对象的创建方式 //方式1 字面量方式创建 var student = { id: 1, say: function (message) { console.log(message) } } //方式2 Object创建对象 var student=new Object(); student.i
阅读全文
posted @ 2023-02-06 21:52
javaScript - 预解析
摘要：代码实例： console.log(data1) //undefined var data1=12; fn1(); //execute function fn1 function fn1(){ console.log("execute function fn1") } fn2(); //fn2 is
阅读全文
posted @ 2023-02-06 21:28
javaScript - 函数，函数的定义与函数的特性，函数的内置对象
摘要：1.函数的定义 //方式1 无参无返回值函数 function close(){ } //方式2 有参有返回值函数 function set(id,name) { return id+name; } //方式3 匿名函数 var callback=function (id,name){ } call
阅读全文
posted @ 2023-02-06 21:11
javaScript - 数组的创建方式，数组的属性，数组的常用方法，数组的全部方法
摘要：1.数组的创建方式 //方式1 var array=new Array(); array[0]="levi" //方式2 var array=new Array("png","jpg"); //方式3 var array=["levi","mikasa"] 2.数组的属性 属性 描述 constru
阅读全文
posted @ 2023-02-06 20:36
javaScript - 输入与输出语句，javaScript中的数据类型，字符类型与其它基本数据类型的互相转换，typeof检测数据的数据类型
摘要：1.输入与输出语句 //输出语句 alert("hello,world") //提示弹窗 console.log("hello，world") //输出到控制台 //输入语句 //第一个参数 设置提示用户输入的提示信息 //第二个参数 设置默认值 prompt("请输入你的年龄","18"); //
阅读全文
posted @ 2023-02-06 20:24
