Vue入门（三）---- Vue数据交互方式以及Vue的计算属性和侦听属性

Vue入门（三）---- Vue数据交互方式以及Vue的计算属性和侦听属性

不要问我为什么三比二先问世，问就是这个世界的错，反正我不承认自己懒！

Vue数据交互方式以及Vue的计算属性和侦听属性

Vue数据交互方式

通常情况，Vue框架下的数据交互方式分为，axios、fetch（原生）、resource（Vue1.0x，不建议使用）。
三者都是Promise的回调函数方式，但由于fetch是原生方法，所以fetch不存在外包，存在安全隐患，而axios和resource都是封装的方法，都解决了传递时的安全问题，可以有效避免XSRF攻击。

axios

推荐使用axios。

axios 的 get 交互

// 无参数传输时
axios.get(url).then(res=>console.log(res).catch(error=>conosle.log(error));

// 需传输参数时
axios({
    url: 'http://xxx',
    method: 'get' //默认就是get,这个可以省略，
    params: {
        key: value
    }
 }).then().catch();

axios的post交互

// 其实都可以在npmjs中sreach -> axios看到API，不过post的使用按照API存在一定问题
// 需要设置请求头以及创建params对象

// 统一设置请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 创建params对象
let params = new URLSearchParams();

// 使用params传递参数  params.append(key,value)
params.append('a',1);
params.append('b',2);

fetch

相较于axios，fetch是原生js，在使用和安全性方面都有不尽如人意的地方。
但是，fetch可以设置多种格式，如：json() json类型数据格式；text() 文本类型数据格式化； blob() 二进制数据格式化 图片 视频 音频

fetch 的 get 交互

// 无参数时
fetch('http://localhost:3000/shop.json')
    .then( data => data.json());
    .then( res => console.log( res ));
    .catch( err => console.log( err ));
// fetch的接受数据处理分为两个阶段，第一个then处理数据格式，第二个then才实现数据处理

// 有参数时
fetch('http://localhost:3000/shop?a=1&b=2') // 需将参数直接写在地址栏上
    .then( data => data.json());
    .then( res => console.log( res ));
    .catch( err => console.log( err ));

fetch 的 post 交互

fetch('http://localhost:3000/shop', {
    method: 'POST',
    headers: new Headers({
        'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
	}),
    body: new URLSearchParams([["foo", 1],["bar", 2]]).toString()
})
.then((res)=>{ return res.text()})
.then((res)=>{console.log(res)})
.catch( err => console.log( err ));

resource

resouce由Vue1.0提供，使用时需下载resource插件，使用方式基本和axios相同，但resource支持jsonp格式的数据，axios不支持

// 相同的地方就不过多赘述
this.$http({ url: './mock/data.json'}).then( res => console.log( res )).catch( err => console.log( err ));
// resource是绑定在Vue上，所以安装插件后可以调用属性$http使用

Vue的计算属性和侦听属性

计算属性

由于一些逻辑、方法，不存在用户交互，所以不放置在methods内，避免混淆，所以Vue内存在一个computed块，存放这些逻辑、方法。

// This is an example
computed: {
	//这里面放的都是方法
	reserseInfo () {
		return this.info.split('').reverse().join('');
	}
}

侦听属性

面对一个由某一个数据改变引起新的异步数据请求，那么我们可以watch实现侦听数据变化。

new Vue({
	el: '#app',
	data: {
		firstName: '',
		lastName: '',
		fullName: ''
},
watch: {
	//watch是一个对象
	// watch里面存储的类型： 方法，对象，普通字符
	firstName ( val ) {//方法的名称和data选项中的key相同，是谁就监听谁
		this.fullName = val + this.lastName;
	},
	lastName ( val ) {
		this.fullName = this.firstName + val ;
	}
	}
})