浅谈Vue

  最近在学习Vue相关的知识点并且也做一些练手,就在学习过程中出现的各种坑爹的地方做一个总结!之后再遇到也不会抓瞎。

1.Vue工程的安装

    (1)首先先安装node.js这是Vue的运行基础。登录官网下载相关包安装即可,不再赘述。

(2)其次是安装Vue-cli 脚手架,进入到cmd命令行去执行下面命令。

npm install vue-cli

    (3)创建基于webpack模板的项目

     

vue init webpack  (项目名)
   (4)进入项目并且安装依赖包:
          

npm install 
     在安装完成之后工程目录下会出现一个node_models的文件夹,所有的包与插件都存放在里面。
    

    (5).启动项目 
      

npm run dev 
    能通过默认的http://localhost:8080能看到页面即项目就能正常运行了!
  2.在Vue工程中使用axios
    (1)首先在工程目录下运行下面命令!
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浅谈的更多相关文章

  1. Vue 浅谈前端js框架vue

    Vue Vue近几年来特别的受关注,三年前的时候angularJS霸占前端JS框架市场很长时间,接着react框架横空出世,因为它有一个特性是虚拟DOM,从性能上碾轧angularJS,这个时候,vu ...

  2. [Vue]浅谈Vue3组合式API带来的好处以及选项API的坏处

    前言 如果是经验不够多的同志在学习Vue的时候,在最开始会接触到Vue传统的方式(选项式API),后边会接触到Vue3的新方式 -- 组合式API.相信会有不少同志会陷入迷茫,因为我第一次听到新的名词 ...

  3. 浅谈Vue.js

    作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...

  4. 浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

  5. 【Vue】浅谈Vue不同场景下组件间的数据交流

    浅谈Vue不同场景下组件间的数据“交流”   Vue的官方文档可以说是很详细了.在我看来,它和react等其他框架文档一样,讲述的方式的更多的是“方法论”,而不是“场景论”,这也就导致了:我们在阅读完 ...

  6. 浅谈Vue响应式(数组变异方法)

    很多初使用Vue的同学会发现,在改变数组的值的时候,值确实是改变了,但是视图却无动于衷,果然是因为数组太高冷了吗? 查看官方文档才发现,不是女神太高冷,而是你没用对方法. 看来想让女神自己动,关键得用 ...

  7. 浅谈MVVM模式和MVP模式——Vue.js向

    浅谈MVVM模式和MVP模式--Vue.js向 传统前端开发的MVP模式 MVP开发模式的理解过程 首先代码分为三层: model层(数据层), presenter层(控制层/业务逻辑相关) view ...

  8. 浅谈单页应用和多页应用——Vue.js向

    浅谈单页应用和多页应用--Vue.js向 多页面 多页面应用:每次页面跳转,后台都会返回一个新的HTML文档,就是多页面应用. 在以往传统开发的应用(网站)大多都是多页面应用,路由由后端来写. 页面跳 ...

  9. 浅谈Vue下的components模板

    浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单 ...

随机推荐

  1. jdbc-日期格式的转换及代码示例

     时间类型相互转换 把数据库的三种时间类型赋给java.util.Date,基本不用转换,因为这是把子类对象给父类的引用,不需要转换. java.sql.Date date = - java.ut ...

  2. List之Union(),Intersect(),Except() 即并集,交集,差集运算。

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. c#接口和抽象类比较

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  4. jQuery和AngularJS的区别

    这篇文章主要介绍了jQuery和AngularJS的区别浅析,本文着重讲解一个熟悉jQuery开的程序员如何应对AngularJS中的一些编程思想的转变,需要的朋友可以参考下   最近一直在研究ang ...

  5. 知识树杂谈Java面试(4)

    一. Java集合 1.  集合分类:  Collection.Map. 2. Collection: 3. Map 4. 注意点 a. List 有序.可重复:Set 无序.不可重复:Map  键值 ...

  6. 为啥REST如此重要?

    摘要:REST——表征状态转移,由于REST模式的Web服务更加简洁,越来越多的Web服务开始采用REST风格设计和实现.例如,Amazon.com提供接近REST风格的Web服务进行图书查找:雅虎提 ...

  7. C# 解析 sln 文件

    我的项目,编码工具 需要检测打开一个工程,获取所有项目. 但是发现原来的方法,如果存在文件夹,把项目放在文件夹中,那么是无法获得项目,于是我就找了一个方法去获得sln文件的所有项目. 原先使用的方法d ...

  8. Anroid四大组件service之本地服务

    服务是Android四大组件之一,与Activity一样,代表可执行程序.但Service不像Activity有可操作的用户界面,它是一直在后台运行.用通俗易懂点的话来说: 如果某个应用要在运行时向用 ...

  9. ZendStudio-12.5.0-win32.win32.x86_64.msi官方版本及破解工具

    网上的工具试了好多,最后下载的这个工具成功了,之前的N个工具都失败了 亲自试用,表示有效!!! ZendStudio-12.5.0-win32.win32.x86_64.msi官方版本下载地址:  百 ...

  10. MySQL中字段类型为timestamp的小坑

    之前遇到过一个MySQL的字段为timestamp类型的小坑. MySQL中一个字段存储时间类型数据的时候,该字段的类型如果为timestamp类型的话,最多只能存储到2038-01-19 11:14 ...