Vue(7)

目录

插件

scoped样式

Todo-list案例

---

插件

功能：用于增强Vue

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

定义插件：

对象.install=function(Vue,options){
//1.添加全局过滤器
Vue.filter(...)
//2.添加全局指令
Vue.directive(...)
//3.配置全局混入（合）
Vue.mixin(...)
//4.添加实例对象
Vue.prototype.$myMethod=function(){...}
Vue.prototype.$myProperty=xxxx
}

使用插件

Vue.use()

 plugins.js

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

    // 定义全局指令
    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原型尚添加一个方法（vm和vc就都能用）
    Vue.prototype.hello=()=>{alert('你好啊！！')}
    }
}

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)

// 创建vm
new Vue({
    el:'#app',
    render:h=>h(App)
})

scoped样式

作用：让样式在局部生效，防止冲突

写法：

<style scoped>

School.vue

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

<script>
export default {
  name: "School",
  data() {
    return {
      name: "尚硅谷atguigu",
      address: "北京",
    };
  },
};
</script>

<!-- 默认css -->
<!-- <style scoped>
  .demo{
    background-color: skyblue;
  }
</style> -->
<style lang="less">
.demo {
  background-color: skyblue;
  .atguigu {
    font-size: 40px;
  }
}
</style>

Todo-list案例