Vue组件

组件创建：组件就是自己定义的标签

<div id="app">
    <hkj></hkj> //全局组件，任何注册实例均可使用
    <child></child>   //局部组件，只可在父模板中可用
</div>
<div id="app1">
<hkj></hkj>
</div>
<script>
    Vue.component("hkj",{ //全局组件,所有注册的vue实例均可使用
       template: '<h1>自定义组件</h1>'   
    })
    new Vue({
    el:"#app",
    components:{
    "child":{
    template:"<h1>局部自定义组件</h1>"
    }
    }
    })
    new Vue({
    el:"app1"
    })
</script>

Prop

官方解释：父组件用来传递数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"。
个人理解就是组件定义一个属性可以给自己传数据。

<div id="app1">
<child message="hello"></child>
</div>
<script type="text/javascript">
Vue.component('child',{
//申明prop
props:['message'], //对应child中message的值
template:'<h1>{{message}}</h1>' //获取message
})
new Vue({
el:"app"
})
</script>

动态Prop:将一个组件中的数据传递到另一个组件中

<div id="app1">
<input v-model="input_message"/> //将数据传入input_message
<child v-bind:message="input_message"></child>       //将child中message属性与input_message绑定
</div>
<script type="text/javascript">
Vue.component("child",{
props:['message'], //对应child中message
template:"<h1>message</h1>" //获取message
})
new Vue({
el:"#app1",
data:{
input_message:"hello_world" //input传递过来的值
}
})
</script>

自定义指令

<div id="app">
<input type="text" v-focus />创建个自动获取焦点指令
</div>
<script type="text/javascript">
Vue.directive('focus'{ //创建focus指令
inserted:function(el){ //将绑定方法插入dom元素，el: 指令所绑定的元素，可以用来直接操作 DOM 。
el.focus() //调用Window对象的focus方法
}
})
new Vue({
el:"#app"
})
</script>

局部自定义指令：

<script type="text/javascript">
new Vue({
el:"#app",
directives:{
focus:{
inserted:function(el){
el.focus()
}
}
}
})
</script>

钩子函数：方法调用属性

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次， 指令与元素解绑时调用。

钩子函数参数：

el: 指令所绑定的元素，可以用来直接操作 DOM 。
binding: 一个对象，包含以下属性：
name: 指令名，不包括 v- 前缀。
value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。
oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression: 绑定值的字符串形式。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"。
arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"。

modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }。

<div>
<div v-redbox="{width:'200px',height:'300px',back:'red',text:'aaa'}" ></div>
</div>
<script type="text/javascript">
Vue.directive('redbox',function(el,binding){ //指令命名可用-连接，不能出现大写，否则无效
el.innerHTML = binding.value.text
el.style.width = binding.value.width
el.style.height = binding.value.height
el.style.backgroundColor = binding.value.back
})
</script>