Vue基础10之插件、scoped与lang的样式

插件

plugins.js:

export default {
    install(Vue){
        console.log("Vue:",Vue)

        //全局过滤器
        Vue.filter('mySlice',function (value){
            return value.slice(0,5)
        })

        //定义全局指令
        Vue.directive('fbind',{
            //指令与元素成功绑定（一上来）
            bind(element,binding){
                element.value=binding.value
            },
            //指令所在元素被插入页面时
            inserted(element,binding){
                element.focus()
            },
            //指令所在的模板被重新解析时
            update(element,binding){
                element.value=binding.value
            }
        })

        //定义混入
        Vue.mixin({
            data(){
                return{
                    x:100,
                    y:200
                }
            }
        })

        //给Vue原型上添加一个方法（vc和vm都能使用）
        Vue.prototype.hello=()=>{alert('你好啊')}
    }
}

main.js:

import Vue from 'vue'

import App from './App'

//引入插件
import plugins from "@/plugins";

Vue.config.productionTip = false

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

new Vue({
    el:"#app",
    render: h=>h(App)
})

MyStudent.vue:

<template>
  <div>
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
    <input type="text" v-fbind:value="name">
  </div>
</template>

<script>
    export default {
      name: "MyStudent",
      data(){
          return{
            name:'张三',
            sex:'男'
          }
      }
    }
</script>

<style scoped>

</style>

MySchool.vue:

<template>
  <div>
    <h2>学校名称：{{name | mySlice}}</h2>
    <h2>学校地址：{{address}}</h2>
    <button @click="sayHello">点我说hello</button>
  </div>
</template>

<script>
export default {
  name: "MySchool",
  data(){
    return{
      name:"幸福中学12138",
      address:"重庆"
    }
  },
  methods:{
    sayHello(){
      this.hello()
    }
  }
}
</script>

<style scoped>

</style>

App.vue

<template>
  <div>
    <MySchool/>
    <hr>
    <MyStudent/>
  </div>
</template>

<script>

import MySchool from "@/components/MySchool";
import MyStudent from "@/components/MyStudent";
export default {
  name: "App",
  components:{MyStudent, MySchool}
}
</script>

插件:

1. 功能：用于增强Vue

2. 本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

3. 定义插件：
   对象.install = function(Vue,options){
   //1.添加全局过滤器
   Vue.filter(…)

    //2.添加全局指令
    Vue.directive(...)
   
    //3.配置全局混入(合)
    Vue.mixin(...)
   
    //4.添加实例方法
    Vue.prototype.$myMethod=function(){...}
    Vue.prototype.$myProperty=xxx
   

   }
   使用插件：Vue.use()

main.js:

import Vue from 'vue'

import App from './App'

//引入插件
import plugins from "@/plugins";

Vue.config.productionTip = false

//应用插件
Vue.use(plugins,1,2,3)

new Vue({
    el:"#app",
    render: h=>h(App)
})

plugins.js:

export default {
    install(Vue,x,y,z){
        console.log("Vue:",Vue)
        console.log(x,y,z)

        //全局过滤器
        Vue.filter('mySlice',function (value){
            return value.slice(0,5)
        })

        //定义全局指令
        Vue.directive('fbind',{
            //指令与元素成功绑定（一上来）
            bind(element,binding){
                element.value=binding.value
            },
            //指令所在元素被插入页面时
            inserted(element,binding){
                element.focus()
            },
            //指令所在的模板被重新解析时
            update(element,binding){
                element.value=binding.value
            }
        })

        //定义混入
        Vue.mixin({
            data(){
                return{
                    x:100,
                    y:200
                }
            }
        })

        //给Vue原型上添加一个方法（vc和vm都能使用）
        Vue.prototype.hello=()=>{alert('你好啊')}
    }
}

scoped与lang样式

scoped

App.vue:

<template>
  <div>
    <h1 class="title">欢迎光临！</h1>
    <MySchool/>
    <hr>
    <MyStudent/>
  </div>
</template>

<script>

import MySchool from "@/components/MySchool";
import MyStudent from "@/components/MyStudent";
export default {
  name: "App",
  components:{MyStudent, MySchool}
}
</script>

<style scoped>
.title{
  color: red;
}
</style>

MyStudent.vue

<template>
  <div class="demo">
    <h2>学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
  </div>
</template>

<script>
    export default {
      name: "MyStudent",
      data(){
          return{
            name:'张三',
            sex:'男'
          }
      }
    }
</script>

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

MySchool.vue:

<template>
  <div class="demo">
    <h2 class="title">学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
export default {
  name: "MySchool",
  data(){
    return{
      name:"幸福中学12138",
      address:"重庆"
    }
  }
}
</script>

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

scoped的原理是属性选择器，通过属性选择器使得类名冲突的不同组件也能实现不同样式

lang样式

lang默认是css样式，可以自行选择

安装less

1. 安装less-loader，默认是最新版本
   webpack 5可以安装less-loader 8或9版本
   
   查看webpack最新版本：

npm view webpack version

查看webpack所有版本：

npm view webpack version

webpack 4 可以安装less-loader5,6,7版本，建议安装7

npm i less-loader@7

2. 安装less

npm i less

less样式的使用

MySchool.vue

<template>
  <div class="demo">
    <h2 class="title">学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
  </div>
</template>

<script>
export default {
  name: "MySchool",
  data(){
    return{
      name:"幸福中学12138",
      address:"重庆"
    }
  }
}
</script>

<style scoped lang="less">
.demo{
  background-color: skyblue;
  .title{
    color: mediumpurple;
  }
}
</style>

总结

作用：让样式在局部生效，防止冲突
写法：<style scoped>