VueJs
文章平均质量分 50
vueJs
快乐de馒头
这个作者很懒,什么都没留下…
展开
-
vue项目中常用解决跨域的方法
跨域问题的出现是因为浏览器的同源策略问题。所谓同源就是必须有以下三个相同点:协议相同、主机相同、端口相同。如果其中有一项不同,即出现非同源请求,就会产生跨域。当我们请求一个接口的时候,出现如:Access-Control-Allow-Origin 字眼的时候说明请求跨域了。...原创 2022-08-13 20:39:38 · 848 阅读 · 0 评论 -
vuex之module的使用
page=${context.state.page}&size=${context.state.size}&username=${object.query}this.$store.dispatch('user/getAllUserList',{_thisthis,querythis.query})//this是Vue实例。//有命名空间提交方式,类似this.$store.dispatch("user/getAllUserList");//将token设置在请求头中提交,已经在拦截器中设置。...转载 2022-08-01 10:07:23 · 4271 阅读 · 0 评论 -
vue 的作用域插槽
让父组件中提供的插槽内容访问子组件中的数据。在子组件定义的插槽默认值,在父组件中修改子组件中的插槽默认值,但是数据user在子组件,父组件拿不到,想拿到就用下面的方法。例如lastName修改为firstName。...原创 2022-07-31 17:57:58 · 382 阅读 · 0 评论 -
.sync修饰符
这里就相当于。其中,父组件通过props将值传给子组件,子组件再通过$emit将值传给父组件,父组件通过事件j监听获取子组件传过来的值。上面例子中,父组件传了一个参数money给子组件,子组件通过$emit修改money后,将值同步到父组件。第三步举一个例子来说明。第一步先用一句话解释。...转载 2022-07-31 17:18:15 · 417 阅读 · 0 评论 -
inheritAttrs: false使用
测试转载 2022-07-31 16:42:30 · 1444 阅读 · 0 评论 -
vue 事件修饰符 .passive 最通俗的理解
让我给你举一个十分简单的例子,你有一个朋友要来你家,他如果提前告诉你,那么你可以提早准备午餐打扫卫生等,但是如果没有告诉,只有在等他进门时你才知道,那个时候你就来不及了。显然,不是这样的,不然vue也不会出这样一个事件修饰符。在vue中,不阻止默认事件,真正的目的是告诉浏览器,你可以不用去查询程序有没有阻止默认事件,也就是提前告诉浏览器程序不会阻止,那么意义是什么呢?vue中的事件修饰符中有一个十分特别的修饰符,vue官方文档是这样介绍的.passive会告诉浏览器你不想阻止事件的默认行为。...转载 2022-07-31 10:58:14 · 2229 阅读 · 0 评论 -
vue 组件 DOM的is属性
由于ul中只能放置li元素,如果将组件标签直接放进ul中会出现浏览器解析错误。所以这里使用is属性,声明该li是todo-item组件。文章来源vue官网文档。在此记录,方便自己查看。转载 2022-07-31 10:19:31 · 133 阅读 · 0 评论 -
Vue项目中v-bind动态绑定src路径不成功问题及解决
当动态绑定img的src的时候,vue数据绑定图片的相对路径或者是绝对路径的时候,需要require路径。原创 2022-07-30 15:14:48 · 4894 阅读 · 3 评论 -
vue项目打包上线时报错‘Failed to load resource: net::ERR_FILE_NOT_FOUND‘
这里的确是css以及js文件的路径问题,但解决时并不需要手动改路径或者加一段判断去修改,最方便的办法时在项目打包前的vue.config.js里面将publicPath属性添加或者修改为publicPath‘./’,然后重新打包。版权声明本文为CSDN博主「CS_ruler」的原创文章,遵循CC4.0BY-SA版权协议,转载请附上原文出处链接及本声明。原文链接https//blog.csdn.net/CS_ruler/article/details/125479780。...转载 2022-07-30 13:30:23 · 4586 阅读 · 0 评论 -
使用vue ui 安装插件element ui,安装依赖axios
vue-cli-plugin-element安装。原创 2022-07-28 19:34:01 · 543 阅读 · 2 评论 -
使用vue ui 可视化创建项目
然后输入命令vueui。全局安装vue-cli。原创 2022-07-28 19:13:55 · 166 阅读 · 0 评论 -
vue-cli脚手架创建项目
把上面的代码放在package.json的最后一个}的里面。App.vue根组件,承载项目中所有组件的根组件。但是不建议再package.json中修改。assets用到的资源,图片等。main.js项目的打包入口文件。component组件。第一步全局安装vue-cli。三、vue脚手架的自定义配置。public静态文件。第四步编译打包发布项目。src所有的源代码。...原创 2022-07-28 18:12:11 · 187 阅读 · 0 评论 -
vue ui框架 ant-design-vue
ant-design-vue官方地址:http://vue.ant-design.cn/docs/vue/introduce-cn/原创 2019-12-31 12:32:00 · 1849 阅读 · 0 评论 -
Vue CLI
https://cli.vuejs.org/zh/原创 2019-12-30 12:57:42 · 87 阅读 · 0 评论 -
Vue SSR
Vue SSR 指南:https://ssr.vuejs.org/zh/API 参考:https://ssr.vuejs.org/zh/api/原创 2019-12-30 12:55:05 · 83 阅读 · 0 评论 -
开启Apache的gzip压缩
webpack打包后bundle.js很大,启用Apache的压缩能减少在网络上传输的体积开启Apache的gzip压缩要让apache支持gzip功能,要用到deflate_Module和headers_Module。打开apache的配置文件httpd.conf,大约在105行左右,找到以下两行内容:(这两行不是连续在一起的)#LoadModule deflate_modu...原创 2019-12-26 18:56:22 · 111 阅读 · 0 评论 -
vuex
vuex https://vuex.vuejs.org/zh/Vuex 是一个专为 Vue.js 管理数据的。它采用集中式存储管理应用的所有组件的数据,并以相应的规则保证数据以一种可预测的方式发生变化。就是说vuex是用来管理数据的,可以把一些组件的数据放到公共的地方,方便其它组件调用。vuex 是 Vue 配套的 公共数据管理工具,它可以把一些共享的数据,保存到 vuex 中,方便 整...原创 2019-12-25 19:42:33 · 153 阅读 · 0 评论 -
在vue中,操作dom可以获取到页面中的任何元素
在vue中,操作dom可以获取到页面中的任何元素,不需要考虑组件之间的关系,简单粗暴。在项目中,遇到子组件需要获取父组件的元素,但是不太方便获取,后来给想获取的元素加上id,直接用document 获取到了父组件的元素:document .getElementById("badge")DOM的世界里面没有组件,只要在页面上就可以获取。...原创 2019-12-25 18:29:19 · 1697 阅读 · 0 评论 -
不错的前端文章
https://blog.csdn.net/gao_xu_520/article/details/80365799原创 2019-12-25 18:15:13 · 106 阅读 · 0 评论 -
js中getBoundingClientRect()方法详解
一.getBoundingClientRect()分析getBoundingClientRect()获取元素位置,这个方法没有参数getBoundingClientRect()用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。getBoundingClientRect()是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。该函数返回一个Object对象,...原创 2019-12-25 18:12:20 · 807 阅读 · 0 评论 -
动画特效贝塞尔
https://cubic-bezier.com/#.17,.67,.83,.67在这个网站可以调整动画的运动csscubic-bezier(.4,-0.3,1,.68) 就是动画特效,放到transition后面transition :"all 0.5s cubic-bezier(.4,-0.3,1,.68)";...原创 2019-12-25 17:44:30 · 122 阅读 · 0 评论 -
在安卓手机中调试网站
尝试在手机上 去进行项目的预览和测试1. 要保证自己的手机可以正常运行;2. 要保证 手机 和 开发项目的电脑 处于同一个 WIFI 环境中,也就是说 手机 可以 访问到 电脑的 IP3. 打开自己的 项目中 package.json 文件,在 dev 脚本中,添加一个 --host 指令, 把 当前 电脑的 WIFI IP地址, 设置为 --host 的指令值;+ 如何查看自己电脑所处...原创 2019-12-24 18:14:45 · 178 阅读 · 0 评论 -
vue-preview Vue集成PhotoSwipe图片预览插件
一个Vue集成PhotoSwipe图片预览插件vue-previewhttps://github.com/LS1231/vue-preview原创 2019-12-24 15:36:03 · 261 阅读 · 0 评论 -
vue中使用mui中的滑动组件时报错TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed
Uncaught TypeError: ‘caller’, ‘callee’, and ‘arguments’ properties may not be accessed on strict mode functions or the arguments objects for calls to them出现这个报错是因为mui中的tab-top-webview-main 滑动组件中的js,使...原创 2019-12-23 18:30:48 · 580 阅读 · 0 评论 -
ES6 中的 Promise
一、由异步嵌套引出ES6 中的 Promise// 需求:你要封装一个方法,我给你一个要读取文件的路径,你这个方法能帮我读取文件,并把内容返回给我const fs = require('fs')const path = require('path')/** * 根据路径读取文件内容 * fs.readFile读取文件是异步执行的 * @param fpath 读取路径 *...原创 2019-12-23 10:30:43 · 107 阅读 · 0 评论 -
MUI的使用
一、MUI注意:MUI不同于Mint-UI,MUI只是开发出来的一套好用的代码片段,里面提供了配套的样式、配套的HTML代码段,类似于Bootstrap;而Mint-UI,是真正的组件库,是使用Vue技术封装出来的成套的组件,可以无缝的和VUE项目进行集成开发。因此,从体验上来说,Mint-UI体验更好,因为这是别人帮我们开发好的现成的Vue组件。从体验上来说,MUI和Bootstra...原创 2019-12-22 12:19:09 · 378 阅读 · 0 评论 -
使用 饿了么的 MintUI 组件
一、MintUI 组件注意:MUI不同于Mint-UI,MUI只是开发出来的一套好用的代码片段,里面提供了配套的样式、配套的HTML代码段,类似于Bootstrap;而Mint-UI,是真正的组件库,是使用Vue技术封装出来的成套的组件,可以无缝的和VUE项目进行集成开发。因此,从体验上来说,Mint-UI体验更好,因为这是别人帮我们开发好的现成的Vue组件。从体验上来说,MUI和Bo...原创 2019-12-22 10:29:34 · 743 阅读 · 0 评论 -
二十、webpack中使用vue进行项目的开发
一、webpack 中如何使用 vue :1. 安装vue的包: cnpm i vue -S2. 由于 在 webpack 中,推荐使用 .vue 这个组件模板文件定义组件,所以,需要安装 能解析这种文件的 loader cnpm i vue-loader vue-template-complier -D3. 在 main.js 中,导入 vue 模块 import Vue f...原创 2019-12-21 14:10:46 · 141 阅读 · 0 评论 -
十九、vue 中的render
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...原创 2019-12-21 14:01:58 · 84 阅读 · 0 评论 -
npm的使用
npm安装模块 【npm install xxx】利用 npm 安装xxx模块到当前命令行所在目录; 【npm install -g xxx】利用npm安装全局模块xxx; 【npm install xxx】安装但不写入package.json; 【npm install xxx –save】 安装并写入package.json的”dependencies”中;......原创 2019-12-20 14:20:45 · 538 阅读 · 0 评论 -
webpack的使用
一、在网页中会引用哪些常见的静态资源? JS 常见的js文件后缀名: .js .jsx .coffee .ts(TypeScript 类 C# 语言) CSS 常见的css文件后缀名:.css .less .sass .scss Images 常见的图片文件后缀名:.jpg .png .gif .bmp .svg 字体文件(Fonts) ...原创 2019-12-20 12:26:24 · 355 阅读 · 0 评论 -
nrm的安装使用
作用:提供了一些最常用的NPM包镜像地址,能够让我们快速的切换安装包时候的服务器地址; 什么是镜像:原来包刚一开始是只存在于国外的NPM服务器,但是由于网络原因,经常访问不到,这时候,我们可以在国内,创建一个和官网完全一样的NPM服务器,只不过,数据都是从人家那里拿过来的,除此之外,使用方式完全一样; 运行npm i nrm -g全局安装nrm包; 使用nrm ls查看当前所有可用...原创 2019-12-20 11:27:48 · 96 阅读 · 0 评论 -
十八、watch、computed和methods之间的对比
computed属性的结果会被缓存,除非依赖的响应式属性变化才会重新计算。主要当作属性来使用; methods方法表示一个具体的操作,主要书写业务逻辑; watch一个对象,键是需要观察的表达式,值是对应回调函数。主要用来监听某些特定数据的变化,从而进行某些具体的业务逻辑操作;可以看作是computed和methods的结合体; 结合案例来看他们的区别:https:...原创 2019-12-20 11:18:45 · 90 阅读 · 0 评论 -
十七、vue computed计算属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA...原创 2019-12-20 10:52:44 · 71 阅读 · 0 评论 -
十六、vue 中watch属性的使用
一、watch的使用使用watch这个 属性,可以监视 data 中指定数据的变化,然后触发这个 watch 中对应的 function 处理函数。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont...原创 2019-12-20 10:21:30 · 185 阅读 · 0 评论 -
vue 名称案例
姓和名字拼接一个全名。方式一: <div id="app"> <!-- 分析: --> <!-- 1. 我们要监听到 文本框数据的改变,使用keyup事件 这样才能知道 什么时候去拼接 出一个 fullname --> <!-- 2. 如何监听到 文本框的数据改变呢??? --> 姓:<input...原创 2019-12-20 10:19:20 · 163 阅读 · 0 评论 -
十五、vue 路由
一、什么是路由 后端路由:对于普通的网站,所有的超链接都是URL地址,所有的URL地址都对应服务器上对应的资源; 前端路由:对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现; 在单页面应用程序中,这种通过hash改变来切换页...原创 2019-12-19 17:35:42 · 93 阅读 · 0 评论 -
十四、vue 使用 `this.$refs` 来获取元素和组件
使用 `this.$refs` 来获取元素和组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...原创 2019-12-19 16:51:21 · 2631 阅读 · 0 评论 -
vue组件 评论列表案例
父组件传递方法给子组件,在子组件执行父组件的方法。关键代码<!--利用事件机制把父组件的loadComments方法的引用传递给func--><cmt-box @func="loadComments"></cmt-box>//在子组件中this.$emit('func'),调用执行func方法,func是loadComments的引用,相当于是...原创 2019-12-19 16:02:52 · 308 阅读 · 0 评论 -
十三、vue组件
一、组件化与模块化的区别什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可; 组件化和模块化的不同: 模块化: 是从代码逻辑的角度进行划分的;方便代码分层开发,保证每个功能模块的职能单一; 组件化: 是从UI界面的角度进行划分的;前端的组件化,方便UI组件的重用; 二...原创 2019-12-19 10:42:38 · 93 阅读 · 0 评论