vue——全局/局部组件、单文件组件、组件的属性、全局样式、局部样式

一、组件

全局组件：

• 所有组件共同可用的功能（全局指令、过滤器、组件）
• 组件的属性不能用大写字母 组件的名字可以用驼峰命名法,但是使用的时候必须用连字符
• 全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次 多次使用只显示第一个)
• 注册的组件不要跟系统标签同名

Vue.filter("alltool", function (str) {
            return str + "-alltool"
        })
Vue.component("allbox", {
            template: `
全局组件
`
        })
Vue.directive("color", function (el, obj) {
            el.style.color = obj.value
        })

局部组件：

•  只有当前组件可用的功能（全局指令、过滤器、组件）
• 一个vm（根组件）实例可以有多个局部组件,但是只能供当前vm实例使用

var vm = new Vue({
            el: "#eg1",
            data: {},
            methods: {},
            components: {
                Box1: {
                    template: `

                        
{{msg|box1tool}}
                        
{{msg1|alltool}}
                              
`,
                    data: function () {
                        return {
                            msg: "hello",
                            msg1: "全局过滤器",
                        }
                    },
                    methods: {
                        fn() {
                            console.log("组件的全部方法")
                        }
                    },
                    //局部过滤器 只能box1使用 
                    filters: {
                        box1tool(str) {
                            return str + "box1-filter"
                        }
                    }
                },
                Box2: {
                    template: `

                        
{{msg|box1tool}}
                        
{{msg1|alltool}}
                              
`,
                    //局部过滤器 box2中不能使用 只能box1使用 
                    data: function () {
                        return {
                            msg: "world",
                            msg1: "全局过滤器",
                        }
                    },
                },
            }
        })

  结果显示：

组件的嵌套：

• .vue文件既可以是一个页面,也可以是一个组件
• 它可以被别的.vue文件引入 然后作为组件使用

二、单文件组件的技术点

1.在项目下创建vue.config.js 就是vue的打包配置文件:

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false//关闭eslint的严格模式检测
})

2.引入文件时 @代表src目录

• @是vue的脚手架集成的basepath 其他框架中没有@

//引入src目录下的Nav1.vue文件
import Nav1 from "./Nav1.vue"
//可以写为
import Nav1 from "@/Nav1.vue"

3.注册的组件名不能跟vue中的原生DOM重名,注册的名字是驼峰 使用时就用连字符

•  如下注册的组件名为BoxDiv  使用时：

import BoxDiv from "@/BoxDiv.vue"

4.注册的组件 使用时可以用双标签也可以用单标签: 如果有插槽必须用双标签

单标签：
双标签：

5.  .vue文件中 可以只有template 至少有一个模板

• 在打包的时候 vue脚手架会将文件解析为一个对象 然后给对象添加属性 就是template模板 值为解析的