vue
谷咕咕
正经人谁喜欢写代码
展开
-
springboot+vue实现websocket通信实例,进入页面建立连接
springboot+vue实现websocket通信实例。原创 2023-11-27 10:40:39 · 807 阅读 · 0 评论 -
vuex的坑TypeError: Cannot read properties of undefined (reading ‘state‘)
vuex的坑TypeError: Cannot read properties of undefined (reading 'state')原创 2022-12-01 10:03:42 · 1118 阅读 · 0 评论 -
Node Sass7.0.1版本与^4.0.0不兼容:解决
今天碰到了个很麻瓜的问题我的node是16的里面的Node Sass7.0.1版本比较高跑老项目不兼容,卸载重装,但是安装Node Sass4.0.0失败,奇怪了还好找到一个文章上d1.node uninstall node-sass2.npm i -D sass解决了...原创 2022-03-22 09:51:30 · 1708 阅读 · 4 评论 -
vue:学习心得:单页面?路由?难学?
vue:学习心得这里咕咕在b站看得尚硅谷的视频,大概花了8天左右,其中有点代码也敲敲,所以也算是不快不慢了。这里介绍一下咕咕的情况,咕咕算是一名java后端开发,最近在公司实习,闲暇的时间想了解一下vue。因为之间都是springboot的写的后台,前端用的thymeleaf+html,其实就是类似jsp。但是现在的项目都是前后端分离的项目,代表的就是vue。回过头来说说vue浏览器只能认识html+css+js,但是vue的项目里面的文件都是.vue结尾的文件?那是因为.vue是开发过程中的文原创 2022-02-24 17:44:28 · 967 阅读 · 0 评论 -
vue:通过bus(事件总线)任意组件之间通信
vue:通过bus(事件总线)任意组件之间通信实现任意组件之间通信事件总线怎么说呢就是将大家的方法放到bus上,传数据的组件调用bus上的方法,然后带上要传的数据(有限像参数),然后接收方就可以拿到数据了。看了例子1.定义数据总线2.在app.vue中,有两个方法,需要用到孙子组件的值3.孙子组件绑定总线上的方法,并且带上孙子组件上的数据。(例子中用的id)...原创 2022-02-21 17:16:00 · 539 阅读 · 0 评论 -
vue:父子组件之间传值,传统方式
vue:父子组件之间传值,传统方式父===》子将父组件的值===》子组件父组件通过标签属性,传递通过子组件通过props,接收子===》父传统的方式就是通过父组件定义好回调函数,将函数传递到子组件子组件调用接收到的函数。这里的例子就是,头部组件添加行信息,父组件,接收到添加的信息然后将函数传给子组件子组件接收,并使用成功添加需要源码的可以在码云上自己在下学习https://gitee.com/guyuanman/vue.git...原创 2022-02-21 11:16:36 · 395 阅读 · 0 评论 -
初步:创建vue项目,解读vue的第一个项目,从node=》解读
新手:创建vue项目,解读vue的第一个项目看到这篇文章,应该是安装好了node.js,和npm就是在官网下载node,然后傻瓜式下一步就行了,注意:== 里面有个选项add path 添加环境变量就行了 ==设置npm本地仓库,默认在cpan,我们切换到自己想要的地方,node_cache,刚下载node没有使用npm是没有这个目录的npm config set prefix "D:\nodejs\node_global"npm config set cache "D:\nodejs\n原创 2022-02-18 11:35:54 · 564 阅读 · 0 评论 -
vue:学习笔记
2022-2-15vue模板两大类插值语法:{{xxx}}给标签体赋值xxx需要是表达式,而不是语句(if,else等)指令语法:通过v-bind给标签属性赋值,绑定事件,包括url ,v-bind:href=“url”vue有很多指令数据绑定单项数据绑定v-bind:双向数据绑定v-model:value,可简写v-model 只能用于表单类元素input 单选 selectel绑定属性可以通过v.$mount(’#xx’)代替对象式data:{}函数式data原创 2022-02-15 17:45:46 · 504 阅读 · 0 评论 -
前端:flex:弹性盒子属性如何使用,实现div在div内水平垂直居中,div显示在一行,div之间间隔相同
前端:flex:弹性盒子属性如何使用在html中多个div是换行显示的,如果我要一行显示多个div盒子怎么办?这里离我可用float是可以实现的,但是今天我们讲讲flex直接上效果图谷咕咕用的开发工具是visual,这里无所谓的。.father{height: 300px; background: #cccccc; /* display: flex; *...原创 2019-10-14 19:39:16 · 1731 阅读 · 1 评论 -
visual studio code英文版切换成中文主题
visual studio code英文版切换成中文主题好了,今天小谷和大家讲讲visual studio code英文版切换成中文主题,当然语种大家可以随意切换。总结打开你下载的visual studio codeCtrl + Shift + X 输入 “Language Packs” (下载你需要的语种)重启后生效Ctrl + Shift + P输入 “display”(选择你下载...原创 2019-07-06 21:42:50 · 953 阅读 · 0 评论 -
echarts:在柱子上方显示数值,调整柱子的宽度,调整y轴的步长极限, 设置y轴的名称的样式
小谷最近学习echarts各种收集,百度到的样式修改。在柱子上方显示数值:label: { normal: { show: true, position: 'top', textStyle: { color: 'black' } }, }调整柱子的宽度:...原创 2019-03-07 17:10:16 · 9654 阅读 · 0 评论 -
vue:echarts菜鸟初学
vue:echarts菜鸟初学小谷最近学习的项目中涉及到echarts,然后百度,查询了一些关于echarts的资料。首先我们的项目是用vue中编写的(使用的工具是visual.studio)1.首先是安装:npm install echarts --save2.安装完成就是引入使用(类似于我们在vue-router路由跳转)main.jsimport echarts from '...原创 2019-03-07 14:57:24 · 1385 阅读 · 1 评论 -
vue基础:路由跳转的几种方式。
$nbsp 小谷刚开始学习vue,可以说是完全不懂了。想要实现h5中的跳转,都成了是头疼的事,进过查资料,得出以下总结,希望能对大家有用,也是对知识的记载。1.最简单的路由跳转方式。<router-link to="/home">我的订单</router-link>这种方法也是小谷最早实现的。1.首先给大家看下我的目录(创建项目的时候已经默认安装的了router,...原创 2019-03-02 16:31:49 · 7023 阅读 · 1 评论 -
npm install 安装过程卡住不动
npm install 安装过程卡住不动,在创建项目前,执行这段代码:npm config set registry http://registry.cnpmjs.org原创 2019-02-23 16:50:53 · 9176 阅读 · 1 评论 -
vue基础:非父子组件传值
vue基础:非父子组件传值本文共用到四个文件:根组件:App.vue两个子组件:Home.vue,News.vuejs文件:eveemit.js文章最后有所有文件步骤:1.新建一个js文件,引入vue并实例化,最后暴露这个实例vueemit.js文件import Vue from 'vue'var vueevent =new Vue()export default vue...原创 2019-01-22 10:49:55 · 681 阅读 · 0 评论 -
vue基础:绑定属性class,绑定style
vue基础:绑定属性class,绑定styleclass 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v-bind 来设置样式属性。1.通过v-bind:title="****"来绑定显示鼠标悬停时的信息。 <div v-bind:title="title">鼠标悬停</div>title:'我是一个title',2.通过v-bi...原创 2019-01-19 15:27:15 · 1893 阅读 · 0 评论 -
vue基础:获取表单数据,双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点
vue基础:获取表单数据,双向数据绑定 Vue事件介绍 以及Vue中的ref获取dom节点1.在vue中我们通过v-model进行数据绑定,vue其实就是实现mvvm的框架,mvvm表示,model的改变会影响view(视图),view的改变会影响model。在下面的例子中,msg的值已经在data中定义,但是我们通过表单中的v-model进行数据的绑定,输入就会影响msg的值。2.获取表单数...原创 2019-01-19 18:18:57 · 8869 阅读 · 1 评论 -
vue基础:事件绑定,通过事件获取数据
1.vue中对方法(事件)的绑定的两种方法:v-onclick:="()“和@click=”*()"需要注意的事在中调用的方法时,该方法需要在<button v-on:click="run1()">执行方法的第一种写法</button>data () { return { msg: '你好vue', list:...原创 2019-01-20 09:43:40 · 2182 阅读 · 0 评论 -
vue基础:将表单中的数据按列表显示在页面下,删除数据this.list.push(***),this.list.push(***)。
将表单中的数据按列表显示在页面下,删除数据1.添加数据1.在页面中,首先通过数据的双向绑定,表单中的v-model=“todo”,绑定数据。2.通过调用@click="doadd()"方法中的this.list.push(this.todo),将todo中的数据加到list中。3.通过循环列表显示。<template> <div id="app"> ...原创 2019-01-20 14:53:27 · 9314 阅读 · 1 评论 -
vue:基础todolist待办事项完整,数据双向绑定,和循环遍历,判断方法,回车触发事件
vue:基础todolist待办事项完整,数据双向绑定,和循环遍历,判断方法,回车触发事件点单选框,选项状态改变。在这个事件中,主要是对数据双向绑定,和循环遍历,判断方法的运用。1.其中我们对键盘事件做了捕获,当在表单中输入数据“回车时”添加信息的操作。<input type="text" v-model="todo" @keydown="doadd($event)"/>...原创 2019-01-20 18:44:37 · 554 阅读 · 1 评论 -
vue基础:模块化以及封装Storage组件,实现保存搜索的历史记录
vue基础:模块化以及封装localStorage组件,实现保存搜索的历史记录1.localStorage(长期存储)与 sessionStorage 一样,但是浏览器关闭后,数据依然会一直存在注意:localStorage(长期存储)与 sessionStorage 用法基本一致,应用类型的值要转换成json,1.保存//对象const info = { name: 'hou', ag...原创 2019-01-20 20:43:35 · 678 阅读 · 1 评论 -
vue基础:在跟组件(App.vue)调用外部组件
vue基础:在跟组件(App.vue)调用外部组件在vue学习中,我们发现将所有的组件,都放在根组件是不合理的,同样也是低效的。于是我们将不同的模块分割,需要哪个模块的时候就可以直接调用。这类似于html5中模板的性质。1.首先我们需要创建一个组件,所有的组件可以放在一个目录里,便于规范化管理。2.创建所有的组件也需要像根组件一样,严格的格式要求。<template> ...原创 2019-01-21 09:14:10 · 13643 阅读 · 5 评论 -
vue基础:To install it, you can run: npm install --save,写 scss样式报错
vue基础:To install it, you can run: npm install --save,写 scss样式报错最近在学习vue时一个报错,困扰了小谷好久。报错代码:This dependency was not found:* !!vue-style-loader!css-loader?{"sourceMap":true}!../../node_modules/vue-l......原创 2019-01-21 09:39:52 · 202284 阅读 · 16 评论 -
vue基础:生命周期函数。
vue基础:生命周期函数。组件挂载,更新和销毁的时候触发的一系列方法。生命周期函数也是放在methods:{}中可以了解成,vue在不同时期调用的方法和函数。beforeCreate(){ console.log('实例刚刚被创建1'); }, created(){ console.log('实例已经创建完成2...原创 2019-01-21 12:45:31 · 284 阅读 · 0 评论 -
vue基础:axios请求数据,vue-resource请求数据
vue基础:vue基础:axios请求数据,vue-resource请求数据一:axios请求数据完整1.安装命令:npm install axios --save2.导入,在哪用就在哪导入import Axios from 'axios';3.请求数据&lt;script&gt;import Axios from 'axios';export default { d...原创 2019-01-21 15:16:56 · 489 阅读 · 0 评论 -
vue基础:父子组件传值
vue基础:父子组件传值一.父–>子1.父组件调用子组件的时候,在父组件中绑定动态属性。<v-header :title="title"/>2.子组件中通过props接受父组件传来的数据props:['title']//接受父组件传来的titleHeader.vue<template> <div> <h2&g...原创 2019-01-21 20:25:40 · 173 阅读 · 0 评论 -
vue基础:父组件主动获取子组件的数据和方法
一.vue基础:父组件主动获取子组件的数据和方法1.调用子组件的时候定义一个ref在Home.vue<v-header ref='header'/>2.在父组件里面里面通过this.refs.header.属性this.refs.header.属性this.refs.header.属性this.refs.header.方法getchild(){ ...原创 2019-01-22 09:51:15 · 1581 阅读 · 0 评论 -
vue基础:数据绑定,绑定属性,循环渲染
&amp;lt;template&amp;gt; &amp;lt;div id=&quot;app&quot;&amp;gt; &amp;lt;h2&amp;gt;你好vue{{msg}}&amp;lt;/h2&amp;gt;/*数据绑定*/ &amp;lt;br&amp;gt; &原创 2019-01-19 10:25:22 · 589 阅读 · 0 评论