Vue
文章平均质量分 58
我yi癫狂
个人网站:www.k1998.xyz
展开
-
DOMException: Failed to execute ‘appendChild‘ on ‘Node‘: This node type does
在使用nuxt时出现了下面得错误DOMException: Failed to execute ‘appendChild’ on ‘Node’: This node type does最后把created里的方法放到mounted里就行了原创 2021-03-04 15:26:27 · 3687 阅读 · 1 评论 -
js的三元表达式用来替换表格中的颜色
var k1 = 3;var k2 = 0;var a = k1=='1'?'color-success':k1=='0'?'color-red':k1=='3'?'color-kejin':''console.log(a)原创 2020-08-09 10:34:19 · 1153 阅读 · 0 评论 -
如何安装nuxt
因为vue是单页面应用,所以不被Seo,如百度和Google抓取到,在Vue中如果想要爬虫爬到就必须使用nuxt那么如何安装使用呢?yarn create nuxt-app <project-name>cd <project-name>yarn buildyarn start必须先build,否则启动就会报错启动成功后打开页面nuxt算是启动成功了目录结构...原创 2020-06-30 11:38:28 · 1357 阅读 · 0 评论 -
.sync的一个用法
面试时,有人问了我修饰符是什么,就是一个点后面加一个单词,我当时还以为是什么文件夹后缀呢。很是尴尬这里主要学习下.sync的一个用法假设下场景:这里有一个父组件,父组件中有个money,需要传到子组件中,但是我子组件又想改变这个值,该怎么做呢,直接在方法中改值肯定是错的,必须传递一个方法和值到父组件中才行。但是这样就必须在父组件中再注册一个方法,这样就有点麻烦了,所以就用到了sync原始比较繁琐的方式父组件<HelloWorld :money=money @update:money .原创 2020-06-28 15:39:25 · 1592 阅读 · 0 评论 -
如何封装并发布一个属于自己的ui组件库
以前就一直有个想法自己能不能封装一个类似于elementui一样的组件库,然后发布到npm上去,毕竟前端说白了,将组件v上去,然后进行数据交互。借助这次端午,终于有机会,尝试自己去封装发布组件库了我这里了只做最简单的按钮和输入框的封装,重在如何将组件发布到npm上去原材料:components中两个封装好的组件在src同级目录下创建一个文件夹packages以后我们的所有操作都是基于packages这个文件进行的,也就是将它打包成dist新建一个index.js的同时,将上面两个组件丢.原创 2020-06-28 14:59:08 · 7420 阅读 · 1 评论 -
slot的使用
普通插槽在嵌入的组件标签中加入内容,如果子组件中有slot就显示,否则就是不显示父组件<h1>Hello 父组件</h1><Child> <p>这是一些初始内容</p> <p>这是更多的初始内容</p></Child>子组件<h1>Hello World</h1><slot></slot>如果不加入slot里的内容就不会显示Child原创 2020-06-10 11:10:25 · 197 阅读 · 0 评论 -
MockJs案例
有时候前端写好模板后,后端还完工,那么总不能一直让项目停滞吧,这里就用Mockjs来模拟后端接口的数据,让我们先人一步完成项目。首先创建一个html,导入axios和mockjs再用mock去拦截请求,如果后端接口写好了,就把mock注释掉即可,一点不影响项目进展!!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpor.原创 2020-05-17 12:52:18 · 485 阅读 · 0 评论 -
项目实战+感慨
已经好久没写博客了,自从接触了项目以后,发现很难再挤出时间来写博客,大部分时间都是在关注项目的进展,以及查阅相关的资料。我想这也是很多程序员入职以后就很少写博客的原因。前言最近一段时间我接触了很多前端的东西,比如,uniapp、vuepress、小程序1、用uniapp写了一个视频网站http://www.k1998.xyz/h5/ ,,,自己做的后端接口2、用vuepress写了...原创 2020-04-24 23:58:52 · 376 阅读 · 0 评论 -
Vs Code如何自定义设置一键代码补全
有时候是不是看到别人输入一个vue就能打印整个代码,感觉很神奇,本文就以vue为案例教你如何使用这种骚操作!!!点击文件->首选项->用户代码片段输入vue.json(如果没有则新建代码片段)(我这里选择的是以vue结尾的文件,如果是html就输入html.json,其他文件则同样处理)然后你会看到一个中括号里里面全是注释删掉选中的部分,,将其他的注释还原这里解释...原创 2020-04-11 00:21:28 · 9796 阅读 · 0 评论 -
如何解决vuepress部署出现样式问题
以前在安装hexo的时候出了样式问题,现在用vuepress也出现了相同的问题。本地测试完全可以然而打包之后就彻底乱了即使是自己本地打包成dist之后也会出现相同的问题有点困扰,应该是打包配置的问题...原创 2020-03-25 23:22:32 · 6023 阅读 · 15 评论 -
vue项目总结
axiosaxios.defaults.baseURL = "http://localhost/public/index/video/"axios.defaults.headers.post['Content-Type'] = ' application/json'Vue.prototype.$http = axios this.$http.post( 'dunmyli...原创 2020-03-18 18:15:00 · 223 阅读 · 0 评论 -
uni-app打包h5
如果我们想打包成直接浏览的h5,我们需要配置manifest.json这个文件,在其中的h5配置中加入publicPath配置,配置如下: 代码为: "h5" : { "publicPath": "./" }, 配置好这个后,以后打包就会生产(./xxx)的引用,...转载 2020-03-17 15:22:19 · 2868 阅读 · 0 评论 -
Vue组件传参
父组件向子组件传参数据:父组件<test :message="msg"></test>msg: 'Hello uniApp'子组件(test.vue)<text>{{message}}</text>props:["message"]方法:父组件<test @testShow="testClick"></t...原创 2020-03-08 19:10:18 · 148 阅读 · 0 评论 -
Vue及React脚手架安装
Reactnpm i -g create-react-appcreate-react-app projectVuecnpm install -g vue-clivue create project原创 2020-02-25 20:23:11 · 300 阅读 · 0 评论 -
v-for渲染img标签图片
错误的示例<div v-for="item in list"> <img src="{{item.image}}" /></div>这样做会报错正确的做法应该是<div v-for="item in list"> <img :src="item.image" /></div&g...原创 2020-02-10 22:44:05 · 5409 阅读 · 4 评论 -
TypeError: Cannot set property 'msg' of undefined
在axios中想把数据取出来this. msg = “kkk”但是却报TypeError: Cannot set property ‘msg’ of undefined的错误后来找到,原来是自己没有函数不是箭头函数导致的如果不是箭头函数的话,this的指向就会有问题,然后一直报错将一下代码改为axios.get(url).then(function(res){ ...原创 2020-02-10 21:27:04 · 1109 阅读 · 0 评论 -
Vue之splice和push
methods:{ getIt(){ this.list.push({name:"aaa"}) }, delIt(){ this.list.splice(0,1) } }对于splice()前面的是序列号,后面的是删除的个数序列号为1的时候,从后面删序列号为0的时候,...原创 2020-02-10 20:36:37 · 1081 阅读 · 0 评论 -
v-for指令案例详解
对于v-for指令,以前老是不能理解,经常记混,所以特地写篇笔记来加强下记忆,希望借此能学的更深刻一点v-for顾名思义就是个for循环,是vue的一个循环。在遍历json字符串的时候有奇佳的效果,感觉就是为他们而生的。1、数组如果给你个数组,里面放了值你怎么遍历出来呢。在java中一般用for循环,再用个i++把整个整个数组渲染出来,而vue则简化了这个操作,相当于将item变成一个变...原创 2020-02-10 16:23:14 · 1024 阅读 · 0 评论 -
小程序如何将wx.request里的数据传出去
设置一个事件,用来测试用类似于vue中的this.msg = result.data[1].receiver并不能把值传出去但是用setData却可以,代码如下 btnclick:function(){ var that = this; wx.request({ url: 'http://www.k1998.xyz/kjh/reciever.php'...原创 2020-02-08 17:17:22 · 1105 阅读 · 1 评论 -
centos7安装最新版node
为了在linux服务端运行前端以及node后端项目,就必须在服务器上安装node了但是想要运行前端项目版本就必须是8.x以上的,所以我们干脆安装最新的node下载进入下面的官方网站https://nodejs.org/en/download/点击64位的Linux下载复制该网址这里以现在最新的12版本为例在ssh上输入wget https://nodejs.org/...原创 2020-02-05 21:26:07 · 7061 阅读 · 1 评论 -
vue cli 4.x打包后如何部署到tomcat服务器上
使用npm run build打包好dist后,不能直接打开里面的index.html,否则页面是一片空白=================================这时候我们就需要用服务器来代理我们的页面,可以使用ningx,tomcat,或者apache,这里我们使用tomcat当作范例找到tomcat的webapp目录找到tomcat的文件夹后,在webapp文件夹下放入我们需...原创 2020-02-05 20:42:56 · 2853 阅读 · 1 评论 -
vue 3.4x以上如何改变项目运行端口号
我用3.4版本的vue-cli构建了一个vue项目,然后我想修改项目运行之后的访问端口在网上查了一下,很多都是2.0+的版本,查来查去都说是什么在 config目录下index.js文件中修改端口号。。。。。。。都抄来抄去的新的vue项目目录结构下并没有config文件夹 只好自己找,我们...转载 2020-01-27 16:01:55 · 1584 阅读 · 1 评论 -
methods中axios里的数据无法渲染到页面
最近在研究axios聊天室室遇到一个问题将axios获取到的数据传递给data,从而改变页面中的数值,但是结果令人失望这是data里的数据原想将data中的items数组换成axios里的response.data,后来发现items一直为空,就拿字符串做实验了,里面放的123,而在axios中将items改成kkk结局是:在网页中渲染的数据还是1232,根本无法改变dat...原创 2019-11-26 18:52:30 · 1245 阅读 · 0 评论 -
vue调用methods里的方法
刚学vue的时候,以为要想方法自启动,只能通过生命周期函数的钩子。而methods里的函数大多用@ckick进行调用要想直接启用里面的方法,给挂载的vue一个名字就行了,如下var app = new Vue({ el: "#app", methods:{ aaa:function(){ alert("Hello world"); ...原创 2019-11-26 12:22:47 · 7892 阅读 · 0 评论 -
建立Vue脚手架的必要性
首先所有文件都放到一个html,代码多了之后阅读体验非常差。其次建立这样的文件夹后,发现竟然不能随时更新,有缓存的情况原创 2019-11-25 22:47:30 · 2390 阅读 · 0 评论 -
Vue动画效果
.v-enter, .v-leave-to { opacity: 0; transform: rotateY(120deg); } .v-enter-active, .v-leave-active { transition: all 1s ease; }<transition> <div v-cloak v-show="f...原创 2019-11-24 23:08:27 · 194 阅读 · 0 评论 -
vue-cli
全局安装vue-clinpm install -g cnpm --registry=https://registry.npm.taobao.org原创 2019-11-16 22:03:12 · 95 阅读 · 0 评论 -
【Vue】小案例
<!DOCTYPE html><html><head><meta charset="UTF-8"> <title></title><script src="vue.js"></script><style type="text/css"></style><...原创 2019-11-12 17:39:15 · 377 阅读 · 0 评论 -
ERROR in multi ./src/main.js dist/bundle.js
原命令webpack .\src\main.js .\dist\bundle.js报错ERROR in multi ./src/main.js ./dist/bundle.jsModule not found: Error: Can’t resolve ‘.\dist\bundle.js’ in ‘C:\Users\Tecna1205\Desktop\vue\webpack-study’...原创 2019-08-25 11:27:25 · 1732 阅读 · 2 评论 -
安装webpack
安装webpack遇到个坑,问题的话应该是项目使用的是webpack2.X版本,这样就会覆盖之前的版本,导致项目配置错误。所以最好不要用全局安装cd进相关文件夹后cnpm install -g webpackcnpm init当前项目安装:cnpm install --save-dev webpack此时就安装成功,可以检验下webpack -v...原创 2019-08-25 11:14:41 · 283 阅读 · 0 评论 -
vue前期知识点笔记
v-bind 绑定元素 title=“message”v-if=“seen” Reverse Message 改变颜色标签中的颜色style中 color:red red的颜色不需要加“”所以注意 且不能出现 一个标签中只能有一个style= div中 style=color:redvue中 :style="{color:‘red’}" 类似...原创 2019-08-25 10:06:19 · 131 阅读 · 0 评论