Vue知识点总结 – 小东西儿

本文最后更新于 1585 天前，其中的信息可能已经有所发展或是发生改变。

一、指令

1.入门

<body>
    <div id="app">
       <div>{{msg}}</div>      1.标签用于填充数据   插值表达式
    </div>
    <script type="text/javascript" src="js/vue.js"></script>  2.引入vue.js库文件
    <script>
        var vm = new Vue({  3.使用vue的语法
            el: '#app',  
            data {       
                msg: 'Hello Vue'   4.把vue提供的数据填充到标签中
            }
        })
    </script>
</body>

2. v-cloak 防止页面加载时出现闪烁问题

原理：先通过样式隐藏内容，在内存中进行值得替换，替换好之后显示最终结果

<style>
    [v-cloak] {  
        display: none; 
    }
</style>
<body>
    <div id="app">
       <div v-cloak>{{msg}}</div>     
    </div>
    <script type="text/javascript" src="js/vue.js"></script>  
    <script>
        var vm = new Vue({ 
            el: '#app',  
            data {      
                msg: 'Hello Vue'
            }
        })
    </script>
</body>

3. v-text 将数据填充到标签中

作用于插值表达式，没有闪烁问题。

注意：此处为单向绑定，数据对象上的值改变，插值会发生变化。插值变化，不影响数据对象的值

<body>
    <div id="app">
       <div v-text="msg"></div>       
    </div>
    <script type="text/javascript" src="js/vue.js"></script>  
    <script>
        var vm = new Vue({ 
            el: '#app',  
            data {      
                msg: 'Hello Vue'
            }
        })
    </script>
</body>

4.v-html 可以将HTML片段填充到标签中，会将其当html标签解析后输出

5.v-pre 跳过编译，直接显示

6.v-once 执行一次性的插值，当数据改变时，插值处内容不会继续更新

应用场景：显示后的信息后续不用再修改，用v-once

7.v-model 双向数据绑定

当数据发生变化的时候，视图会发生变化。
当视图发生变化的时候，数据也会跟着同步变化
限制在<input><select><textarea> components中使用

v-model原理(v-bind绑定数据，v-on处理数据)

<div id="app">
    <input v-bind:value="msg" v-on:input="handle">
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "hello"
        },
        methods: {
            handle: function(event){
                this.msg = event.target.value;
            }
        }
    })
</script>

8.v-on用来绑定事件的

无参
v-on:click 缩写 @click

<div id="app">
    <div>{{num}}</div>
    <div>
        <button v-on:click="num++">点击</button>   
        <button @click="num++">点击1</button> 
        <button @click="handle">点击2</button> 
        <button @click="handle()">点击3</button> 
    </div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app"
        data: {
            num: 0
        },
        methods: {
            handle: function(){
                console.log(this === vm) 
                this.num++;
            }
        }
    })
</script>

v-on事件函数传入参数

<div>
    <div>{{num}}</div>
    
    <button v-on:click="handle">点击</button>
    
    <button v-on:click="handle1(12, $event)">点击1</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            num: 0
        },
        methods： {
            handle: function(event){
                console.log(event.target.innerHTML)
            },
            handle1： function(p, event){
                console.log(p)
                console.log(event.target.innerHTML)
                this.num++
            }
        }
    })
</script>

事件修饰符

<a v-on:click.stop="doThis"></a>  
<a v-on:click.submit.prevent="onSubmit></a>  <!--阻止默认"event.preventDefault()-->
v-on:click.stop.prevent  
v-on:click.prevent.self  
v-on:click.self.prevent

按键修饰符

<input v-on:keyup.13="submit">  
<input v-on:keyup.enter="submit">
<input v-on:keyup.enter.space="alerMe">

常见按键修饰符

.enter  .tab   .delete  .esc  .space  .up  .down  .left  .right

自定义按键修饰符(通过config.keyCodes自定义按键修饰符别名)

<div id="app">
    <input v-on:keydown.f5 = "prompt()">
</div>
<script>
    Vue.config.keyCodes.f5 = 116;
    var vm = new Vue({
        el: "#app",
        methods: {
            prompt: function(){
                alter("我是f5");
            }
        }
    })
</script>

9.v-bind属性绑定

v-bind:href 缩写为href(对应js的getAttribute / setAttribute)

