1.fetch
- 原生js提供了两种数据请求方式
- ajax
- fetch
- ajax vs fetch
- ajax需要封装的, fetch不需要
- ajax不太符合MV* 开发方式,fetch可以认为是js为了MV*方式做的量身打造
- fetch也是Promise
- fetch get/post请求
get() {
fetch(`${BASE_URL}/get.php?a=1&b=2`) //get请求参数是连接在url上
.then(data => data.text())
.then(res => {
this.num = res;
})
.catch(err => console.log(err));
},
post() {
/*
1. post请求参数如何携带
*/
fetch(`${BASE_URL}/post.php`, {
method: 'POST',
headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
}),
body: new URLSearchParams([['a', 1], ['b', 2]]).toString()
})
.then(data => data.text())
.then(res => {
this.sum = res;
})
.catch(err => console.log(err));
2.计算属性computed
- 模板内的表达式非常便利,但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以,对于任何复杂逻辑,你都应当使用计算属性。
<div id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})
3.侦听属性
- Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。
<div id="demo">
<input type="text" v-model="firstName"/>
<input type="text" v-model="lastName"/>
<input type="text" v-model="fullName"/>
</div>
var vm = new Vue({
el: '#demo',
data: {
firstName: '',
lastName: '',
fullName: ''
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})
4.混入
- 局部混入
const data = {
data: {
num: 1000,
msg: 'hello world'
}
}
new Vue({
el: '#app',
mixins: [data]
});
- 全局混入
const obj = {
methods: {
aa () {
alert('aa')
},
bb () {
alert('bb')
}
}
}
Vue.mixin({
methods: {
...obj.methods
}
});
new Vue({
el: '#app',
});
5.组件
-全局注册和局部注册
<div id="app">
<Hello></Hello>
<Well></Well>
</div>
var Hello = Vue.extend({
template: '<div>组件</div>'
});
var Well = Vue.extend({
template: '<div>Well</div>'
});
Vue.component('Hello', Hello);//全局注册
new Vue({
el: '#app',
components: {//局部注册
Well: Well
}
});
- 简写形式
<div id="app">
<Hello></Hello>
<World></World>
</div>
Vue.component('World', {//全局简写
template: '<div> 123 </div>'
});
new Vue({
el: '#app',
components: {//局部简写
Hello: {
template: '<div>hello world</div>'
}
}
});
- 组件选项
<div id="app">
<Hello></Hello>
</div>
<template id="hello">
<div>
hello world
</div>
</template>
Vue.component('Hello', {
template: '#hello'
});
new Vue({
el: '#app'
});