Vue全家桶之网络请求

模板语法通常是{{}},但是如果是有双引号包裹的话,则去掉花括号。
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请求工具。

两个仓库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-resource --save //安装 网路请求vue-resource

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

Vue.use(VueRouter );
Vue.use(VueResource);
然后进行网络请求.
created(){
this.http.get({ 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)代替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全家桶之网络请求)