Vue
穿西装的水獭
小小白=》小白
展开
-
VUE脚手架更新
用vue命令创建命令时发现提示需要更新vue-cli。原创 2024-06-10 14:45:04 · 342 阅读 · 0 评论 -
前后端分离项目-社交管理系统之处理跨域请求axios,配置Vuex(state,getters,mutations,actions),请求拦截,获取Token,解析Token学习笔记(四)
写在前面 项目的学习和制作来到了各种细节处理和关键的Vuex的阶段。前面实现了配置路由,展示的跳转等功能。现在记录学习过程中值得反复多看的问题和技术。 axios跨域请求 这个项目后端代码部署在端口500,前端在8080。这就导致了跨域问题的出现,在前端页面中用axios请求服务器端口8080的资源则不会有问题。否则就产生了跨域。 使用axios的方法很简单,在client文件目录下npm i axios。在src文件夹下mian.js引用 import axios from 'axios' Vue.pro原创 2020-08-03 22:09:30 · 1995 阅读 · 0 评论 -
前后端分离项目-社交管理系统之前后端连载,主界面的搭建的展示实现登录注册按钮展示对应的组件 路由的配置和使用 学习笔记(三)
前端vue路由配置,组件联动 现在已经成功把主页面的框架搭建好,背景图片,各种按钮已经写好。一般我们按钮用a标签来展示,然后可能跳转到href属性里的路径中。 但是 如果按照传统的想法继续进行开发。首先我们得需要好多的html。并且每个页面中如果有同样的部分,比如上导航栏以及Footer部分。我们几乎每个页面都要有。而他们都是组件,他们的样式以及HTML都是写在组件文件夹的.vue文件中。如果要使用多个html进行注册,登录的跳转显然不够好。引入vue-router插件。我们想进行单页开发,只用一个html原创 2020-08-01 22:30:46 · 2594 阅读 · 0 评论 -
前后端分离项目-社交管理系统之前后端连载,主界面的搭建的展示 组件化开发 学习笔记(二)
前后端连载 当我们写好了后端代码,各种接口的实现。接下来我们转入前端需要做的事情。 第一步 首先自然是创建一个vue项目。同样的使用node.js在终端中下载vue以及vue-cil。 npm i npm -g npm i @vue/cli -g 在终端中输入这两个命令。下载好之后如果幸运通过vue -V命令能够查看到vue的版本。说明你的vue已经安装好了。但是我遇到了个问题,记录下来: 1.‘vue’ 不是内部或外部命令,也不是可运行的程序 明明已经下载了为什么不成功呢。通过百度清一色的解答都是添加环境原创 2020-07-31 19:13:19 · 4392 阅读 · 0 评论 -
vue学习之交换布局以及模糊查询
效果展示 交换布局 vue框架是典型的MVVM前端框架,不提倡程序猿通过操作dom元素来达到效果。并且操纵dom元素不利于性能优化消耗较多内存。 交换布局的核心其实就是满足条件的一方展示。用到的是v-if指令, <div id="search"> <!-- 查询 --> <input type="text" name="" id="find" placeholder="请输入搜索内容" v-model="search_content"/> &原创 2020-07-11 18:21:26 · 1782 阅读 · 0 评论 -
用CSS和Vue框架+axios写一个简单的天气查询网页
做一个天气查询 效果图 html+css部分 html 先上代码再分析 <div class="app" id="app"> <div class="img"> 知 天 气 </div> <div class="input-item"> <input type="text" v-model="city" @keyup.enter="searchWeather" class="input" placeholder="输入要查询的天气"/>原创 2020-05-31 21:42:27 · 2425 阅读 · 2 评论 -
Vue的常用指令以及JS的常用事件(Vue,Js学习笔记)
操作DOM元素和使用Vue指令 对比学习是一种比较好的学习方法。最近将Vue基础和JS基础进行对比学习整理出笔记 关于@keyup和onkeyup Js常用事件中少不了键盘事件例如onkeyup,我们需要操作DOM元素来实现触发事件。例如在input中输入展示并摁回车键能让原本隐藏的div展示出来分别用两种方法来介绍 <!-- 通过操作dom实现 --> <input type="text" id="input" placeholder="输入展示后出现对应div"/> <di原创 2020-05-27 19:58:07 · 352 阅读 · 0 评论 -
“面向开发文档学习”之Vue基础(二)生命周期钩子
生命周期钩子 create 和 mounted 在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),property 和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el property 目前尚不可用。 以上是官方文档对于create生命周期钩子的解释。这里指的注意的是挂载阶段还未开始。怎么理解呢,可以理解为挂载未开始也就是说模板template还未渲染成html页面,所以此时我们通过document.getElementById原创 2020-05-26 21:52:45 · 429 阅读 · 0 评论 -
“面向开发文档学习”之Vue基础(一)数据与方法
Vue基础之数据处理 接触前端开发近两个月,一直没有能够完全系统的学习vue,而是通过网上的教程以及通过练习简单的项目来进行学习。突然想到前辈所说的基础之重要,决定开始一点点捡漏,把之前vue学习遗漏的基础补上。 data 1.开发文档是如是介绍data:当一个 Vue 实例被创建时,它将 data 对象中的所有的 property(所有物) 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。 // 我们的数据对象 var data = {原创 2020-05-26 19:53:28 · 276 阅读 · 0 评论