绑定对象
可以给v-bind:class一个对象，以动态地切换class。
注：v-bind:class 指令可以与普通class特性共存

<ul v-bind:class="{textColor: isColor, textSize: isSize}">
    <li>学习</li>
    <li>Js</li>
</ul>
<div v-bind:style="{color: activeColor, fontSize: activeSize}">对象语法</div>
<script>
    var vm = new Vue({
        el： "#app",
        data: {
            isColor: true,
            isSize: true,
            active: "red",
            active: "25px"
        }
    })
</script>

绑定数组

<ul :class="[classA, classB]">
    <li>学习</li>
</ul>
<div :style="[styleObj1, styleObj2]"></div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            classA: 'textColor',
            classB: 'textSize'
        },
        styleObj1: {
             color: 'red'
       },
       styleObj2: {
            fontSize: '30px'
       }
    })
</script>

10.v-if

11.v-show

12.v-for 可循环对象/数组/普通元素

二、Vue常用特性

1.表单基本操作

获取单选框里面的值，v-model
获取复选框里面的值，v-model
获取下拉框和文本框中的值，v-model

2.表单修饰符

.number
.trim
.lazy

3.自定义指令

1.Vue.directive注册全局指令

<input type="text" v-focus> 
<input type="text" v-color="msg">
<script>
    Vue.directive('focus',{   
        inserted: function(el){
            el.focus()
        }
    })
    Vue.directive('color', {
        bind: function(el, binding){
            el.style.backgroundColor = binding.value.color;
        }
    })
    var vm = new Vue({
        el: '#app',
        data: {
            msg: {
                color: 'blue'
            }
        }
    })
</script>

在directives中注册局部指令

<input type="text" v-focus> 
<input type="text" v-color="msg">
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: {
                color: 'blue'
            }
        }
        directives: {
            color: {
                inserted:function(el){
                    el.focus()
                } 
            },
            focus: {
                bind:function(el, binding){
                    el.style.backgroundColor = binding.value.color;
                }
            }
        }    
    })

4.计算属性computed(他们的响应式依赖缓存)

适合对多个变量或对象进行处理后返回一个结果值。

在多个变量中的某一个值发生了变化，监控的这个值也会发生变化

<div>
    <div>{{reverseString}}</div>
</div>
<script>
    var vm = new Vue({
        el: 'app',
        data: {
            num: 100
        },
        computed: {
            reverseString: function(){
                console.log('computed')
                var total = 0;
                for(var i=0 ; i <= this.num; i++){
                    total += i;
                }
                return total;  
            }
        }
    })
</script>

5.侦听器watch (watch中的属性一定是data中已经存在的数据)

当需要监听一个对象的改变时，普通的wacth方法无法监听到对象内部属性的改变。

只要data中的数据才能够监听到变化，此时需要deep属性对对象进行深度监听

 <div id="app">
        <div>
            <span>名：</span>
            <span>
        <input type="text" v-model='firstName'>
      </span>
        </div>
        <div>
            <span>姓：</span>
            <span>
        <input type="text" v-model='lastName'>
      </span>
        </div>
        <div>{{fullName}}</div>
    </div>
  <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                firstName: 'Jim',
                lastName: 'Green',
            },
            watch: {
                firstName: function(val) {
                    this.fullName = val + ' ' + this.lastName;
                },
                lastName: function(val) {
                    this.fullName = this.firstName + ' ' + val;
                }
            }
        });
    </script>

6.过滤器

应用：双花括号插值和 v-bind表达式

支持级联操作

<div id="app">
    <div>{{msg | upper | lower}}</div>
    <div :abc='msg | upper'>测试数据</div>
    <div> {{ message | filterA('arg1', 'arg2') }}</div>  
  </div>
<script type="text/javascript">
   Vue.filter('lower', function(val) {  
      return val.charAt(0).toLowerCase() + val.slice(1);
    });
    Vue.filter('filterA',function(n,a,b){   
            if(n<10){
                return n+a;
            }else{
                return n+b;
            }
        });
    var vm = new Vue({
      el: '#app',
      data: {
        msg: ''
      },
      filters: { 
        upper: function(val) {
          return val.charAt(0).toUpperCase() + val.slice(1);
        }
      }
    });
  </script>

