- 博客(41)
- 收藏
- 关注
RSS订阅原创 数组转对象，对象转数组方法
转之前：[{label: '男', value: 0},{label: '女', value: 1}]转之后：{0: '男', 1: '女'}
2025-01-21 11:18:14
79
原创 前端JS模块化对外暴露的三种方法
但值得注意的是，使用import（引入）和export（暴露）关键字只能在模块系统中如vue中使用，不能在普通的js使用。对外暴露有三种方式，分别时默认暴露、统一暴露、分别暴露。1.在新建的test.js文件中。1.在新建的test.js文件中。1.在新建的test.js文件中。2.在需要使用的页面中。2.在需要使用的页面中。2.在需要使用的页面中。
2023-11-20 15:00:54
1804
原创 gitee(码云)建立新仓库并推送项目代码步骤
10.再输入git add . （上传所有文件）也可以git add 某个文件夹名（ 上传具体某一个文件）6.git clone 复制某个仓库内克隆下载按钮点一下会有个https地址，将本地与远程仓库建立连接。7.连接成功以后会自动将远程仓库的新文件夹拉取到本地，此时新文件夹内只有一个git文件说明连接成功。9.在git Bash Here打开的命令窗口输入git status 查看可推送的文件。8.然后将需推送的完整项目的文件夹复制到拉取的远程仓库新文件夹内，与git文件同级。4.注册完成后新建仓库。
2023-09-27 11:43:09
1429
原创 xshell打包前端代码更新服务器部署命令
7.o 覆盖。2.rm -rf 某文件 删除某文件。4.cp 某文件 某文件夹 复制某文件至某文件夹（备份）3.mv 某文件 某文件夹 移动某文件至某文件夹。5.unzip 某文件压缩包 解压某文件压缩包。
2023-09-27 11:16:35
580
原创 vue三种模糊查询方式
前两种模糊查询根据输入的值直接查询（效果如图）最后一种模糊查询通过点击按钮查询（视情况定）模糊查询方式三(点击按钮搜索查询)模糊查询方式一(计算属性)模糊查询方式二(监听属性)
2023-03-29 17:39:50
4902
1
原创 VueX的使用
是适用于在项目开发时使用的状态管理工具。试想一下，如果在一个项目开发中频繁的使用组件传参的方式来同步中的值，一旦项目变得很庞大，管理和维护这些值将是相当棘手的工作。为此，为这些被多个组件频繁使用的值提供了一个统一管理的工具——。在具有的Vue项目中，我们只需要把这些值定义在VueX中，即可在整个Vue项目的组件中使用。1.安装这里我推荐用vue ui安装，里面的文件会自动生成一个叫store文件，里面有个index.js文件2.使用2.1初始化store下index.js里面的内容 2.2在main.js中
2022-07-04 20:34:36
483
原创 爷孙之间的相互通讯
首先有father(爷爷)，childDom(爸爸)，childsonDom(孙子)三个组件在father(爷爷)组件中传入两个数据foo，coo 然后在childDom(爸爸)组件中添加v-bind="$attrs"，相当用来连接爷爷传给孙子数据的桥梁 最后在childsonDom(孙子)组件中接收。 效果如图2. 利用$listeners实现孙传爷组件间的数据传递首先在childsonDom(孙子)组件中用$emit传递一个数据"upRocket" 然后在childDom(爸爸)组件中也添加一个桥梁，而
2022-06-27 19:21:44
316
1
原创 nextTick的使用
在使用vue的时候，不知道大家有没有遇到这种情况，明明对这个数据进行更改了，但是当我获取它的时候是上一次的值 当点击按钮了以后页面发生改变，但获取的值还是上一次的值 这时，如果想获取dom更新后的值就需要用到nextTick出场了此时点击以后获取的值就是dom更新后的值了 这里有的小伙伴就要问了，为什么是this.$nextTick调用而不是用vue.nextTick调用呢？因为this.$nextTick 跟全局方法 vue.nextTick 一样，不同的是，回调的 this 自动绑定到调用
2022-06-27 15:11:49
1211
原创 axios的简单封装
1.在脚手架的src下新建一个文件夹tools，里面再新建一个文件request.js，简单封装内容如下：2.在同一个文件夹中再新建一个与页面对应的文件比如在tool文件夹里新建一个aboutView.js，然后在aboutView.js中引入request.js3.最后在想拿到数据的组件里也就是AboutView.vue中引入aboutView.js...
2022-06-22 17:36:10
254
原创 slot插槽的使用
插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。1.基本使用效果如图： 2.具名插槽描述：具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。 效果如图：扩展：即使父组件对插槽的填充的顺序打乱，只要名字对应上了，就可以正确渲染到对应的插槽中。即： 父组件...
2022-06-20 19:03:01
317
原创 is的用法
用法1：用于动态组件且基于DOM内模板的限制来工作。总所周知，table里面嵌套tr td的写法是html语法的固定写法row是我们自己写的组件，但是html在渲染dom的时候，row对table来说并不是有效的dom，甚至会报错。正是因为html模板的限制，于是就诞生了is。接下来我们就用is解决上面的问题~用法2：有时候，在不同组件之间进行动态切换是非常有用的 。实现两个来回切换的效果：...
2022-06-20 16:30:09
519
原创 Vue中ref的用法
1、ref 加在普通的元素上，用this.$refs.（ref值） 获取到的是dom元素 2、ref 加在子组件上，用this.$refs.（ref值） 获取到的是组件实例，可以使用组件的所有方法。在使用方法的时候直接this.$refs.（ref值）.方法（） 就可以使用了。最后代码的效果就是x、y各点一次加1，最后实现x+y=z的效果 3、ref可以调用组件中的方法...
2022-06-17 18:53:17
17874
原创 Vue脚手架安装
脚手架安装1.脚手架搭建项目，需要安装Node.js，这里我们一共装了三个，npm、cnpm、yarn。（1）npm安装vue，首先安装好Node.js,然后建立文件夹，打开命令窗口，输入npm install -g @vue/cli （install=>安装 -g=>全局 vue/cli => vue的脚手架），回车等待安装，安装好后即可创建npm脚手架。打开文件夹，进入命令窗口，cd +文件名 进入指定文件夹，输入 vue create '自定义文件名' 回车创建。然后选择对应语言，Vue2还是Vue
2022-06-16 17:09:27
7724
原创 Object.defineProperty的缺点
Object.defineProperty的缺点在于不能进行一些响应式删除和修改，但也有解决办法如果没有发生响应式变化，可能是因为Object.defineProperty用来操作对象而不是数组
2022-06-01 20:10:52
2888
原创 数据代理(响应式原理的一部分)
Object.defineProperty的对象以及对象劫持有以下优势：1.无需显式调用，如Vue2中Object.defineProperty的对象以及对象劫持+发布订阅模式，只要数据发生变化直接通知变化，并驱动视图更新。2.可在set函数中精确得知数据变化并驱动试图更新
2022-06-01 20:07:19
128
原创 Data为什么必须是函数1
1.vue中组件是用来复用的，为了防止data复用，将其定义为函数。2.因为当 data 是函数时，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，实例化几次就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变3.如果data是对象时，这些实例用的是同一个构造函数，由于JavaScript的特性所导致，所有的组件实例共用了一个data，就会造成一个变了全都会变的结果。
2022-06-01 18:58:45
1853
原创 v-model的修饰符
lazy：默认情况下是实时更新数据，加上lazy，从输入框失去焦点，按下enter都会更新数据。 number：默认是string类型，使用number复制为number类型。 trim：用于自动过滤用户输入的首尾空白字符 <div id="app"> <!-- lazy,默认情况是实时更新数据，加上lazy，从输入框失去焦点，按下enter都会更新数据 --> <input type="text" v-model.lazy="msg">
2022-05-26 11:28:24
530
原创 v-model结合select使用
v-model结合select可以单选也可以多选。 <div id="app"> <!-- select单选 --> <select name="fruit" v-model="fruit"> <option value="苹果">苹果</option> <option value="香蕉">香蕉</option> <option value="西瓜">西.
2022-05-26 11:27:08
1944
原创 v-model结合checkbox(多选)使用
checkbox可以结合v-model做单选框，也可以多选框。checkbox结合v-model实现单选框，定义变量isAgree初始化为false，点击checkbox的值为true，isAgree也是true。 <div id="app"> <label for="isagree"> <input type="checkbox" id="isagree" value="" v-model="agree"/>同意协议 <.
2022-05-26 11:19:42
2033
原创 v-model结合radio(单选)使用
name属性radio互斥，只能选择一个框 使用v-model可以不用name就可以互斥 -->使用v-model要给value值 --> label for和id是绑定的 缺少其一label for不起作用--> v-model绑定`sex`属性，初始值为“男”，选择女后`sex`属性变成“女”，因为此时是双向绑定 <div id="app"> &l...
2022-05-26 11:17:43
297
原创 v-model的使用原理
v-model其实是底层调用了@input这个方法 <div id="app"> <!-- v-model其实是底层调用了@input这个方法 --> <h2>{{msg}}</h2> <input type="text" :value="msg" @input="changeValue"/> </div> <script src="vue.js"></script.
2022-05-26 11:13:54
134
原创 v-model的基本使用
<div id="app"> <h2>{{msg}}</h2> <input type="text" v-model="msg"/> </div> <script src="vue.js"></script> <script> const app = new Vue({ el: "#app",...
2022-05-26 11:04:50
114
原创 数组的响应方式
<div id="app"> <ul> <li v-for="item in letters">{{item}}</li> </ul> <h2>{{name}}</h2> <h2>{{title.age}}</h2> <button @click="btn">替换</button> </div> ...
2022-05-26 11:01:56
112
原创 v-for遍历对象
item表示属性值，key表示当前对象的属性名，index表示索引 <div id="app"> <ul> <!-- <li v-for="item in names">{{item}}</li> --> <!-- <li v-for="(item,index) in names" :key="index">{{item}}--{{index}}</li>
2022-05-26 10:27:09
3030
原创 v-on的键盘修饰词
<div id="app"> <!-- 监听键盘的事件 失去登录文本框焦点时 可以使用 --> <form @submit.prevent=''> 账号<input type="text" name="user"/> 密码<input type="text" name="password" /> <input type="submit" value="登...
2022-05-24 20:09:28
81
原创 v-on的按键修饰词
可以将暴露的任意有效按键名转换为修饰符使用 <div id="app"> <!-- <input type="text" @keyup.enter="submit" v-model="value"> --> => 按键码形式 <input type="text" @keyup.13="submit" v-model="value"> <!-- <input type="text" @k
2022-05-24 20:08:01
236
原创 v-on的事件修饰词
<div id="app"> <!--1 .stop的使用，btn的click事件不会传播，不会冒泡到上层 --> <div @click="btn"> <button @click.stop="btn2">阻止冒泡</button> </div> <!--2 .prevent 调用event.preeventDefault阻止默认行为 --> <for...
2022-05-24 20:06:47
73
原创 v-on参数的传递
1.如果需要传参，在页面中传的是实参，在methods中写的是形参 打印的是实参 2.如果在页面中没有写实参但是有括号，在methods中写了形参，会打印undefined 3.如果在页面中没有写实参也没有括号，在methods中写了形参，会打印event事件 4.如果想同时传事件和参数，就要传两个参数，第一个写$event,第二个是参数 5.如果只传事件，那么在页面中可以完全不写括号 打印的也是event事件代码如下：...
2022-05-24 20:05:50
545
原创 解决watch监听复杂数据类型中新值老值相同问题
这是Vue2.0版本的问题，与程序员们无关我们可以用到Json数据类型转换来解决这个问题代码如下： <div id="app"> <p>FullName: {{person.fullname}}</p> <p>FirstName: <input type="text" v-model="person.firstname"></p> </div>
2022-05-24 11:47:33
459
原创 侦听器的深度使用
watch无法直接监听复杂数据类型 要用到deep：true代码如下： <div id="app"> <div> FullName:{{person.fullName}} </div> <div> Firstname:<input type="text" V-model="person.firstName"/> </div> </div> .
2022-05-24 11:45:11
124
原创 侦听器的的基本使用
1.通过watch的使用，我们可以获取改变的新的和老的值，从而去改变一些东西2.如果改变和方法及计算属性没有关系的比如age，只要age发生变化，methods就会执行3.如果改变实例外的对象，方法及计算属性还有监听器都不会发生改变，但是如果重新编译方法及计算属性还有监听器的某个值，实例外的对象也会跟着发生变化。4.如果添加了immediate 就会立刻监听 如果不加只能改变的时候才会监听5.也可以用函数的方式监听，格式是 监听的对象："函数名"，然后在方法中调用函数代码如下:...
2022-05-24 10:54:52
285
原创 计算属性和方法的对比
1.计算属性是一个属性 必须要有返回值 methods不一定 2.计算属性在页面渲染时 不需要加括号 methods必须要加 3.计算属性有缓存 methods没有缓存 从性能上来讲 计算属性更具有优势代码如下： <div id="app"> ---方法--- <h2>{{getFullName()}}></h2> <h2>{...
2022-05-23 20:44:53
233
原创 Vue计算属性的get和set
get和我们普通在方法中调用的方法一致，都是得到的意思set是当fullName被修改时会被调用代码如下： <div id="app"> <h2>{{firstName}}-{{lastName}}</h2> <h2>{{fullName}}</h2> </div> <script src="./vue.js"></script> <scri
2022-05-23 20:31:41
388
原创 Vue计算属性的复杂使用
<!-- 现在有一个数组数据books，里面包含许多book对象 要求计算出所有book的总价格totalPrice。 -->代码如下： <div id="app"> <h2>总价格:{{totalPrice}}</h2> </div> <script src="../22.5.18/vue.js"></script> <script type...
2022-05-23 20:20:18
214
原创 Vue计算属性的基本使用
<!-- 现在有变量姓氏和名字，要得到完整的名字。 -->代码如下 <div id="app"> <!-- Mastache语法 --> <h2>{{firstName+ " " + lastName}}</h2> <!-- 方法 --> <h2>{{getFullName()}}</h2> <!-- 计算属性 --&g
2022-05-23 20:17:40
545
原创 bind的深入学习之动态绑定style（数组）
说明：类似绑定class，绑定style也是一样的。代码如下： <div id="app"> <h2 :style="getstyle">我是中国人</h2> </div> <script src="vue.js"></script> <script> const app = new Vue({ el:.
2022-05-21 10:45:31
145
原创 bind的深入学习之动态绑定style（对象）
说明：类似绑定class，绑定style也是一样的。代码如下： <div id="app"> <!-- <h2 :style="{fontSize:'50px'}">我是中国人</h2> --> <h2 :style="getStyle()">我是中国人</h2> </div> <script src="vue.js"></script>.
2022-05-19 20:32:43
187
原创 bind的深入学习之动态绑定class（数组）
说明： class属性中可以放数组，会依次解析成对应的class。代码如下： <div class="app"> <!-- 加上单引号当成字符串 --> <h2 :class="active,line">{{message}}</h2> <!-- 不加会被当成变量 --> <h2 :class="['active,line']">{
2022-05-19 17:30:36
317
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人