美文网首页
Vue全家桶之网络请求

Vue全家桶之网络请求

作者: adustdu2015 | 来源:发表于2018-04-04 14:34 被阅读0次

模板语法通常是{{}},但是如果是有双引号包裹的话,则去掉花括号。
1.v-if=""判断符 v-else v-for
2.v-bind:class="" 绑定属性,
3.v-for="(item,index) in items" v-bind:key="index" 注意循环写法。
4.绑定事件:v-on="Changed"

Vue全家桶主要包括 vue-cli ,vue-resource , vue-router , vuex.
概括起来就是:、1.项目构建工具、2.路由、3.状态管理、4.http请求工具。

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script src="https://cdn.jsdelivr.net/vue.resource/1.0.3/vue-resource.min.js"></script>

两个仓库axios和vue-resource.

先引入仓库上边两个js中的一个.
/******************************************************************/

methods: {
alertDialog: function (hello) {
return hello
},
hello: function (str) {
console.log(str)
},
reverseMessage: function () {
axios.get(this.registerUrl)
.then(res=>{
console.log(res)
},res=>{
console.log(res)
})
}
},

/******************************************************************/

Vue全家桶的老二(router)和老三(vue-resource)

NPM方式:

npm安装方式:
npm install vue-router --save //安装routernpm install vue-resource --save //安装 网路请求vue-resource

使能
import VueRouter from 'vue-router';
import VueResource from 'vue-resource';

Vue.use(VueRouter );
Vue.use(VueResource);
然后进行网络请求.
created(){
this.http.get("https://").then((data)=>{ this.users=data.body }) } 3.传值和引用 string number boolean 是传值 array object是传引用,一处改变则改变原有数据。 4.父组件向子组件传值 v-bind:title="title" 子组件中props:{ title:{ type:String, required:true } } 5.子组件向父组件传值 this.emit("titleChaned","changed");
父组件中
v-on:titleChanged="updateTitle(event)" 实现updateTitle方法。 updateTitle:function(title){ this.title=title; } 6.生命周期 created(){ 一般做网络请求数据显示 } 7.vue-router mode:"history"去掉地址栏的#符号 使用 <router-link to="/"></router-link>代替a标签 8.vue-resource的使用 this.http.get("http").then((data)=>{
this.user=data.body
})
9.使用es6中的fetch语法请求。
可以参看一个地址 : https://www.cnblogs.com/congxueda/p/7087144.html
存在跨域问题。
搜索 vue proxyTable立刻找到,替换config.js中的proxyTable,即可。

  fetch("http",{method:"post",body:""}).then((result)=>{
  return result.json()
  })

10.使用axios

import axios from "axios"
Vue.prototype.$axios=axios;
this.$axios.post("",username:"hello",password:"123456").then((data)=>{
console.log(data)
})

设置默认配置

axios.default.header.common{`token`}=""

相关文章

  • Vue全家桶之网络请求

    模板语法通常是{{}},但是如果是有双引号包裹的话,则去掉花括号。1.v-if=""判断符 v-else v-f...

  • vue基础

    vue全家桶 vue-cli 框架 vue vuex 状态管理 vue-router 路由 axios 请求...

  • 2019-03-25

    vue 全家桶 Vue有著名的全家桶系列,包含了: vue-router,vuex,vue-re...

  • 前端面试2021.4.9

    面试题正文: 1.vue全家桶包含哪些? 答案:vue全家桶与react全家桶介绍 2.v-model是什么?怎么...

  • 前端面试2021.4.9

    面试题正文: 1.vue全家桶包含哪些? 答案:vue全家桶与react全家桶介绍 2.v-model是什么?怎么...

  • Vue生态圈(全家桶)

    vue全家桶及项目架构 Vue有著名的全家桶系列,包含了vue-router(http://router.vuej...

  • vue + typescript

    Vue全家桶+TypeScript使用总结

  • vue 全家桶之 vuex

    Vuex 是什么? 有时候我们需要全局操作组件的状态,父子组件传参又太过于繁琐,这个时候我们选择vuex 来作为全...

  • vue全家桶之vuex

    vuex是什么鬼? 如果你用过redux就能很快的理解vuex是个什么鬼东西了。他是vuejs用来管理状态的插件。...

  • vue全家桶

    vue-cli + vue2.0 + vuex + vue-route + axios + element-ui ...

网友评论

      本文标题:Vue全家桶之网络请求

      本文链接:https://www.haomeiwen.com/subject/lmvkhftx.html