You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.4 KiB
50 lines
1.4 KiB
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>自定义指令</title> |
|
<script type="text/javascript" src="../vue.js"></script> |
|
</head> |
|
<body> |
|
<div id="root"> |
|
<h2>当前的n值是：<span v-text="n"></span></h2> |
|
<h2>放大10倍的n值是：<span v-big="n"></span></h2> |
|
<button @click="n++">n+1</button> |
|
<hr/> |
|
<input type="text" v-fbind:value="n" > |
|
</div> |
|
<script type="text/javascript"> |
|
Vue.config.productionTip = false // 组织开发环境提示 |
|
|
|
// 创建Vue实例 |
|
const x = new Vue({ |
|
el: '#root', |
|
data: { |
|
n: 1, |
|
}, |
|
directives: { |
|
// big函数何时会被调用？1.指令与元素成功绑定时；2.指令所在模板被重新解析时 |
|
big(element, binding) { |
|
element.innerText = binding.value * 10 |
|
}, |
|
fbind: { |
|
// 绑定时调用 |
|
bind(element, binding){ |
|
element.value = binding.value |
|
}, |
|
// 渲染时调用 |
|
inserted(element, binding){ |
|
element.focus() |
|
}, |
|
// 重新渲染时调用 |
|
update(element, binding){ |
|
element.value = binding.value |
|
element.focus() |
|
} |
|
} |
|
} |
|
}) |
|
</script> |
|
|
|
</body> |
|
</html> |