自定义指令钩子、局部和全局、单文件组件、组件的属性

自定义指令钩子

除了默认设置的核心指令( v-model 和 v-show 等)，Vue 也允许注册自定义指令。

在Vue里，代码复用的主要形式和抽象是组件。

然而，有的情况下，仍然需要对纯 DOM 元素进行底层操作，这时候就会用到自定义指令 。

以一个input元素自动获得焦点为例，当页面加载时，使用autofocuse可以让元素将获得焦点 ，但是autofocuse在移动版Safari上不工作，现在注册一个使元素自动获取焦点的指令。

指令注册类似于组件注册，包括全局指令和局部指令两种。

全局指令

// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})

局部指令

var vm = new Vue({
  el: '#app',
  directives:{
    focus:{
      inserted: function (el) {
        el.focus()
      }      
    }
  }
})

钩子函数
指令定义函数提供了几个钩子函数（可选） 。
【bind】
　　只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

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

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

【componentUpdated】
　　所在组件的 VNode 及其孩子的 VNode 全部更新时调用。

【unbind】
　　只调用一次， 指令与元素解绑时调用。

注意区别：
bind与inserted：bind时父节点为null，inserted时父节点存在；
update与componentUpdated：update是数据更新前，componentUpdated是数据更新后。

钩子函数参数
【el】
　　指令所绑定的元素，可以用来直接操作 DOM。

【binding】
　　一个对象，包含指令名称及该指令所绑定的表达式信息。

【vnode】
　　Vue 编译生成的虚拟节点。
　　
【oldVnode】
　　上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。

注意：除了 el 之外，其它参数都是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行。

函数简写
大多数情况下，可能想在bind和update钩子上做重复动作，并且不想关心其它的钩子函数。可以这样写

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

Vue.directive('demo', function (el, binding) {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

nextTick

学习了生命周期函数以后 会有一个问题:我们在写业务时 总是会考虑一个事情: 现在正在写的业务代码能否操作vm.
所以我们需要一个工具 就是让我们写的代码 无论在哪里写 都希望它是组件加载完了以后才运行
nextTick的作用
nextTick 就是设置一个回调，用于异步执行。
就是把你设置的回调放在 setTimeout 中执行，这样就算异步了，等待当时同步代码执行完毕再执行

局部和全局

全局组件
组件的属性不能用大写字母
组件的名字可以用驼峰命名法,但是使用的时候必须用连字符
全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次 多次使用只显示第一个)

注册的组件不要跟系统标签同名

局部组件:
一个vm实例可以有多个局部组件,但是只能供当前vm实例使用

单文件组件

单文件组件
引入:@1官方脚手架 @2挂载vm对象 @3组件引入并渲染到vm中

单文件组件也有全局组件和局部组件
只是把一个组件单独写在一个.vue文件中,供别的组件引入然后注册
引入文件时:一般使用相对路径 上一下用…/ 同级使用./ 下级使用/ @ 代表src文件夹

<div id="app">
			<nav1 son-proprety="子组件使用时属性传进去的值"></nav1>	
			<content1 img2src="./img/2.png"></content1>
		</div>
		
		<div id="app2">
			<nav1 son-proprety="子组件使用时属性传进去的值2"></nav1>
			<content1 img2src="./img/2.png"></content1>	
		</div>
		<script type="text/javascript">
		   //祖册全局组件
			Vue.component("nav1",{
				data(){return {sondata:"子组件的数据"}},
				template:`<div><h1>{{sondata}}</h1><p>{{sonProprety}}</p></div>`,
				props:["sonProprety"]
			})
			
			
			// let content1={
			// 			data(){return {img1:"./img/1.png"}},
			// 			template:`<div><img :src="img1"/><img :src="img2src"/></div>`,
			// 			props:["img2src"]
			// 		}
			
			
			new Vue({
				el:"#app",
				data:{},
				components:{
					// content1
					//注册局部组件
					content1:{
								data(){return {img1:"./img/1.png"}},
								template:`<div><img :src="img1"/><img :src="img2src"/></div>`,
								props:["img2src"]
							}
				}
			})
			new Vue({
				el:"#app2",
				data:{}				
			})
		</script>

组件的属性

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

简单声明
props:[“prop1”,“prop2”]

对属性做详细的描述

props: {
	propA: Number,		// 基础的类型检查 (`null` 匹配任何类型)
	propB: [String, Number],	// 多个可能的类型
	propC: {	type: String,
     		 required: true	// 必填的字符串
   	},
	propD: {	type: Number,
      		default: 100	// 带有默认值的数字
    	},
	propE: {	type: Object,	// 带有默认值的对象或者数组填Array
		default: function () {	// 不建议直接填对象(因为对象直接量会一直占用内存),一般使用工厂函数,调用时才创建对象节省资源(面试)
        		return { message: 'hello' }
      		}
    	},
	propF: {
      		validator: function (value) {// 自定义验证函数返回为true就代表数据符合我们规定
			return ['success', 'warning', 'danger'].indexOf(value) !== -1
      		}
    	}
  }