饥人谷技术博客vueVue

Vue全家桶

2019-06-05  本文已影响24人  _茂

一、简介

武林至尊,宝刀React,号令天下,莫敢不从,Vue不出,谁与争锋
本文介绍Vue全家桶:Vue+Vue-router+Vuex+axios。

二、Vue

Vue 是一套用于构建用户界面的渐进式框架,和React,都自称自己只关注视图层

1.引入Vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2.一个小demo

在完成Vue都引入后,再分别 编写DOM 和 新建Vue实例:

<!-- 两对花括号{{}} 为模版语法。
这里渲染message变量,也就是下面new Vue时data.message -->
<div id="app">
  {{ message }}
</div>
var app = new Vue({
  el: '#app',  // 选择器,用来找到id为app的DOM节点
  data: {  // data属性用来存储数据
    message: 'Hello Vue!'
  }
})

此时,如果页面显示了Hello Vue!,说明Vue正常工作。
具体文档请看 Vue官方教程

三、Vue-router

1.功能

Vue-router可以帮你:

2.示例

例子请看Vue-Router官方例子

四、Vuex

如同React有Redux一样,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,适合开发大型单页应用。

new Vue({
  // state
  data () {
    return {
      count: 0
    }
  },
  // view
  template: `
    <div>{{ count }}</div>
  `,
  // actions
  methods: {
    increment () {
      this.count++
    }
  }
})

具体见 Vuex官方教程

五、axios

1.简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它可以帮你:

2.一个小demo
// 创建示例
const instance = axios.create();

// 指定超时时间
instance.defaults.timeout = 2500;

// get请求longRequest, 为这个接口单独指定5s的超时时间
instance.get('/longRequest', {
  timeout: 5000
});

// 正常get请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功返回
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误
    console.log(error);
  })
  .finally(function () {
    // 处理无论成功/失败都执行的代码
  });

API具体见文档 axios-github

(完)

上一篇下一篇

猜你喜欢

热点阅读