Vue全家桶之网络请求

2018-04-04  本文已影响0人  adustdu2015

模板语法通常是{{}},但是如果是有双引号包裹的话,则去掉花括号。
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`}=""
上一篇 下一篇

猜你喜欢

热点阅读