7.生命周期钩子

常用的钩子函数

钩子函数	说明
beforeCreate	在实例初始化之后，数据观测和事件配置之前被调用此时data 和 methods 以及页面的DOM结构都没有初始化什么都做不了
created	在实例创建完成后被立即调用此时data 和 methods已经可以使用但是页面还没有渲染出来
beforeMount	在挂载开始之前被调用此时页面上还看不到真实数据只是一个模板页面而已
mounted	el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。数据已经真实渲染到页面上在这个钩子函数里面我们可以使用一些第三方的插件
beforeUpdate	数据更新时调用，发生在虚拟DOM打补丁之前。页面上数据还是旧的
updated	由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。页面上数据已经替换成最新的
beforeDestroy	实例销毁之前调用
destroyed	实例销毁后调用

9.动态数组响应式数据

Vue.set(a, b, c)  //让触发视图重新更新一遍，数据动态展示
a  要更改的数据
b  数据的第几项
c  更改后的数据

三、Vue组件 component

1.全局注册

Vue.component('组件名称', {})

<div id="example">
    <my-component></my-component>
</div>
<script>
    Vue.component('my-component', {
        template: '<div>A custom </div>'
    })
    new Vue({
        el: '#example'
    })
</script>

组件注意事项

组件参数的data值必须是函数同时这个函数要求返回一个对象

组件模板必须是单个根元素

组件模板的内容可以是模板字符串

<div>
    <button-counter></button-counter>
</div>
<script>
    Vue.component('button-counter', {
        data: function(){
            return {
                count: 0
            }
        },
        template: `
            <button @click="handle">点击{{count}}次数</button>
            <div>测试</div>
        `,
        methods: {
            handle: function(){
                this.count += 2
            }
        }
    })
</script>

2.局部注册

 <div id="app">
      <my-component></my-component>
  </div>
<script>
    var Child = {  // 定义组件的模板
      template: '<div>A custom component!</div>'
    }
    new Vue({
      components: {
        'my-component': Child
      }
    })
 </script>

3.Vue组件之间传值–父组件向子组件传值

父组件发送的形式：是以形式绑定值到子组件身上子组件接收的方式：用props接收

<div id="app">
    <div>{{pmsg}}</div>
     
     
    <menu-item title='来自父组件的值'></menu-item>
    
    <menu-item :title='ptitle' content='hello'></menu-item>
  </div>

  <script type="text/javascript">
    Vue.component('menu-item', {
      
      props: ['title', 'content'],
      data: function() {
        return {
          msg: '子组件本身的数据'
        }
      },
      template: '<div>{{msg + "----" + title + "-----" + content}}</div>'
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        ptitle: '动态绑定属性'
      }
    });
  </script>

4.Vue组件之间传值–子组件向父组件传值

子组件：用 emit()第一个参数为自定义的事件名称，第二个参数为需要传递的数据

父组件：用v-on监听子组件的事件

