vue学习05-插件与Scoped属性

插件

在 Vue.js 中，插件是一种用于扩展 Vue.js 应用的机制，它允许你在全局范围内添加新的功能或库，以便在多个组件中共享和重用。以下是与 Vue.js 插件相关的一些概念和使用方式：

插件的定义：插件通常是一个包含 install 方法的 JavaScript 对象或函数。这个 install 方法在安装插件时被调用，可以接受 Vue 构造函数作为参数，以便在全局范围内添加功能或组件。

例如：

// MyPlugin.js
const MyPlugin = {
  install(Vue) {
    // 在Vue中添加全局方法或组件
    Vue.prototype.$myMethod = function () {
      // 实现某个功能
    };
  }
};

插件的安装： 通过使用 Vue.use() 方法来安装插件，通常在 Vue 实例化之前进行安装。这将调用插件的 install 方法，使插件的功能在应用程序中生效。

// main.js
import Vue from 'vue'
import MyPlugin from './MyPlugin.js'

Vue.use(MyPlugin); // 安装插件

插件的使用：一旦插件被安装，就可以在任何组件中使用插件提供的功能或组件。例如，你可以在任何组件中使用 this.$myMethod() 调用插件提供的方法。

demo

<template>
  <div>
    <button @click="callMyMethod">Call My Plugin Method</button>
  </div>
</template>

<script>
export default {
  methods: {
    callMyMethod() {
      this.$myMethod(); // 调用插件提供的方法
    }
  }
};
</script>

插件的用途：插件可以用于添加全局方法、全局混入、全局组件等。你可以根据需求选择适合的方式来扩展 Vue.js 功能。例如，你可以使用插件来添加数据验证、路由管理、状态管理等功能。

插件的生态系统： Vue.js 社区拥有丰富的插件生态系统，你可以找到许多第三方插件，以满足各种需求，如 Vue Router 用于路由管理、Vuex 用于状态管理、axios 用于网络请求等。

总之，Vue.js 插件是一种强大的方式，可以轻松扩展和增强你的 Vue.js 应用。通过合理使用插件，你可以将常用功能模块化，并在整个应用程序中重用它们，提高开发效率和代码可维护性。

以下将展示一个博主学习过程中的插件的使用

App.vue

<template>
    <div>
        <!-- 编写组件标签 -->
        <Student></Student>
        <hr/>
        <School></School>
    </div>
</template>

<script>
    //导入Student组件
    import Student from './components/Student.vue';

    import School from './components/School.vue';

    export default {
        name:'App',
        //注册组件
        components:{
            Student,
            School
        }
    }
</script>

<style>

</style>

App.vue同级目录下

main.js

//引入Vue组件
import Vue from 'vue';

//引入App组件
import App from './App.vue';

//引入插件
import plugins from './plugins';

//关闭Vue生产提示信息
Vue.config.productionTip=false;

//使用(应用)插件
Vue.use(plugins);

//创建Vue实例对象nm
const vm = new Vue({
    el:'#app',
    render(h) {
        return h(App);
    }
});

插件plugins.js

export default{
    install(a){
        console.log("@@@install",a);
    }
}

components/目录下

School.vue

<template>
    <div class="demo2">
        <h2>学校名字:{{name}}</h2>
        <h2>学校地址:{{address}}</h2>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                name:'罗小黑',
                address:'湖南衡阳'
            }
        }
    }
</script>

<style>
    .demo2{
        background-color: orange;
    }
</style>

Student.vue

<template>
    <div class="demo">
        <h2>学生姓名:{{name}}</h2>
        <h2>年龄:{{age}}</h2>
    </div>
</template>

<script>
    //暴露组件
    export default {
        name: 'Student',
        data(){
            return{
                name:'张三',
                age:18
            }
        }
    }
</script>

<style>
    .demo{
        background-color: skyblue;
    }
</style>

Scoped属性

在 Vue.js 中，scoped 属性用于限定样式的作用范围，它通常用于组件的 style 标签中，以确保样式只对当前组件生效，而不会影响到其他组件或全局样式。

使用 scoped 属性的方式很简单，只需在 style 标签上添加 scoped 属性即可：

<template>
  <div class="example">
    <p>This is a scoped style example.</p>
  </div>
</template>

<style scoped>
.example {
  background-color: lightblue;
  padding: 10px;
}

p {
  color: red;
}
</style>