Vue浅谈
浅谈Vue
最近在学习Vue相关的知识点并且也做一些练手,就在学习过程中出现的各种坑爹的地方做一个总结!之后再遇到也不会抓瞎。
1.Vue工程的安装
(1)首先先安装node.js这是Vue的运行基础。登录官网下载相关包安装即可,不再赘述。
(2)其次是安装Vue-cli 脚手架,进入到cmd命令行去执行下面命令。
npm install vue-cli
(3)创建基于webpack模板的项目
vue init webpack (项目名)
npm install
npm run dev
npm install axios
在node_models文件夹中能看到axios即为安装完成。
(2.)实际代码中使用axios
首先先在main.js中导入axios之后再到具体使用axios的地方,使用this.axios调用。
3.在Vue中使用bootstrap
(1)在vue工程目录中安装bootstrap,使用命令。
npm install bootstrap --save-dev
(2)安装成功后,能够在package.json文件夹中看到bootstrap这个模块。这时候需要在main.js中添加如下内容:
(3)添加完成之后启动工程,在实际组件中直接使用bootstrap相关的东西即可。
4.在Vue中通过axios实现跨域操作。
(1)在前后端分离的情况下,vue通过axios获取后端开发提供的api往往有的时候会出现跨域的问题,在查找了很多办法之后,发现下 面这种是最简单有效的。
首先在index.js中添加如下内容。
我是这样理解的通过这种配置将ip端口隐藏掉,以“欺骗”浏览器的同源策略,从而实现跨域!
(2.)在实际使用axios的地方将url写成这样的形式。
api相当于ip和端口,/后面的内容是具体的url。
这样操作之后发现axios不会报错了!
5.在使用vue的过程中遇到一个叫做router-link的标签,本质上讲它是一个a标签,通过路由将对应的组件的内容渲染到<router-view>标签中。但是在使用过程中有时我们需要传给它个参数,从而实现根据参数取值,来渲染类似于url加上参数发给后端取数据,在使用过程中发现没想象的那么简单,多方查找找到以下方法解决了这个问题。
(1.)首先是路由的配置,在vue组件后面加上参数
(2
)在使用router-link处拼接字符串,
这样设置之后跳转到相关组件的时候会发现url中带有参数了!
(3)在跳转之后的组件中取这个id
(4)然后拼接url通过axios发送GET请求,来获取你想要的内容。(本质上实现了通过条件获取数据,在后端只要提供的url能支持这中获取方式,将参数作为查询条件获取数据返回即可!)
(5)因为后端也是我自己来写的所以我是这样做处理的。
url设置
视图函数,这样 前端发送的id是什么后端返回的数据就是这个id的所有内容!
Vue浅谈的更多相关文章
- Vue 浅谈前端js框架vue
Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...
- [Vue]浅谈Vue3组合式API带来的好处以及选项API的坏处
前言 如果是经验不够多的同志在学习Vue的时候,在最开始会接触到Vue传统的方式(选项式API),后边会接触到Vue3的新方式 -- 组合式API.相信会有不少同志会陷入迷茫,因为我第一次听到新的名词 ...
- 浅谈Vue.js
作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...
- 浅谈Vue不同场景下组件间的数据交流
浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
- 【Vue】浅谈Vue不同场景下组件间的数据交流
浅谈Vue不同场景下组件间的数据“交流” Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...
- 浅谈Vue响应式(数组变异方法)
很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...
- 浅谈MVVM模式和MVP模式——Vue.js向
浅谈MVVM模式和MVP模式--Vue.js向 传统前端开发的MVP模式 MVP开发模式的理解过程 首先代码分为三层: model层(数据层), presenter层(控制层/业务逻辑相关) view ...
- 浅谈单页应用和多页应用——Vue.js向
浅谈单页应用和多页应用--Vue.js向 多页面 多页面应用:每次页面跳转,后台都会返回一个新的HTML文档,就是多页面应用. 在以往传统开发的应用(网站)大多都是多页面应用,路由由后端来写. 页面跳 ...
- 浅谈Vue下的components模板
浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单 ...
随机推荐
- jdbc-日期格式的转换及代码示例
时间类型相互转换 把数据库的三种时间类型赋给java.util.Date,基本不用转换,因为这是把子类对象给父类的引用,不需要转换. java.sql.Date date = - java.ut ...
- List之Union(),Intersect(),Except() 即并集,交集,差集运算。
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
- c#接口和抽象类比较
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...
- jQuery和AngularJS的区别
这篇文章主要介绍了jQuery和AngularJS的区别浅析,本文着重讲解一个熟悉jQuery开的程序员如何应对AngularJS中的一些编程思想的转变,需要的朋友可以参考下 最近一直在研究ang ...
- 知识树杂谈Java面试(4)
一. Java集合 1. 集合分类: Collection.Map. 2. Collection: 3. Map 4. 注意点 a. List 有序.可重复:Set 无序.不可重复:Map 键值 ...
- 为啥REST如此重要?
摘要:REST——表征状态转移,由于REST模式的Web服务更加简洁,越来越多的Web服务开始采用REST风格设计和实现.例如,Amazon.com提供接近REST风格的Web服务进行图书查找:雅虎提 ...
- C# 解析 sln 文件
我的项目,编码工具 需要检测打开一个工程,获取所有项目. 但是发现原来的方法,如果存在文件夹,把项目放在文件夹中,那么是无法获得项目,于是我就找了一个方法去获得sln文件的所有项目. 原先使用的方法d ...
- Anroid四大组件service之本地服务
服务是Android四大组件之一,与Activity一样,代表可执行程序.但Service不像Activity有可操作的用户界面,它是一直在后台运行.用通俗易懂点的话来说: 如果某个应用要在运行时向用 ...
- ZendStudio-12.5.0-win32.win32.x86_64.msi官方版本及破解工具
网上的工具试了好多,最后下载的这个工具成功了,之前的N个工具都失败了 亲自试用,表示有效!!! ZendStudio-12.5.0-win32.win32.x86_64.msi官方版本下载地址: 百 ...
- MySQL中字段类型为timestamp的小坑
之前遇到过一个MySQL的字段为timestamp类型的小坑. MySQL中一个字段存储时间类型数据的时候,该字段的类型如果为timestamp类型的话,最多只能存储到2038-01-19 11:14 ...