Vue.js基础(四)

1.fetch

1. 原生js提供了两种数据请求方式

• ajax
• fetch

2. ajax vs fetch

• ajax需要封装的， fetch不需要
• ajax不太符合MV* 开发方式，fetch可以认为是js为了MV*方式做的量身打造
• fetch也是Promise

3. 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'
   });