这是第一个插槽
这是第2个插槽
v-2.6.x:
{{ props.my }}
{{ props.handsome }}
自定义指令
// Vue.directive(‘focus’,{
// // 5个javascript钩子 5个中掌握2个
// bind (el,binding,vnode,oldVnode) { // 当自定义指令和元素绑定时触发
// console.log( ‘bind’, )
// },
// inserted ( el,binding,vnode,oldVnode ) { // 当自定义指令绑定的元素插入到页面时触发
// console.log( ‘el’,el)
// console.log( ‘binding’,binding)
// console.log( ‘vnode’,vnode)
// console.log( ‘oldVnode’,oldVnode)
// console.log(‘inserted’)
// if ( binding.modifiers.a ) {
// el.style.background = ‘red’
// } else {
// el.style.background = ‘blue’
// }
// el.value = binding.expression
// el.focus()
// },
// updated () { // 当自定义指令的元素或是他的子元素发生变化式触发
// },
// componentUpdate () { //当自定义指令的元素或是他的虚拟子节点 发生变化式触发
// },
// unbind () { // 当自定义指令绑定的元素解绑时触发
// }
// })
new Vue({
el: ‘#app’,
directives: {
‘focus’: {
bind () {
},
inserted ( el ) {
el.focus()
}
}
}
})
组件通信: