Vue知识点总结
本文最后更新于 867 天前,其中的信息可能已经有所发展或是发生改变。

一、指令

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用来绑定事件的

  1. 无参
    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>
  1. 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>
  1. 事件修饰符
<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  
  1. 按键修饰符
<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)

  1. 绑定对象
    可以给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>
  1. 绑定数组
<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>
  1. 在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 );
标题:Vue知识点总结
地址:https://xiaodongxier.com/162.html
作者:王永杰
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