vue分为自定义指令和内置指令
内置指令
- v-for 用于遍历
- v-if & v-show 用于隐藏和显示元素(区别在于后者是修改 display:block|none,前者是不创建把元素从dom中删除或者创建.
- v-bind: 属性绑定,把数据绑定在HTML元素的属性上.
- v-html & v-text 把数据绑定在HTML元素的属性上,作用同 innerHTML & innerText
- v-on: 绑定HTML元素事件
- v-if & v-else-if & v-else 条件渲染
- v-model 绑定表单元素,实现双向绑定.
等等一些...
自定义指令
自定义指令分为全局和局部的两种
下面用两个案例来演示
全局：一个简单的拖拽小案例
< body> < div id="app">
< p v-drag>< /p>
< /div>
< /body>
< script type="text/javascript">
Vue.directive('drag',function(el){
el.onmousedown = function(e){
var px = e.clientX - el.offsetLeft
var py = e.clientY - el.offsetTop
document.onmousemove = function(e){
var l = e.clientX - px;
var t = e.clientY - py;
el.style.left=l+'px';
el.style.top=t+'px';
}
document.onmouseup = function(e){
document.onmousemove = null;
}
}
})
< /script>
局部：一个简单的变换背景颜色
< body> < div id="app">
< p v-color>< /p>
< /div>
< /body>
< script> new Vue({
el:'#app',
directives:{
color:{
// 指令的定义
inserted: function (el) {
el.style.background = "rgb("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+")"
}
}
}
})
< /script>
自定义指令的钩子函数
- bind(){} 当指令绑定到 HTML 元素上时触发.只调用一次.
- inserted() 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 div#app).但不保证,父元素已经插入了 DOM 文档.
- updated() 所在组件的VNode更新时调用.
- componentUpdate 指令所在的组件的VNode以及其子VNode 全部更新后调用.
- unbind: 指令和元素解绑的时候调用,只调用一次
