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请求工具。

<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`}=""
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 前言 最先接触编程的知识是在大学里面,大学里面学了一些基础的知识,c语言,java语言,单片机的汇编语言等;大学毕...
    oceanfive阅读 8,485评论 0 7
  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 8,515评论 1 22
  • 响应式布局的理解 响应式开发目的是一套代码可以在多种终端运行,适应不同屏幕的大小,其原理是运用媒体查询,在不同屏幕...
    懒猫_6500阅读 4,210评论 0 0
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 10,485评论 0 29
  • 呱呱坠地的时候 你带着家人的期盼来到了这个世界 此时的你唯一拥有的 就是父母对你无私的爱 时间缓慢却坚定的前行 你...
    苍峰冷冽阅读 2,166评论 2 1

友情链接更多精彩内容