组件创建:组件就是自己定义的标签
<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 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>