vue.js怎么从页面获取数据

Question

vue.js怎么从页面获取数据

Answer 1

方法是利用vue-resource组件提供的一系列api：
get(url, [data], [success], [options])
post(url, [data], [success], [options])
put(url, [data], [success], [options])
patch(url, [data], [success], [options])
delete(url, [data], [success], [options])
jsonp(url, [data], [success], [options])

具体举例如下：
1、导入vue-resource
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>

2、基于全局Vue对象使用http
// 通过someUrl获取后台数据，成功后执行then的代码
Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
3、在一个Vue实例内使用$http
// $http是在vue的局部范围内的实例
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
说明：
在发送请求后，使用then方法来处理响应结果，then方法有两个参数，第一个参数是响应成功时的回调函数，第二个参数是响应失败时的回调函数。

 

 

Answer 2

在 同级的export defaut {} 中 定义data方法 返回一个对象， 这个对象里面就是 页面绑定的数据模型参数 ， 在methods 对象的 函数里面 可以使用 data.数据模型名 调用

如

1 2 3 4 5 6 7 8 9 10 11 12 13

<input v-model="param" @input="showParam"></input> export defaut {     data() {       return {           param: 1 // 定义模型数据   绑定在 上面的input上       }       },     methods: {       showParam() { // 当 输入框 输入时候会执行这个函数  控制台打印出输出的数字           console.log(this.param)       }       } }