9. 自定义指令
- bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
- update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。
<div id='app'>
<input v-focus>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
Vue.directive('focus',{
inserted:function(el){
el.focus()
}
})
var app = new Vue({
el:'#app',
})
</script>
10. 渲染函数
VUE一般使用template来创建HTML,然后在有的时候,我们需要使用javascript来创建html,这时候我们需要使用render函数。
<div id='app'>
<my-component></my-component>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
Vue.component('my-component',{
render: function (createElement) {
//第一个参数是节点标签,第二个参数是数据选项,第三个是子节点相关
return createElement('div',{style:{color:'red'}},'我是渲染函数')
}
})
var app = new Vue({
el:'#app',
})
</script>