自定义指令、组件

一、自定义指令

指令定义函数提供的几个钩子函数：

1、bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作

2、inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）

3、update：所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新

4、componentUpdated：所在组件的 VNode 及其孩子的 VNode 全部更新时调用

5、unbind：只调用一次， 指令与元素解绑时调用

directives:{
	aaaa:{
		bind(){
			console.log("bind")
			},
		inserted(el,binding){
			var v=binding.value
			console.log(v)
			},
		update(){
			console.log("update")
			},
		componentUpdated(){
							
			},
		unbind(){
							
			}
		}
}

二、nextTick

nextTick()，是将回调函数延迟在下一次dom更新数据后调用，简单的理解是：当数据更新了，在dom中渲染后，自动执行该函数

Vue.nextTick(()=>{  //当数据发生变化，更新后执行回调。在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
console.log(this.msg)
})
this.$nextTick(()=>{  //当dom发生变化，更新后执行的回调。将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。
console.log(this.msg)
})

三、组件

1、单文件组件

引入官方脚手架、挂载vm对象、组件引入并渲染到vm中

单文件组件也有全局组件和局部组件

只是把一个组件单独写在一个.vue文件中，供别的组件引入然后注册

引入文件时：一般使用相对路径，上一下用../ 同级使用./ 下级使用/   @ 代表src文件夹

注意点：（1）注册的组件名不能跟vue中的和原生DOM的重名,注册的名字是驼峰 使用时就用连字符

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

（3）如果.vue的script注释了，在打包的时候 vue的打包环境会帮我们把这个文件解析为一个对象， 然后给这个对象添加一个template属性 ，值为解析的<template>页面模板，也就是说 .vue文件中可以不要<style>和<script> 但是不能不写<template>，<style>可以写多个

（4）每一个组件内部只能有一个根元素 不要再根元素上写v-for

//注册全局组件
Vue.components("allbox",{
            template:"<h4>228393899</h4>"})

//注册局部组件
var vm = new Vue({
            el: ".app",
            data: {
                msg: "adopt1111"
            },
            methods: {},
            components: {
                Box1: {
                    template: `<div>
                        <p>{{msg}}</p>
                        <h2 v-color>{{msg|aootool1}}</h2>
                        <Box11 v-color2></Box11>
                        <allbox></allbox>
                        </div>`,
                    data: function () {
                        return {
                            msg: "hello"
                        }
                    },
                    methods: {},
                    filters: {
                        box1tool(str) {
                            return str + "box1-filter"
                        }
                    },
                    directives: {
                        color2: {
                            inserted(el, option) {
                                el.style.color = option.value || "yellow"
                            }
                        }
                    }

2、组件的属性

属性有两种写法：简单声明和详细描述

属性可以多传 ，但是注册了的属性就必须传，不然有可能会在使用时因为取值问题出BUG
属性名不要（不是不能）用vue官方或者原生标签已经签名过的名字：比如id  class  href
属性的类型验证只是一种验证提示，不会阻止程序运行

（1）简单写法

props:["prop1","prop2"]

（2）详细描述

props: {
	propA: Number,		// 基础的类型检查 (`null` 匹配任何类型)
	propB: [String, Number],	// 多个可能的类型
}

3、css样式相关技术

全局样式的写法：

（1）在.vue文件中的style中写的样式打包后就是全局样式

（2）写一个css文件，在项目中导入就是全局样式
如果全局样式出现了相同的选择器，就看是哪个最后打包引入项目 ，哪个的优先级就最高

局部样式/CSS作用域的实现和原理：

在style标签中添加一个scoped
原理就是vue的插件webpack打包时会把当前组件模板中的每一个元素添加一个相同的哈希值命名的属性名，并且为添加了scoped的style中的样式选择器上添加一个属性选择器

vue文件中可以出现多个style标签，凡是添加了scoped属性的，里面的选择器就会被修改 ，没添加scoped属性的就不会被修改