zoukankan      html  css  js  c++  java
  • 在vue框架里添加bootstrap与axios

    创建vue项目(已经安装了nodejs,vue@cli)

    vue create vuedemo
    

    在vue项目里添加bootstrap

     cnpm install bootstrap bootstrap-vue -S
    

    在src/main.js添加

    import 'bootstrap/dist/css/bootstrap.css'
    import 'bootstrap-vue/dist/bootstrap-vue.css'
    import BootstrapVue from 'bootstrap-vue'
    Vue.use(BootstrapVue)
    

    注意: 如果报错,则放在main.js的开头

    实例 (About.vue)

    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <button class="btn btn-info">测试按钮</button>
        </div>
        <button class="btn btn-primary">tbtn</button>
      </div>
    </div>
    

    结果

    在vue项目里添加axios

    cnpm install axios -S
    

    如果是vue2

    在main.js添加

    import axios from 'axios'
    Vue.prototype.$axios = axios      # 这是把axios全局注册 以后可以this.$axios来访问
    

    如果是vue3

    则只需要在要使用的地方引用axios库
    因为:
    vue2里面是用new Vue()来创建vue实例
    vue3里面是用createapp()来创建vue实例

    实例 (About.vue)

    <script>
    export default {
      name: 'about',
      data(){
        return {
          userlist: []
        }
      },
      methods:{
       query:function(){
          this.$axios.get('https://jsonplaceholder.typicode.com/posts')
          .then(res => {
            console.log(res)
            console.log(res.data)
            this.userlist = res.data
            console.log(this.userlist[1].id)
            console.log(this.userlist[1].userId)
            console.log(this.userlist[1].title)
            console.log(this.userlist[1].body)
          })
          .catch(err => {
            console.error(err); 
          })
        }
      }
    }
    </script>
    
    <button class="btn btn-primary" v-on:click='query'>btn</button>
    

    结果

    axios与store的联合

    store/index.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    import axios from 'axios'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        // 初始化数据,只要有可能的用到的最好都初始化
        text: {name: 'xxx'},
        data: {},
      },
      //getters可以认为是store的计算属性
    	getters: {
    		data(state) {
    			return state.data
    		}
      },
      //存放同步函数方法
      mutations: {
        // store中的数据只能通过commit mutation来改变
        changeData (state, obj) {
          state.data = obj
        }
      },
      //存放异步函数方法
      actions: {
        // 封装一个ajax方法
        saveForm (context) {
          axios.get('https://jsonplaceholder.typicode.com/posts').then(res => {  // 调用接口
            // console.log(res.data)
            // console.log('---------')
            context.commit('changeData', res.data)  // 通过接口获取的后台数据保存到store中,等待组件取用
          })
        },
    
        //async异步
        async getTodos({commit}) {
          const result = await axios.get('http://jsonplaceholder.typicode.com/todos?_limit=10');
          // console.log(result)
          // console.log('-------------')
          commit('changeData', result.data);
         }
      },
      modules: {
      }
    })
    
    

    About.vue

    <button class="btn btn-primary" v-on:click='getDataVuex'>异步方法获取数据1</button>
    <input type="button" class="btn btn-danger" value="异步方法获取数据2" v-on:click="getDataVuex1">
    <h3>{{data}}</h3>
    
    import {mapState,mapGetters} from 'vuex'
    computed:mapGetters(['data']),
    methods:{
        getDataVuex () {
          // this.$store.dispatch('saveForm');   // 触发actions里的saveForm函数,调动接口
          this.$store.dispatch('saveForm').then(res => {   // 回调函数是箭头函数
                console.log(this.a);  // --> 123
                // console.log(res)
                // console.log(this.$store.state.data)
                console.log(this.$store.getters)
            })
        },
        getDataVuex1 (){
          this.$store.dispatch('getTodos')
          console.log(this.$store.getters)
        }
    }
    
    

    结果


    注: JSONPlace 持有人是一个免费的在线 REST API,您可以在需要一些假数据时使用。它非常适合教程、测试新库、共享代码示例...
    httpbin.org A simple HTTP Request & Response Service.

  • 相关阅读:
    HDU1720 A+B Coming
    HDU1390 ZOJ1383 Binary Numbers
    HDU1390 ZOJ1383 Binary Numbers
    HDU2504 又见GCD
    HDU2504 又见GCD
    HDU1335 POJ1546 UVA389 UVALive5306 ZOJ1334 Basically Speaking
    HDU1335 POJ1546 UVA389 UVALive5306 ZOJ1334 Basically Speaking
    HDU1020 ZOJ2478 Encoding
    HDU1020 ZOJ2478 Encoding
    HDU2097 Sky数
  • 原文地址:https://www.cnblogs.com/purple910/p/13545304.html
Copyright © 2011-2022 走看看