Vue全家桶

一、简介

武林至尊,宝刀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可以帮你:

嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式,在 IE9 中自动降级
自定义的滚动条行为

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 客户端,它可以帮你:

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止 CSRF/XSRF

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

 

Published by

风君子

独自遨游何稽首 揭天掀地慰生平

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注