浅谈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的所有内容!

 

 

最新文章

  1. Eclipse 使用技巧
  2. Eclipse窗口总是在最前的解决办法
  3. NSString与奇怪的retainCount
  4. System.Windows.Media.Imageing.BItmapImage 这么用才不会占用文件
  5. Diameter消息应用层路由
  6. Leetcode: Water and Jug Problem &amp;&amp; Summary: GCD求法(辗转相除法 or Euclidean algorithm)
  7. kindeditor编辑器
  8. 通过 ANE(Adobe Native Extension) 启动Andriod服务 推送消息(四)
  9. hdoj 4552 怪盗基德的挑战书【求前缀在字符串中出现的次数之和】
  10. 欧拉计划&amp;#183;第四题
  11. BroadcastReceiver简单应用实例
  12. Spring REST 与 Zuul 代理
  13. 试试Linux下的ip命令,ifconfig已经过时了
  14. 浅谈C#常用集合类的实现以及基本操作复杂度
  15. ES6新语法
  16. Hibernate缓存策略(一级缓存和EHcache二级缓存)
  17. 流程图工具Visual Paradigm for UML
  18. Luogu 1764 翻转游戏 - 枚举 + 搜索
  19. Monkey基本使用
  20. 《linux内核分析》chapter3读书笔记

热门文章

  1. python读取命令行参数的方法
  2. Java面向对象 集合(下)
  3. Asp.Net MVC4 系列-- 进阶篇之路由(1)
  4. iOS开发工程师必备技能(持续更新)
  5. CSS滤镜效果
  6. 从零开始教你封装自己的vue组件
  7. 使用 Prometheus + Grafana 对 Kubernetes 进行性能监控的实践
  8. 快速排序算法分析--C++版
  9. 基于zookeeper的Swarm集群搭建
  10. 无所不会的fiddler遇到的尴尬