<div id="app">
    <div :style='{fontSize: fontSize + "px"}'>{{pmsg}}</div>
        
    <menu-item :parr='parr' @enlarge-text='handle($event)'></menu-item>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    
    Vue.component('menu-item', {
      props: ['parr'],
      template: `
        <div>
          <ul>
            <li :key='index' v-for='(item,index) in parr'>{{item}}</li>
          </ul>
            ##  1、子组件用$emit()触发事件
            ## 第一个参数为 自定义的事件名称   第二个参数为需要传递的数据  
          <button @click='$emit("enlarge-text", 5)'>扩大父组件中字体大小</button>
          <button @click='$emit("enlarge-text", 10)'>扩大父组件中字体大小</button>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        pmsg: '父组件中内容',
        parr: ['apple','orange','banana'],
        fontSize: 10
      },
      methods: {
        handle: function(val){
          
          this.fontSize += val;
        }
      }
    });
  </script>

5.Vue组件之间传值–兄弟组件之间传值

事件中心传递数据 提供事件中心 var hub = new Vue()   
传递数据，通过一个事件触发hub.$emit(方法名，传递的数据)  
接收数据，通过mounted() {}钩子中，触发hub.$on()方法名  
销毁事件，通过hub.$off()方法名销毁之后无法进行传递数据

 <div id="app">
    <div>父组件</div>
    <div>
      <button @click='handle'>销毁事件</button>
    </div>
    <test-tom></test-tom>
    <test-jerry></test-jerry>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    
    
    var hub = new Vue();

    Vue.component('test-tom', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>TOM:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          
          hub.$emit('jerry-event', 2);
        }
      },
      mounted: function() {
       
        hub.$on('tom-event', (val) => {
          this.num += val;
        });
      }
    });
    Vue.component('test-jerry', {
      data: function(){
        return {
          num: 0
        }
      },
      template: `
        <div>
          <div>JERRY:{{num}}</div>
          <div>
            <button @click='handle'>点击</button>
          </div>
        </div>
      `,
      methods: {
        handle: function(){
          
          hub.$emit('tom-event', 1);
        }
      },
      mounted: function() {
        
        hub.$on('jerry-event', (val) => {
          this.num += val;
        });
      }
    });
    var vm = new Vue({
      el: '#app',
      data: {
        
      },
      methods: {
        handle: function(){
          
          hub.$off('tom-event');
          hub.$off('jerry-event');
        }
      }
    });
  </script>

6.组件插槽

匿名插槽

<div id="app">
      
    <alert-box>有bug发生</alert-box>
    <alert-box>有一个警告</alert-box>
    <alert-box></alert-box>
  </div>

  <script type="text/javascript">
    /*
      组件插槽：父组件向子组件传递内容
    */
    Vue.component('alert-box', {
      template: `
        <div>
          <strong>ERROR:</strong>
        # 当组件渲染的时候，这个 <slot> 元素将会被替换为“组件标签中嵌套的内容”。
        # 插槽内可以包含任何模板代码，包括 HTML
          <slot>默认内容</slot>
        </div>
      `
    });
  </script>
</body>
</html>

具名插槽

使用中的 "name" 属性绑定元素

<div id="app">
    <base-layout>
        
      <p slot='header'>标题信息</p>
      <p>主要内容1</p>
      <p>主要内容2</p>
      <p slot='footer'>底部信息信息</p>
    </base-layout>

    <base-layout>
        
      <template slot='header'>
        <p>标题信息1</p>
        <p>标题信息2</p>
      </template>
      <p>主要内容1</p>
      <p>主要内容2</p>
      <template slot='footer'>
        <p>底部信息信息1</p>
        <p>底部信息信息2</p>
      </template>
    </base-layout>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    /*
      具名插槽
    */
    Vue.component('base-layout', {
      template: `
        <div>
          <header>
            ### 1、 使用 <slot> 中的 "name" 属性绑定元素 指定当前插槽的名字
            <slot name='header'></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
            ##  注意点： 
            ##  具名插槽的渲染顺序，完全取决于模板，而不是取决于父组件中元素的顺序
            <slot name='footer'></slot>
          </footer>
        </div>
      `
    });
  </script>
</body>
</html>

作用域插槽

父组件对子组件加工处理
既可以复用子组件的slot，又可以使slot内容不一致

 <div id="app">
    <fruit-list :list='list'>
      <template slot-scope='slotProps'>
        <strong v-if='slotProps.info.id==3' class="current">
            {{slotProps.info.name}}              
         </strong>
        <span v-else>{{slotProps.info.name}}</span>
      </template>
    </fruit-list>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">
    Vue.component('fruit-list', {
      props: ['list'],
      template: `
        <div>
          <li :key='item.id' v-for='item in list'>
    ##  1、 在子组件模板中,<slot>元素上有一个类似props传递数据给组件的写法msg="xxx",
    ##   插槽可以提供一个默认内容，如果如果父组件没有为这个插槽提供了内容，会显示默认的内容。
    ##   如果父组件为这个插槽提供了内容，则默认的内容会被替换掉
            <slot :info='item'>{{item.name}}</slot>
          </li>
        </div>
      `
    });
    var vm = new Vue({
      el: '#app',
      data: {
        list: [{
          id: 1,
          name: 'apple'
        },{
          id: 2,
          name: 'orange'
        },{
          id: 3,
          name: 'banana'
        }]
      }
    });
  </script>
</body>
</html>

四、接口调用方式

原生ajax
基于jQuery的ajax
fetch
axios

1.异步

JS中常见的异步调用
- 定时任何
- ajax
- 事件函数

2. promise

promise

var p = new Promise(function(resolve, reject){ 
      setTimeout(function(){
        var flag = false;
        if(flag) {   
          resolve('hello');
        }else{       
          reject('出错了');
        }
      }, 100);
    });
    p.then(function(data){
      console.log(data)
    },function(info){
      console.log(info)
    });

promise发送Ajax

 function queryData(url) {
      var p = new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) {  
            resolve(xhr.responseText);
          }else{  
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
      return p;
    }
    
    queryData('http://localhost:3000/data')
      .then(function(data){
        console.log(data)
        return queryData('http://localhost:3000/data1');
      })
      .then(function(data){
        console.log(data);
        return queryData('http://localhost:3000/data2');
      })
      .then(function(data){
        console.log(data)
      });

promise常用API

    function foo() {
      return new Promise(function(resolve, reject){
        setTimeout(function(){
          
          reject('error');
        }, 100);
      })
    }
    foo()                          等效   foo()
      .then(function(data){                 .then(function(data){
        console.log(data)                       console.log(data)
      },function(data){                     }).catch(function(data){
        console.log(data)                       console.log(data)
      })                                    })
      .finally(function(){                  .finally(function(){
        console.log('finished')                 console.log('finished')
      });                                    });

    function queryData(url) {
      return new Promise(function(resolve, reject){
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
          if(xhr.readyState != 4) return;
          if(xhr.readyState == 4 && xhr.status == 200) { 
            resolve(xhr.responseText);
          }else{ 
            reject('服务器错误');
          }
        };
        xhr.open('get', url);
        xhr.send(null);
      });
    }

    var p1 = queryData('http://localhost:3000/a1');
    var p2 = queryData('http://localhost:3000/a2');
    var p3 = queryData('http://localhost:3000/a3');
    
    
    
    Promise.race([p1,p2,p3]).then(function(result){
      console.log(result)
    })

3.Fetch

    fetch('http://localhost:3000/fdata').then(function(data){
      // text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取后台返回的数据
      return data.text();
    }).then(function(data){
      console.log(data);
    })

4. Fetch API 调用接口传递参数

GET参数传递-传统URL

    fetch('http://localhost:3000/books?id=123', {
      method: 'get'
    })
      .then(function(data){
        return data.text();
      }).then(function(data){
        console.log(data)
      });

GET参数传递-restful形式的URL

   fetch('http://localhost:3000/books/456', {
      method: 'get'
    })
      .then(function(data){
        return data.text();
      }).then(function(data){
        console.log(data)
      });

DELETE请求方式参数传递

    fetch('http://localhost:3000/books/789', {
      method: 'delete'
    })
      .then(function(data){
        return data.text();
      }).then(function(data){
        console.log(data)
      });

POST请求传参

    fetch('http://localhost:3000/books', {
      method: 'post',
      body: 'uname=lisi&pwd=123',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })
      .then(function(data){
        return data.text();
      }).then(function(data){
        console.log(data)
      });

    fetch('http://localhost:3000/books', {
      method: 'post',
      body: JSON.stringify({
        uname: '张三',
        pwd: '456'
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(function(data){
        return data.text();
      }).then(function(data){
        console.log(data)
      });

PUT请求传参

    fetch('http://localhost:3000/books/123', {
      method: 'put',
      body: JSON.stringify({
        uname: '张三',
        pwd: '789'
      }),
      headers: {
        'Content-Type': 'application/json'
      }
    })
      .then(function(data){
        return data.text();
      }).then(function(data){
        console.log(data)
      });

5.Fetch响应结果的数据格式

    fetch('http://localhost:3000/json').then(function(data){
      // return data.json();
      return data.text();
    }).then(function(data){
      // console.log(data.uname)
      // console.log(typeof data)
      var obj = JSON.parse(data);
      console.log(obj.uname,obj.age,obj.gender)
    })

6.axios基本用法（axios是个库）

    axios.get('http://localhost:3000/adata').then(function(ret){
      // 注意data属性是固定的用法，用于获取后台的实际数据
      // console.log(ret.data)
      console.log(ret)
    })

7.axios请求参数传递

axios get请求传参

    axios.get('http://localhost:3000/axios?id=123').then(function(ret){
    
      console.log(ret.data)
    })
    
    axios.get('http://localhost:3000/axios/123').then(function(ret){
      console.log(ret.data)
    })
    
    axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret){
      console.log(ret.data)
    })

axios delete 请求传参

    axios.delete('http://localhost:3000/axios', {
      params: {
        id: 111
      }
    }).then(function(ret){
      console.log(ret.data)
    })

axios post请求传参

    axios.post('http://localhost:3000/axios', {  
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })
    
    var params = new URLSearchParams();  
    params.append('uname', 'zhangsan');
    params.append('pwd', '111');
    axios.post('http://localhost:3000/axios', params).then(function(ret){
      console.log(ret.data)
    })

axios put 请求传参

    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })

8.axios响应结果

    axios.get('http://localhost:3000/axios-json').then(function(ret){
      console.log(ret.data.uname)
    })

9.axios全局配置

    // 配置请求的基准URL地址
    axios.defaults.baseURL = 'http://localhost:3000/';
    // 配置请求头信息
    axios.defaults.headers['mytoken'] = 'hello';
    axios.get('axios-json').then(function(ret){
      console.log(ret.data.uname)
    })

10.axios拦截器

请求拦截器

    axios.interceptors.request.use(function(config) {
      console.log(config.url)
      config.headers.mytoken = 'nihao';
      return config;
    }, function(err){
      console.log(err)
    })

响应拦截器

    axios.interceptors.response.use(function(res) {
      // console.log(res)
      var data = res.data;
      return data;
    }, function(err){
      console.log(err)
    })

11.async 函数基本用法

async/await 处理异步操作：

async函数返回一个Promise实例对象

await后面可以直接跟一个 Promise实例对象

axios 与 async

    axios.defaults.baseURL = 'http:localhost:3000';
    axios.get('adata').then(function(ret){
      console.log(ret.data)
    })
    
    axios.defaults.baseURL = 'http:localhost:3000';
    async function queryData() {
      var ret = await axios.get('adata');
      // console.log(ret.data)
      return ret.data;
    }

async 与 promise

    async function queryData() {
      var ret = await new Promise(function(resolve, reject){
        setTimeout(function(){
          resolve('nihao')
        },1000);
      })
      // console.log(ret.data)
      return ret;
    }
    queryData().then(function(data){
      console.log(data)
    })

12.async/await处理多个异步任务

    axios.defaults.baseURL = 'http://localhost:3000';

    async function queryData() {
      var info = await axios.get('async1');
      var ret = await axios.get('async2?info=' + info.data);
      return ret.data;
    }

    queryData().then(function(data){
      console.log(data)
    })

五、路由 Vue-Router

1、路由：本质一种对应关系

路由分为前端路由和后端路由

1).后端路由是由服务器端进行实现，并完成资源的分发

2).前端路由是依靠hash值(锚链接)的变化进行实现

2、前端路由

前端路由是基于hash值的变化进行实现的（比如点击页面中的菜单或者按钮改变URL的hash值，根据hash值的变化来控制组件的切换）

核心实现依靠一个事件，即监听hash值变化的事件

window.onhashchange = function(){
    //location.hash可以获取到最新的hash值
    location.hash
}

3.Vue Router

Vue Router的特性：

支持H5历史模式或者hash模式

支持嵌套路由

支持路由参数

支持编程式路由

支持命名路由

支持路由导航守卫

支持路由过渡动画特效

支持路由懒加载

支持路由滚动行为

4、Vue-Router使用

A.导入js文件

<script src="lib/vue_2.5.22.js"></script>
<script src="lib/vue-router_3.0.2.js"></script>

B.添加路由链接:是路由中提供的标签，默认会被渲染为a标签，to属性默认被渲染为href属性， to属性的值会被渲染为#开头的hash地址

<router-link to="/user">User</router-link>
<router-link to="/login">Login</router-link>

C.添加路由填充位（路由占位符）

<router-view></router-view>

D.定义路由组件

var User = { template:"<div>This is User</div>" }
var Login = { template:"<div>This is Login</div>" }

E.配置路由规则并创建路由实例

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes:[
        //每一个路由规则都是一个对象，对象中至少包含path和component两个属性
        //path表示  路由匹配的hash地址，component表示路由规则对应要展示的组件对象
        {path:"/user",component:User},
        {path:"/login",component:Login}
    ]
})

F.将路由挂载到Vue实例中

new Vue({
    el:"#app",
    //通过router属性挂载路由对象
    router:myRouter
})

5.路由重定向

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //path设置为/表示页面最初始的地址,redirect表示要被重定向的新地址，设置为一个路由即可
        { path:"/",redirect:"/user"},
        { path: "/user", component: User },
        { path: "/login", component: Login }
    ]
})

6、嵌套路由，动态路由的实现方式

嵌套路由的概念

  <body>
    <div id="app">
      <router-link to="/user">User</router-link>
      <router-link to="/register">Register</router-link>
      <router-view></router-view>  
    </div>
    <script>
      const User = {
        template: '<h1>User 组件</h1>'
      }
      const Register = {
        template: `<div>
          <h1>Register 组件</h1>
          <hr/>

          
          <router-link to="/register/tab1">tab1</router-link>
          <router-link to="/register/tab2">tab2</router-link>

          
          <router-view />
        <div>`
      }

      const Tab1 = {
        template: '<h3>tab1 子组件</h3>'
      }

      const Tab2 = {
        template: '<h3>tab2 子组件</h3>'
      }
      const router = new VueRouter({  // 创建路由实例对象
        routes: [ // 所有的路由规则
          { path: '/', redirect: '/user'},
          { path: '/user', component: User },
          { path: '/register', component: Register, children: [ // children 数组表示子路由规则
            { path: '/register/tab1', component: Tab1 },
            { path: '/register/tab2', component: Tab2 }
          ] }
        ]
      })
      const vm = new Vue({  // 创建 vm 实例对象
        el: '#app',  // 指定控制的区域
        data: {},
        // 挂载路由实例对象
        // router: router
        router
      })
    </script>
  </body>
</html>

动态路由匹配1使用$route.params.id来获取路径传参的数据

var User = { template:"<div>用户：{{$route.params.id}}</div>"}
var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        { path: "/user/:id", component: User },
    ]
})

动态路由匹配2通过props来接收参数

var User = { 
    props:["id"],
    template:"<div>用户：{{id}}</div>"
    }

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        //如果props设置为true，route.params将会被设置为组件属性
        { path: "/user/:id", component: User,props:true },
    ]
})

动态路由匹配3将props设置为对象，那么就直接将对象的数据传递给组件进行使用

var User = { 
    props:["username","pwd"],
    template:"<div>用户：{{username}}---{{pwd}}</div>"
    }

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        //如果props设置为对象，则传递的是对象中的数据给组件
        { path: "/user/:id", component: User,props:{username:"jack",pwd:123} },
    ]
})

动态路由匹配4.如果想要获取传递的参数值还想要获取传递的对象数据，那么props应该设置为函数形式。

var User = { 
    props:["username","pwd","id"],
    template:"<div>用户：{{id}} -> {{username}}---{{pwd}}</div>"
    }

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过/:参数名  的形式传递参数 
        //如果props设置为函数，则通过函数的第一个参数获取路由对象
        //并可以通过路由对象的params属性获取传递的参数
        //
        { path: "/user/:id", component: User,props:(route)=>{
            return {username:"jack",pwd:123,id:route.params.id}
            } 
        },
    ]
})

7.命名路由以及编程式导航

命名路由：给路由取别名

var myRouter = new VueRouter({
    //routes是路由规则数组
    routes: [
        //通过name属性为路由添加一个别名
        { path: "/user/:id", component: User, name:"user"},
    ]
})
//添加了别名之后，可以使用别名进行跳转
<router-link to="/user">User</router-link>
<router-link :to="{ name:'user' , params: {id:123} }">User</router-link>
//还可以编程式导航
myRouter.push( { name:'user' , params: {id:123} } )

编程式导航：通过点击链接的方式实现的导航编程式导航：调用js的api方法实现导航

this.$router.push("hash地址");
this.$router.push("/login");
this.$router.push({ name:'user' , params: {id:123} });
this.$router.push({ path:"/login" });
this.$router.push({ path:"/login",query:{username:"jack"} });

this.$router.go( n );//n为数字，参考history.go
this.$router.go( -1 );

2024年 11月
一	二	三	四	五	六	日
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30