- 博客(53)
- 收藏
- 关注
RSS订阅原创 前端JS模块化对外暴露的三种方法
但值得注意的是，使用import（引入）和export（暴露）关键字只能在模块系统中如vue中使用，不能在普通的js使用。对外暴露有三种方式，分别时默认暴露、统一暴露、分别暴露。1.在新建的test.js文件中。1.在新建的test.js文件中。1.在新建的test.js文件中。2.在需要使用的页面中。2.在需要使用的页面中。2.在需要使用的页面中。
2023-11-20 15:00:54
1482
原创 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
1307
原创 xshell打包前端代码更新服务器部署命令
7.o 覆盖。2.rm -rf 某文件 删除某文件。4.cp 某文件 某文件夹 复制某文件至某文件夹（备份）3.mv 某文件 某文件夹 移动某文件至某文件夹。5.unzip 某文件压缩包 解压某文件压缩包。
2023-09-27 11:16:35
453
原创 vue三种模糊查询方式
前两种模糊查询根据输入的值直接查询（效果如图）最后一种模糊查询通过点击按钮查询（视情况定）模糊查询方式三(点击按钮搜索查询)模糊查询方式一(计算属性)模糊查询方式二(监听属性)
2023-03-29 17:39:50
4653
1
原创 find、findindex、indexof的区别
3.indexOf()方法返回在数组中可以找到指定元素的第一个索引，找不到返回-1。1.find()方法返回数组中第一个满足条件的元素,找不到返回undefined。2.findIndex()方法返回数组中第一个满足条件的索引,找不到返回-1。语法arr.find(callback)index每一次迭代查找的数组元素索引。index每一次迭代查找的数组元素索引。item每一次迭代查找的数组元素。item每一次迭代查找的数组元素。arr被查找的数组。arr被查找的数组。...
2022-07-26 10:00:35
1291
原创 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
449
原创 爷孙之间的相互通讯
首先有father(爷爷)，childDom(爸爸)，childsonDom(孙子)三个组件在father(爷爷)组件中传入两个数据foo，coo 然后在childDom(爸爸)组件中添加v-bind="$attrs"，相当用来连接爷爷传给孙子数据的桥梁 最后在childsonDom(孙子)组件中接收。 效果如图2. 利用$listeners实现孙传爷组件间的数据传递首先在childsonDom(孙子)组件中用$emit传递一个数据"upRocket" 然后在childDom(爸爸)组件中也添加一个桥梁，而
2022-06-27 19:21:44
273
1
原创 nextTick的使用
在使用vue的时候，不知道大家有没有遇到这种情况，明明对这个数据进行更改了，但是当我获取它的时候是上一次的值 当点击按钮了以后页面发生改变，但获取的值还是上一次的值 这时，如果想获取dom更新后的值就需要用到nextTick出场了此时点击以后获取的值就是dom更新后的值了 这里有的小伙伴就要问了，为什么是this.$nextTick调用而不是用vue.nextTick调用呢？因为this.$nextTick 跟全局方法 vue.nextTick 一样，不同的是，回调的 this 自动绑定到调用
2022-06-27 15:11:49
1170
原创 axios的简单封装
1.在脚手架的src下新建一个文件夹tools，里面再新建一个文件request.js，简单封装内容如下：2.在同一个文件夹中再新建一个与页面对应的文件比如在tool文件夹里新建一个aboutView.js，然后在aboutView.js中引入request.js3.最后在想拿到数据的组件里也就是AboutView.vue中引入aboutView.js...
2022-06-22 17:36:10
223
原创 slot插槽的使用
插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。1.基本使用效果如图： 2.具名插槽描述：具名插槽其实就是给插槽娶个名字。一个子组件可以放多个插槽，而且可以放在不同的地方，而父组件填充内容时，可以根据这个名字把内容填充到对应插槽中。 效果如图：扩展：即使父组件对插槽的填充的顺序打乱，只要名字对应上了，就可以正确渲染到对应的插槽中。即： 父组件...
2022-06-20 19:03:01
296
原创 is的用法
用法1：用于动态组件且基于DOM内模板的限制来工作。总所周知，table里面嵌套tr td的写法是html语法的固定写法row是我们自己写的组件，但是html在渲染dom的时候，row对table来说并不是有效的dom，甚至会报错。正是因为html模板的限制，于是就诞生了is。接下来我们就用is解决上面的问题~用法2：有时候，在不同组件之间进行动态切换是非常有用的 。实现两个来回切换的效果：...
2022-06-20 16:30:09
474
原创 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
17740
原创 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
7665
原创 split（），slice（），splice（）的区别与应用
split()是使用指定的分隔符字符串将字符串分割成子字符串，返回一个子字符串数组，不改变原字符串slice（）方法提取某个字符串的一部分，并返回一个新的字符串，不会改变原字符串splice（）方法通过删除或者添加新元素来修改数组，并以数组形式返回被修改的内容，此方法会改变原数组总结 split（），slice（）是用来操作字符串的，splice（）用来操作数组2. split（）不改变原字符串，返回数组，（）里面需要添加一个分隔符字符串，slice()不改变原字符串，返回新的
2022-06-11 21:00:36
672
原创 Object.defineProperty的缺点
Object.defineProperty的缺点在于不能进行一些响应式删除和修改，但也有解决办法如果没有发生响应式变化，可能是因为Object.defineProperty用来操作对象而不是数组
2022-06-01 20:10:52
2826
原创 数据代理(响应式原理的一部分)
Object.defineProperty的对象以及对象劫持有以下优势：1.无需显式调用，如Vue2中Object.defineProperty的对象以及对象劫持+发布订阅模式，只要数据发生变化直接通知变化，并驱动视图更新。2.可在set函数中精确得知数据变化并驱动试图更新
2022-06-01 20:07:19
95
原创 Data为什么必须是函数1
1.vue中组件是用来复用的，为了防止data复用，将其定义为函数。2.因为当 data 是函数时，组件实例化的时候这个函数将会被调用，返回一个对象，计算机会给这个对象分配一个内存地址，实例化几次就分配几个内存地址，他们的地址都不一样，所以每个组件中的数据不会相互干扰，改变其中一个组件的状态，其它组件不变3.如果data是对象时，这些实例用的是同一个构造函数，由于JavaScript的特性所导致，所有的组件实例共用了一个data，就会造成一个变了全都会变的结果。
2022-06-01 18:58:45
1804
原创 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
488
原创 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
1909
原创 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
1950
原创 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
255
原创 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
102
原创 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
84
原创 数组的响应方式
<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
82
原创 v-for遍历对象使用key
使用key如果要插入赵六使用diff算法高效如果使用index做key会一直变，所以解决办法是使用元素唯一的值，比如id等其他 <div id="app"> <ul> <li v-for="(item,index) in title" :key="item.id">{{item.name}}--<input type="text" /></li> </ul> <button typ
2022-05-26 10:35:48
1168
原创 v-for遍历对象不使用key
不加key如果要插入s依次改变 <div id="app"> <ul> <li v-for="(item,index) in letter">{{item}}--{{index}}</li> </ul> <button @click="add1">没有使用key</button> </div> <script src="vue.js".
2022-05-26 10:32:42
645
原创 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
2997
原创 v-show
v-if 在首次渲染的时候，如果条件为假，什么也不操作，页面当作没有这些元素。当条件为真的时候，开始局部编译，动态的向DOM元素里面添加元素。当条件从真变为假的时候，开始局部编译，卸载这些元素，也就是删除。 v-show 不管条件是真还是假，第一次渲染的时候都会编译出来，也就是标签都会添加到DOM中。之后切换的时候，通过display: none;样式来显示隐藏元素。可以说只是改变css的样式，几乎不会影响什么性能。 v-if 和...
2022-05-24 20:15:44
383
原创 v-if的demo
在登录网站是经常可以选择使用账户名或者邮箱登录的切换按钮。要求点击按钮切换登录方式。 <div id="app"> <span v-if="isUser"> <label for="user">用户</label> <input type="text" placeholder="请输入用户"> </span> <span v-else> <l
2022-05-24 20:14:21
80
原创 v-if、v-else、v-else-if
v-if、v-else、v-else-if联合使用相当于if、elseif、else，但是在条件比较多的时候建议使用计算属性。 <div id="app"> <h2 v-if="age<18">小于18岁未成年</h2> <h2 v-else-if="age<60">大于18岁小于60岁正值青壮年</h2> <h2 v-else>大于60岁老年</h2> &l
2022-05-24 20:11:35
179
原创 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
64
原创 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
201
原创 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
54
原创 v-on参数的传递
1.如果需要传参，在页面中传的是实参，在methods中写的是形参 打印的是实参 2.如果在页面中没有写实参但是有括号，在methods中写了形参，会打印undefined 3.如果在页面中没有写实参也没有括号，在methods中写了形参，会打印event事件 4.如果想同时传事件和参数，就要传两个参数，第一个写$event,第二个是参数 5.如果只传事件，那么在页面中可以完全不写括号 打印的也是event事件代码如下：...
2022-05-24 20:05:50
499
原创 解决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
390
原创 侦听器的深度使用
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
90
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人