Vue学习笔记——实例和内置组件

短命女 2022-05-19 02:50 194阅读 0赞

> 概述：实例就是在构造器**外部操作**构造器**内部**的属性选项或者方法，就叫做实例？实例的作用就是**给原生的或者其他javascript框架**一个**融合的接口**或者说是机会，**让Vue和其他框架一起使用**。

第1节：实例入门-实例属性

1、Vue和Jquery.js一起使用

2、实例调用自定义方法

// Vue的构造器里调用add方法：
    methods:{
        add:function(){
            console.log("调用了Add方法");
        }
    }
    // 实例调用：
    app.add();

第2节：实例方法

1、$mount方法

// $mount方法是用来挂载我们的扩展的
    var jspang = Vue.extend({
              template:`<p>{
       {message}}</p>`,
              data:function(){
                  return {
                      message:'Hello ,I am JSPang'
                  }
              }
          })
          var vm = new jspang().$mount("#app")

2、$destroy() 卸载方法

// 用$destroy()进行卸载。我写了一个button按钮，点击后卸载整个挂载。html：
    <p><button onclick="destroy()">卸载</button></p>
    javascript：
    function destroy(){
       vm.$destroy();
    }

PS:$destroy()后边必须要有括号，没有括号是无用的。

3、$forceUpdate() 更新方法

vm.$forceUpdate()

4、$nextTick() 数据修改方法

当Vue构造器里的data值被修改完成后会调用这个方法，也相当于一个钩子函数吧，和构造器里的updated生命周期很像。

function tick(){
        vm.message="update message info ";
        vm.$nextTick(function(){
            console.log('message更新完后我被调用了');
        })
    }

5、安装Vue的控制台调试工具

第3节：实例事件

实例事件就是在构造器外部写一个调用构造器内部的方法。这样写的好处是可以通过这种写法在构造器外部调用构造器内部的数据。

1、$on  在构造器外部添加事件。

app.$on('reduce',function(){
        console.log('执行了reduce()');
        this.num--;
    });
    $on接收两个参数，第一个参数是调用时的事件名称，第二个参数是一个匿名方法。
    如果按钮在作用域外部，可以利用$emit来执行。
    //外部调用内部事件
    function reduce(){
        app.$emit('reduce');
    }

2、 $once执行一次的事件

app.$once('reduceOnce',function(){
        console.log('只执行一次的方法');
        this.num--;
     
    });

3、$off关闭事件

//关闭事件
    function off(){
       app.$off('reduce');
    }

第4节：内置组件 -slot讲解

slot是标签的内容扩展，也就是说你用slot就可以在自定义组件时传递给组件内容，组件接收内容并输出。

先来定义一个<jspang></jspang>的组件，这个组件用来显示博主的一些信息。

我们在Vue 构造器里的data中给出了信息，信息如下：（博客地址，网名，使用技能）

data:{
        jspangData:{
            bolgUrl:'http://jspang.com',
            netName:'技术胖',
            skill:'Web前端'
        }
    },

我们用<template></template>标签的方式定义了组件：

用slot功能让组件接收传递过来的值，并在模板中接收显示

## slot的使用需要两步： ##

1、在HTML的组件中用slot属性传递值。

<jspang>
        <span slot="bolgUrl">{
       {jspangData.bolgUrl}}</span>    
        <span slot="netName">{
       {jspangData.netName}}</span>    
        <span slot="skill">{
       {jspangData.skill}}</span>    
    </jspang>

2、在组件模板中用<slot></slot>标签接收值。

<template id="tmp">
        <div>
            <p>博客地址：<slot name="bolgUrl"></slot></p>
            <p>网名：<slot name="netName"></slot></p>
            <p>技术类型：<slot name="skill"></slot></p>
        </div>
    </template>
    
    
    // javascript：
    var jspang={
         template:'#tmp'
    }
    components:{
          "jspang":jspang
    }